Has anyone created CSS to add an image to a course catalog page? I have not been able to figure it out.
Thanks!
Custom CSS For Course Catalog Page
Userlevel 2
Userlevel 6
+2
Yes, I have. This code adds a picture to each “carousel” of course tiles belonging to a particular catalog, and it outlines the catalogs in a light gray color. In this example, the background image is the color-coded “key” in the upper right corner of each “carousel”:
.ui-carousel {
border: 1px solid lightgray;
padding: 20px 20px 0px 20px;
margin: 10px 0px 0px 10px;
border-radius: 25px;
background-image: url("YOUR PICTURE's URL HERE");
background-repeat: no-repeat;
background-size: 300px 15px;
background-position: 94% 1%;
}Result:
Userlevel 7
+3
This is very nice
Userlevel 2
I want to replace the title of catalog and description with the following image. Does the code you provide do that?
Userlevel 7
+3
No, his does not do that, just to clarify you are trying to essentially add a background image to the top area of the page as a whole, not on the widgets themselves?
Userlevel 3
No, his does not do that, just to clarify you are trying to essentially add a background image to the top area of the page as a whole, not on the widgets themselves?
Yes, spot on. Do we know if you can remove or alter it with CSS?
Userlevel 3
Yes, I have. This code adds a picture to each “carousel” of course tiles belonging to a particular catalog, and it outlines the catalogs in a light gray color. In this example, the background image is the color-coded “key” in the upper right corner of each “carousel”:
.ui-carousel {
border: 1px solid lightgray;
padding: 20px 20px 0px 20px;
margin: 10px 0px 0px 10px;
border-radius: 25px;
background-image: url("YOUR PICTURE's URL HERE");
background-repeat: no-repeat;
background-size: 300px 15px;
background-position: 94% 1%;
}Result:
I think she is wanting to have an image display as the header catalog at the top of the page. Though what you have here is very cool. Thank you for sharing.
I want to add icon image to the Laboratory Water catalog like we have for Chemistry, Environment etc.- Pls help urgently
Userlevel 7
+5
I am not sure there is any CSS customization in Docebo being done here but rather placing that icon with the rest of the image was probably done using another tool and then including that image with the others on the page.
If I am mistaken - could you perhaps clarify further?
Userlevel 7
+3
I am not sure there is any CSS customization in Docebo being done here but rather placing that icon with the rest of the image was probably done using another tool and then including that image with the others on the page.
If I am mistaken - could you perhaps clarify further?
Agree, this looks like they are bringing in the coming soon image somehow but the others just look like a regular background image for a custom widget box. I am curious how they are identifying the ones to add the coming soon too, wonder if it is as simple as children selectors?
IThanks for the fast response, I am not sure if other tools were used, I want this image to be on the background like the others-
The repository where the icon images are kept is also not working so we are not able to upload-
material-science-icon{
left: 87%;
background-image: url("https://cdn2.dcbstatic.com/files/l/e/learnatm_docebosaas_com/userfiles/13139/Icons/material_science.png")
Does this help?
https://community.docebo.com/product-tips-tricks-3/engaging-home-page-layouts-2099
Reply
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
or
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.