Skip to main content

Hi, all. I’m currently working on an unpublished duplicate page of our homepage. I have added a html/WYSIWYG widget to the page that has simple text and some custom CSS that I’ve added to the appropriate custom style area in our Docebo instance. I searched the page’s code via inspect elements and found the proper id to use as a selector in the CSS, and the new widget appears correctly on the page.

However….

The widget seems to be appearing twice -- almost like it’s stacked on top of one another.

This is what’s rendered on the page
This is the custom CSS code
html selectors for one of the widget occurrences (I used “#doc-widget-57” as the selector for CSS purposes
html selectors for the second widget occurrence

 

If anyone has any ideas as to what’s going on here and how I can eliminate the second widget, I’d be grateful.

 

Emily

Can you share that portion of the HTML as well?

 

This looks like the console view.

Do you have the view from the widget itself?

This screenshot is better…..the gray line is where the widget code begins. The purple is the widget that I added.

 

Oh, sorry….of course. Here it is:

 

 

The overlap is due to the fact that you have two divs with an ID of doc-widget-57

 

Even though I only added one in the html WYSIWYG widget?

Correct -

Simply creating the blank widget - Docebo auto named that one.

You basically added the second one in the HTML itself.

Your CSS styles the div yellow so the auto-named div is colored as is the one you added.

Try removing your div.

The auto created one should still be colored.

 

Thanks, Greg! That certainly got rid of the second widget. Now I’m trying to figure out how to identify the white portion so I can have it be yellow also.

 

If you need the div - in order to achieve your desired styling - try just removing the ID.

 


This is the html and the css that’s still producing the widget with the white text portion. I wouldn’t think I’d have to specify the background-color within the h1 and p portions….

Now I’m trying to figure out how to identify the white portion so I can have it be yellow also.

 

I added the last bit before I saw your result pop up.

Yeah - I would style it to add background.

Either in your custom area with the rest or as an inline style

<p style="background: #f7d636"> Short on time?…

Many, many thanks, Greg!

Reply


Terms & ConditionsCookie settings