Custom CSS - Not Sticking...

Hi all. Over the next week or so I'll be working on customizing our brand new community, so brace yourselves for entirely too many questions. But hey, that's what communities are for!

I've spent the past few hours trying to figure out what I'm missing when it comes to overriding standard styles with custom styles, and I'm baffled. I've had a few lines of code stick in my CSS file and many that just won't.

My current struggle: Trying to override the header-fragments.

I'm trying to change this...

.header-fragments #header-28 .navigation-list[data-direction='horizontal'] a.subnav-open,
	.header-fragments #header-28 .navigation-list[data-direction='horizontal'] a:hover {
		border-radius: 0;
		background-color: #263238;
		color: #FFFFFF !important;
	}

... to this.

.header-fragments #header-28 .navigation-list[data-direction='horizontal'] a.subnav-open,
	.header-fragments #header-28 .navigation-list[data-direction='horizontal'] a:hover {
		border-radius: 0;
		background-color: #F26521;
		color: #FFFFFF !important;
}

It's exactly the same except I'm changing from a dark gray to a bright orange (company standard). It's in my custom CSS file since modifying the standards is ill advised, but the site just keeps going back to the defaults.

What am I doing wrong?

Thanks!

Parents Reply
  • CSS rules are applied not just in file-inclusion order but also by specificity. 

    The CSS that you are attempting to override uses a rule that is defined in a file that would be included after your custom CSS (file inclusion order issue). To override a specific value, you can add !important after the updated value to bypass some of the CSS overriding logic. Note that CSS overriding logic is part of CSS and not something that Community can change/adjust.

    A few additional notes for this specific issue:

    • This CSS rule is generated by the widget rendering the associated markup (identified by the #header-[NUMBER] ID in the CSS rule). The portion of the rule containing #header-[NUMBER] will change as the page is edited and will cause overrides applied using CSS to no longer target the updated widget.
    • In this case, the widget supports custom palettes which are easier to maintain through upgrades and avoid the widget-specific targeting issues. Although !important will likely help you work through this immediate issue, it may be better to adjust the palette values in the theme instead of writing custom CSS.

    I recommend reviewing a few documentation and developer topics as well as you start customizing your community:

Children
No Data