Why is my CSS showing in my HTML?

  • 11 October 2023
  • 6 replies
  • 49 views
sfrost
Rank
Userlevel 4
Badge +2

I had a slider working thanks to @gtstager HTML/CSS code provided. 

And then I borked it… 

 

My CSS is now showing up as text :( 

 

Anyone have any idea what I am doing wrong… Google was not helpful and I only know enough CSS HTML to be dangerous. 

 

This is showing instead of my image on one of my carousels and the other one at least displays an image. 

 

I answered my own question… 

 

The CSS Goes in the configure branding and look….

 

The HTML goes in the widget….

 

If you put the CSS in the Widget it will show in the widget… 

 

I want to put in a second slider… .

 

Do I need to give it another name? 

 

 

6 replies

Bfarkas
Rank
Userlevel 7
Badge +3

So yeah, looking at that post, if you are doing two sliders on the same page, you would need to have different id’s for each, you can only have one id on a page technically. If you are putting it on multiple pages, you can be fine as is.

sfrost
Rank
Userlevel 4
Badge +2 
/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/
#doc-page-96
@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

This is the CSS I have (thank you @gtstanger) do I need to assign it to a page? .. Okay do I need to assign it to a page… 

#doc-page-96 < DO I NEED TO ADD THIS>

 

sfrost
Rank
Userlevel 4
Badge +2 
<div id="bannerSlider">
	<figure class="slider">
<figure>
<a href="https://www.eventlink.com/1/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 In-Person Event.png" alt=“Flyer for the Event” />
</figure>
<figure>
<a href="https://www.eventlink.com/2/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.55 event work hour.png" alt=“Flyer for the workshop.” />
</figure>
<figure>
<a href="https://www.eventlink.com/3/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.45 PML event.png" alt=““Flyer for the Event />
</figure>
<figure>
<a href="https://www.eventlink.com/3/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 PML Mid-year Event.png" alt=“Flyer for the Event” />
</figure>
</figure>
</div>

^ This is a version of the HTML (I modified the link and alt txt and links…), I’m posting in the widget… The Images aren’t showing… and only the <a href remain after I press save and edit again. In the viewer this section is showing up blank… I added the text “Slider should show here” and saved it so I could catch the screenshot

 

 

 

I imagine it’s something wrong with my html code… :( 

 

Any ideas? 

Bfarkas
Rank
Userlevel 7
Badge +3 
/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/
#doc-page-96
@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

This is the CSS I have (thank you @gtstanger) do I need to assign it to a page? .. Okay do I need to assign it to a page… 

#doc-page-96 < DO I NEED TO ADD THIS>

 

You only need to add the page specific tags if you are making changes to the core info that would vary page to page, and we generally do that when we can’t control the elements fully, you can in this case so probably not needed. In your case based on the post after this, the id of your carousel is <div id="bannerSlider">

So if you wanted two on the same page, that ID should be updated to something else. If you are putting one on multiple pages, you don’t need to touch it unless you want the style to be different on each page.

As for the pictures, the links you have in the URL are 404 for me, so I’d assume they are not right. If it was a rights issue it would be a different code. Make sure you can get just to the link as first troubleshooting step, i.e. just try to navigate to https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 PML Mid-year Event.png

For me, it is a 404.

sfrost
Rank
Userlevel 4
Badge +2

Okay I got some of them to show with an alteration to the HTML …. but the clickable links aren’t working… :(

 

 

Bfarkas
Rank
Userlevel 7
Badge +3

Can’t help/advise without seeing...

Reply


Terms & ConditionsCookie settings