Locating ID to change background colour of rows in CSS

Hi ​@sk8coach 
I have just been working on this myself, can you provide a screen shot of what you are trying to achieve so that I can help you.
If its the same as what Docebo has done and I have done then you will need to use a HTML/WYSIWYG widget, but I should have some CSS  and HTML that can help

Thanks ​@TaiSaxty I am looking to reproduce what Docebo has done in the attached. Any assistance you can provide would be greatly appreciated.

Hi ​@sk8coach 
Apologies I’ve had a period of leave and then some busy projects on the go.

For this page you want to replicate you will need to set up your page with full width rows.
HTML/WYSIWYG
Catalog
HTML/WYSIWYG
Catalog

inside your HTML you will have something like the following:
(all the below will just be for the widgets highlighted in bold above)
 

<div class="custom-block-full-width blue-block">
<h2 class="PHX-h2 PHX-generic-light">Get started</h2>
<p class="body-p">YOUR TEXT HERE</p>
    
  <div class="PHX-h3 catalog-callout-header PHX-generic-light">Check out the courses:
</div>
</div>

<!-- split for next block-->
<!-- catalog widget goes here→


In the above you have the following 6 elements:
custom-block-full-width
blue-block
PHX-h2
PHX-generic-light
body-p
PHX-h3
catalog-callout-header

You then need to build these elements in your CSS (change the styles and colors as you see fit):
 

.custom-block-full-width{
  max-width: 1248px;
  margin-top: 60px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
}

.blue-block{
  background-color: #002B80;
  color: white;
}

.PHX-h2{
  font-family: Inter, nunito, !important;
  font-size: 48px !important;
  line-height: 56px !important;
  letter-spacing: -2% !important;
  margin: 0px !important;
  font-weight: 400 !important;
}

.PHX-generic-light{
  color: #ECE9E1 !important;
}

.PHX-h3{
  font-family: Inter, nunito,;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 40px !important;
}

.catalog-callout-header{
  margin-top: 36px;
}

.body-p{
  font-size: 16px !important;
  line-height: 24px !important;
}

Now you need to made edits to your widgets on your page (change the page numbers and widget numbers for your page’s)

 

/*sets appearance of Essentials catalog*/
#doc-page-123 #doc-widget-123 {
  background-color: #002B80;
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 24px 24px 24px;
    border-radius: 16px;
    margin-top: -130px;
    z-index: 0;
}


/* Set Essentials catalog widget title to white */
#doc-page-123 #doc-widget-123 .common-widget-title {
    color: white !important;
}

/* Set Essentials catalog total count text to white */
#doc-page-123 #doc-widget-123 .course-catalog-total-count {
    color: white !important;
}

/* HIDE Essentials CATALOG SEARCH BAR */
#doc-page-123 #doc-widget-123 .ui-data-browser-controls-bar {
    display:none !important;
}


/*sets Essentials description to higher z-index so that it pops out from behind Essentials catalog - replace with your HTML widget #*/
#doc-page-123 #doc-widget-122 {
  z-index: 5;
}

Once you are happy with the outcome, create the elements you need for the next widgets moving down the page.

Let me know how you get on!

Hi ​@sk8coach I have actually replied to this but because it had html and CSS in my response, it came up saying its waiting for Docebo to check my reply before it will post it.

​@Adam Ballhaussen I don’t suppose you could look into where my response has got to can you?

Many thanks

Tai

Hey ​@TaiSaxty, love the new avatar pic! Just letting you know, Adam is no longer at Docebo so if you need any support related to the community, I’m your gal 🙂

Apologies for the delay, your previous post has now been cleared. Thanks for this reply as I’m sure it will be very helpful!