Free CSS: Themed header, titlebar and breadcrumb bar

  • 17 August 2022
  • 9 replies
  • 539 views

Userlevel 7
Badge +5

before and after (I have a few other tweaks in there too)

 

/***************header and titlebar ***************************/



/* fancy header bar*/
header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-header.png) repeat-x center;
background-size: contain;
background-color: transparent;
}

/* fancy breadcrumb bar*/
doc-layout-breadcrumbs div.breadcrumbs {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding.png) repeat-x center;
background-size: contain;
}

doc-layout-breadcrumbs div.breadcrumbs div.hierarchical-breadcrumbs ul li{
visibility: hidden;} /* hide breadcrumb text*/
doc-layout-breadcrumbs div.breadcrumbs div.navigation-history a {
color: black;} /* black navigation-back text*/


/* fancy page title bar */
doc-layout-title-bar div#page-title__wrapper {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-titlebar.png) repeat-x center;
background-size: contain;
box-shadow: none;
}
course-edit div.course-edit_header {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-titlebar.png) repeat-x center;
background-size: contain;
box-shadow: none;
}/*course edit*/

.overview-course-header__wrapper {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-titlebar.png) repeat-x center top !important;
}
.learning-plan-lp .lp-progress__wrapper{
background-color: transparent;
}/*learning plan and course overview*/

.doc-layout-main, .tabs-content {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-docbg.png) repeat left top !important;
}/*main page bg*/

div.doc-layout-page-content div.overview-tabs-wrapper.bg-white {
background-color: transparent;
}/* transparent tabs bar below titlebar */
div.doc-layout-page-content div.overview-tabs-wrapper.bg-white header{
box-shadow: none !important;
}/* remove tabs box shadow*/

@media screen and (max-width: 650px) {
header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header, doc-layout-breadcrumbs div.breadcrumbs, doc-layout-title-bar div#page-title__wrapper {
background-size: cover !important;
}
}/*cover instead of x-repeat bg image on mobile*/

 


9 replies

Userlevel 7
Badge +5
/********************recolors***********************/

/*gold gamification icon*/
.internal-header-gamification ui-button-icon button ui-icon span.color-neutral svg {fill: #FFD700;}
/*blue robot icon*/
.internal-header-virtual-coach ui-button-icon button ui-icon span.color-neutral svg {fill: #133D8D;}
/*compactify "my home page" bar*/
div#page-title__wrapper {
padding-top: 2px !important;
padding-bottom: 2px !important;
min-height: 50px !important;
}

/*compactify homepage widgets */
.single-widget.ng-star-inserted {
margin-bottom: 10px;
}/* make all UI boxes closer together vertically*/


/********************avatar image***********************/

/*default profile image - not working yet
.avatar__initials.bg-main.text-grey-superlight.ng-star-inserted
.avatar-clip.border-main.ng-star-inserted
myprofile-widget div.avatar-container {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/default-profile-image.png) no-repeat !important;
height: 100px;
background-size: contain;
width: 100px;
background-position: top;
margin: 0 auto;
}*/

/*move avatar image up and left*/
myprofile-widget div.wrapper.wrapper-shadow.ng-star-inserted div.cover div.profile {
padding-top: 10px !important;
padding-left: 10px !important;
}
/*resize profile widget avatar image*/
myprofile-widget .profile .avatar-container avatar .avatar-clip .avatar__image {
height: 100px !important;
width: 100px !important;
}
/*move profile widget realname and email to the right*/
myprofile-widget .profile .details-container {padding-left: 110px !important;}

/* disable overflow on my profile text */
myprofile-widget myprofile-additional-field.additional-field div.root div.label {
overflow: hidden;
width: 100%;
}
/*expand my profile widget */
myprofile-widget div.additional-fields-container {
padding-top: 8px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}

/* compactify my profile buttons*/
myprofile-widget widget-action-button div.root.action a.mdl-button.mdl-js-button.text-main {
height: 24px;
line-height: 24px;
}

 

Userlevel 7
Badge +5

I accidentally put this in Ideas, but it would definitely be cool if this were implemented so I’ll leave it there!

@lrodman Question for you: I’m simply looking to modify the color of the breadcrumbs bar and the color of the circle around the ‘home’ icon on a single page. Any suggestions? 

Userlevel 7
Badge +5

@lrodman Question for you: I’m simply looking to modify the color of the breadcrumbs bar and the color of the circle around the ‘home’ icon on a single page. Any suggestions? 

On a single page meaning not other http urls I presume?

you’d edit doc-layout-breadcrumbs div.breadcrumbs { background-color and the circle, but do them within the page(s) you want

Here’s some examples of a different edit:

#doc-page-86 div.pages-widget-page, #doc-page-96 div.pages-widget-page {
    padding-top: 0px !important;
}
so you’d want

#doc-page-XX div.breadcrumbs { background-color: red; } 

whatever the page and color are

Thanks for the response! Unfortunately I tried that command already and it appears that the Doc-page reference only refers to content that exists below the page title and first fold.

While you can do the .breadcrumbs command globally, you can’t alter it on a specific page without altering it on another (page 147 and page 68 as an example) can not be different. 

 

Userlevel 7
Badge +7

@lrodman do you happen to have some CSS to change the banner colour on the Sign-in page? We used the code for the header once you are in and it works great but need the same for the login page...thanks in advance!

Userlevel 7
Badge +7

@gstager any ideas about my post above? trying to change the colour of the header on the sign-in page….Thx

Userlevel 7
Badge +5

@lrnlab - have you tried something along these lines?

I am picturing the header banner on the page where you log in…?

 

/** Begin color change Login banner **/

#doc-layout-external-header > div {
background-color: black;
}

/** End color change Login banner **/

 

Userlevel 7
Badge +7

@gstager you are the best...that did it!!

Reply