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 Children
  • If some are being overriden, you can see why by looking at where the specific css directive is being applied.  Most browser dev tools list the css hierarchy.  It sounds like your css is not using a specific enough selector

  • 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:

    This documentation is meant to supplement the general guidelines in How do I customize my community in an upgrade-safe way? Verint Community provides many ways to customize the look and behavior of your…
    Last edited in Verint Community 11.x > User Documentation

    Scripted customizations often output HTML content. When rendering CSS to help with the layout and styling of that content, Verint Community provides support for LESS, a processed extension to CSS. [toc…
    Last edited in Verint Community 11.x > Developer Training

    Theme palettes allow themes to expose sets of configuration options to theme managers to make groups of configuration easier. The theme, widgets, and other scripted customizations can expose options to…
    Last edited in Verint Community 11.x > Developer Training