The :has() pseudo-class (a.k.a. the parent selector)

For those trying to follow this and re-use it, it can be quite hard to find the page number you are looking for. If you are using the developer tools (F12) to find it this is how to locate it (please let me know if there is an easier way)

On the page where you want to hide the title bar, press F12 to open the Developer tools
Click on the Elements tab
Open up the Body string
open up the next 3 div string
look for the Doc Layout string
open the next div string
open up the main id string
open up the Div id=”doc-layout_page_content” string
Look for the string that reads: ng-component _xyzBlahBlahBlah is=”doc-page-16” ← This is your page reference you need for your CSS.

You then add this in to your CSS:

/*Hide title bar on homepage*/

doc-layout-title-bar:has(+ div #doc-page-16) {

    display:none;

}

(please make sure its the relevant page number on your Docebo LMS, page 16 is the one on my sandbox I’m using to give you this example.

I hope this helps!

I am going to show my age - but it was so nice when pseudo-classes became part of the excepted css standards and not browser specific anymore. Ok - I have been doing this too long….🙄 

There is an easier way to get the page number, ​@TaiSaxty: it’s part of the page URL.

https://example.com/pages/123/slug

Built-in pages are an exception. You can still get their IDs from the URL when you try to edit them via Manage Pages:

https://example.com/pages/page-management/settings/12;panel=1

But the problem is that their HTML is a bit different. For example, in my sandbox at least, Page 12 is “My Team”, but you’d need to use mng-my-team in place of #doc-page-12:

doc-layout-title-bar:has(+ div mng-my-team) {
    display: none;
}

That said, I’m not sure it makes sense to hide the title bar for the built-in pages.

Thanks ​@Ian 

I was showing a colleague yesterday when I noticed it in the url. My brain was obviously not braining. This said we do have customers that really do not want it so we’re trying to hide all banners that do t have new buttons embedded into them.

do you know what’s the correct one for the myActivities page?

No problem, ​@TaiSaxty! I should, by the way, have given you credit for the instructions on the browser dev tools, because that is the approach one needs in general when trying to figure out exceptions like this, just inspecting the page structure.

It turns out that My Activities is, for some weird reason, using an iframe. You can isolate it using an attribute selector:

doc-layout-title-bar:has(+ div iframe[src="lms/index.php?r=myActivities/index"]) {
  display: none;
}

Hope this helps!

No worries and thank you ​@Ian im putting together a collection of CSS used over the years so as a team we can refer back to it for further customers etc, and as I don’t come from a world using CSS, im trying to learn what I can on the go. Thank you for finding me the tag for this. I’ll give it a go on Monday! 

The above worked like a charm, thanks ​@Ian