Skip to main content

Ok! you guys are just great at helping I am a jack of all master of none. I do everything from ID, to graphics, to LMS, to video editing, so CSS HTML is a jack not expert trade for me.

I am trying to design a new page. I really liked the hover on the map kind of example Docebo put out on the guides, but I couldn’t get it to work without a white background and scrollbar.
I moved to the custom flipcard and added those *somewhat* successfully. I don’t love the background color, etc.
I am down to just trying to create a HTML widget that takes you to a course because I do not have Coaching or Assets. (It is also not my favorite, I would rather have just a list of downloadable files)
 

If I could JUST get rid of that padding on the image, I could be satisfied but not happy with what I’ve done so far.

Here is my CSS and my HTML for the Handy Tools/Course link widget (I gave up on the hover effect on this one):

 

//HandT_image

 

#HandT_image {width: 100%; opacity: 1.0; background: rgb(95, 200, 139, 0.1); 

justify-content: center; background-size: cover; height:100%; width:100%; padding: 0px; 

background-position: 50% 50%;

}

 

#HandTHover_image:hover {opacity: 0.5;}

 

<div id="HandT_image"><a href="https://www.peaklearn.org/learn/course/46/handy-tools-for-your-trip?generated_by=13034&hash=6ff5a6c8c83e762d7f3d0a8d62a0d76fde90d1ec"><img src="https://cdn5.dcbstatic.com/files/p/b/pbhtraining_docebosaas_com/userfiles/13034/handy_tools.png" alt=“Box of Tools” /></a>

 

Does the image for “handy tools” have a transparent background? You could set the background of the HTML widget to transparent and it would only display the image (assuming the image itself has a transparent background). 

  #doc-widget-2527 .htmlwidget.wrapper-shadow {
    background-color: transparent !important;
    box-shadow: none !important;

  }

You would need to replace the widget ID with the one that contains your html box. You could do this by right clicking the box and clicking inspect to locate the appropriate ID.

*Edit*

Instructions to locate widget ID:

  1. you want to right click the white part
  2. Click Inspect
  3. Within the inspect tool you’ll want to look for the next element above that contains a doc-id “#doc-widget-xxxx”
  4. Replace #doc-widget-2527 with #doc-widget-xxxx

Hmmm, i double checked to make sure that my image was transparent and used this code and got this:

 

CSS:

#HandT_image .htmlwidget.wrapper-shadow {

    background-color: transparent !important;

    box-shadow: none !important;

  }

 

HTML:

<div id="HandT_image"><a href="https://www.peaklearn.org/learn/course/46/handy-tools-for-your-trip?generated_by=13034&amp;hash=6ff5a6c8c83e762d7f3d0a8d62a0d76fde90d1ec"><img src="https://cdn5.dcbstatic.com/files/p/b/pbhtraining_docebosaas_com/userfiles/13034/handy_tools.png" alt="“Box" /></a></div>

 

Yeah I think I see why. You’ve used a custom tag that you created within your html. We’re targeting the parent container that rests inside of. 

Let me see if I can find some time to create a quick video later this afternoon of how you would implement this css. 

Basically

  1. you want to right click the white part
  2. Click Inspect
  3. Within the inspect tool you’ll want to look for the next element above that contains a doc-id “#doc-widget-xxxx”
  4. Replace #doc-widget-2527 with #doc-widget-xxxx

 

 

Great explination! And I did it. All except for a pesky white bar. What is that??

 

 It is only there at full size. Its on the one in the bottom right corner too.

Whew glad that sufficed! I have a full afternoon. 

Hmm that pesky box. That’s not a scroll bar is it? Do you have a pixel height in the widget settings? If so try removing that and see what happens. 

Now I’m embarrassed I didn’t wait to reply. I fixed it with some margin specifications in HTML.

Now I’m embarrassed I didn’t wait to reply. I fixed it with some margin specifications in HTML.

No worries! That’s great to hear you got it work! Drop a screenshot on us and show us how it all paid off!

My new page for those that have completed required courses.

I’m pretty proud! The top three go to catalogs that have those branded courses. The Handy Tools is a course that has Quick Reference Guides and Embedded Videos. The rotating GIF goes to a channel that has those course advertised. Since I didn’t want to pay for Comslider, I will just manually change out the images and courses on that channel. Activity stream (I want to make this shorter eventually.) and Home Base takes you to all your current courses. I wanted this at the bottom of a longer widget so it was positioned at the bottom of my page, but I’ll probably tackle that another day.

That’s awesome!

Reply


Terms & ConditionsCookie settings