Brainstorm: What are the most common items you need to modify with CSS that you wish was easier?

@Bfarkas I am trying to customize the Login page, specifically the header and can’t seem to figure out how to adjust the color and/or logo on the Login page. Currently it is not matching the changes I made to the rest of the pages with CSS. 
Thanks for doing this! 

whoops, hit the wrong button! I guess i’ve never asked a question before… thanks @Daniel , that is a perfect type of thing. Appreciate you taking a look, added to the list. 

Thanks, I have a couple simple login page items on the list.  

Hi @Bfarkas I’ve done that before - go to hit the like button and hit the best answer one instead! Erin should be able to remove the best answer for you if you ask her. For something like this where there isn’t a single best answer, you can always post it as a conversation to remove the best answer option.

Yeah, that’s what I usually do, oh well…points for you!! :)

Hide password as above

Blankslate-image reskins

I also get rid of box shadow and make most page widgets transparent, so they match the background better, but that’s a personal choice.

Thanks, password is on the list, I’m thinking about geenral widget border and background choices, insert a color or choose transparent, that could cover that scenario right?

For the image blank slate….not sure I follow it, do you mean the various images around the system that show when the widget is empty? I’ll have to think about that one but is interesting for sure.

Thanks!

Yes, the empty ones. Some are images and some are svgs, but they all appear to follow one of the two following formats:

ce-learningplan-tab blankslate div.blank-slate-image img{
	visibility: hidden;
}
ce-learningplan-tab blankslate div.blank-slate-image
{
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-courses.png) no-repeat center;
    background-size: contain;
	position: relative;
}/*reskin learning plan tab blankslate*/




/*no notifications in enrollments*/
enrl-notifications-association-table.data-browser-table div.ui-blank-slate ui-illustration.ui-illustration {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-users.png) no-repeat center;
    background-size: contain;
	position: relative;
}
enrl-simple-assign-resources-rightpanel-body.data-browser-table div.ui-blank-slate ui-illustration.ui-illustration svg {    	visibility: hidden; !important}

I’ve collected maybe… 80% of them? Happy to share.

ce-learningplan-tab blankslate div.blank-slate-image img{
	visibility: hidden;
}
ce-learningplan-tab blankslate div.blank-slate-image
{
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-courses.png) no-repeat center;
    background-size: contain;
	position: relative;
}/*reskin learning plan tab blankslate*/




/*no notifications in enrollments*/
enrl-notifications-association-table.data-browser-table div.ui-blank-slate ui-illustration.ui-illustration {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-users.png) no-repeat center;
    background-size: contain;
	position: relative;
}
enrl-simple-assign-resources-rightpanel-body.data-browser-table div.ui-blank-slate ui-illustration.ui-illustration svg {    	visibility: hidden; !important}

Thanks, so you’re generally just hiding them? I guess that was why I had to think about it, I was thinking you meant replace them with something else and that would lead to hosting questions potentially and the goal is aimed at simplicity for this, I could see a hide or replace with text line though. I like it, adding to the potential list, thanks!!

I hide the image and replace with one I host, yeah.

Could be hosted on Docebo potentially.

Could be, just more advanced. trying to keep it dirt simple wizard, check box, enter color value, enter size values, etc. 

A common tweak we make is to hide the control bar from catalogue widgets. This is the bar that contains the search box and filters, which we often need to hide to either de-clutter the page or prevent users from un-filtering pre-filtered pages.  

#doc-widget-[unique id] .ui-data-browser-controls-bar{
    display: none!important;
}

We also make other modifications to the course and LP tiles in catalogues, but those might be a bit too fiddly for this project?

Alan

Thanks @Alan  - I’ve been debating like a “common widgets tweaks” area with things like your control bar example, adding this to the list for sure.

What kinds of mods for those pages are you thinking? On surface I’d say probably too fiddly, plus might wait for the upcoming course changes for any course adds.

Getting ready to start in the main development of this, this week is last call for inputs :)

Hi @Bfarkas 

So the modifications we make to the catalogue tiles are in custom widget pages. Here are some more examples of the elements we hide in order to make a cleaner tile.  These use Doc Widget IDs, but it’s also possible to target the page ID to affect the changes on all catalogue widgets on the page. 

/* Hides 'new' status on course tiles */
.ui-badge-status-wrapper{
   display: none!important;
}

/* Hides enrollment status */ 
#doc-widget-156 .item-status-box{
    display: none!important;
}

/* Hides Course type */ 
#doc-widget-156 .type-box{
    display: none!important;
}

/* Hides language */ 
#doc-widget-156 .course-type{
    display: none!important;
}

/* Hides tile footers */ 
#doc-widget-168 .ui-card-catalog-content .ui-card .ui-card-footer{
   display: none!important;
}

This is an example of the results:

Hope these are of some use!

Alan

Thanks @Alan !

We were hiding the breadcrumps as we didn’t want our learners to see the “My Courses and Learning Plans” page there. It turned out that this unfortunately leads to problems when e.g. SCORM files are displayed in fullscreen mode, because then the "Back" button is no longer displayed.
We are still waiting for the problem to be fixed and until then this CSS line remains disabled.

/*Hide Breadcrumbs
.hierarchical-breadcrumbs
{
    display: none !important;
}*/

Also we are hiding many descriptions, for example catalog and page title descriptions:

/*Catalog: Hide description*/
.course-catalog-content-wrapper .ui-carousel-description
{
    display: none;
}

/*Hide page title description*/
.page-title .line-limiter-wrap
{
    display: none !important;
}

/*Hide Breadcrumbs
.hierarchical-breadcrumbs
{
    display: none !important;
}*/

Thanks, this is definitely going on the list. I’m curious has anyone investigated if there’s a way to exclude the scorm full page viewer from it? Will take a look. 

/*Catalog: Hide description*/
.course-catalog-content-wrapper .ui-carousel-description
{
    display: none;
}

/*Hide page title description*/
.page-title .line-limiter-wrap
{
    display: none !important;
}

Interesting one, I am putting on my “to ponder” lost. Thanks!

We are not interested in Docebo’s course ID, we would love to hide from users on mobile too if we could (where it is extra prominent). We use course code.

I also use longer titles on cards. I still need to hide the ellipsis. There’s a div.uitooltipellipsisdirection that is not it. I have yet to find it.

ui-card-formal-content ui-card .ui-card-title a.ui-typography-heading-5 {
    height:90px;
}/*longer title space on cards*/

/* Test - hide password change option */ 
.my-profile__body .accordion-wrapper .accordion-item:nth-of-type(2) {display: none !important;}
.forgot-password.ng-star-inserted {
display: none !important
}

Hey @Daniel fyi, just added this in, and thought I’d mention, for hiding the password on the profile page, you can replace your first part with just:

#vertical-tab-changePassword {
	display: none;
}

It’s much cleaner, not reliant on the tab order, and no need for the important tag.

Same for the forgot password link on login page, can just do this:

.forgot-password {
	display: none;
}
.login-button {
	padding-bottom: 32px;
}

I had to add the extra padding due to some other things, but important and ng-star-inserted are not needed.

In case you want to simplify things a bit.

/*Hide Breadcrumbs
.hierarchical-breadcrumbs
{
    display: none !important;
}*/

Hey @Lena I just added this, but went a different route so the back button would remain, thought you might be interested:

.hierarchical-breadcrumbs nav {
    display: none;
}

also doesn’t require the important tag this way.