How to customize on-Hover Color in .toolbar.global-menu

Administrators
1

I am currently customizing a new indico-instance. After this very helpful post i was able to change the color of the header and the Toolbar. Now i am stuck trying to change the Hover-Color of the links (Like Home, Create event, etc…). I tried something based on_main.scss:

 .toolbar.global-menu {
     background-color: #11799c !important;
     background: #11799c !important;
     border-color: #ffffff !important;
 
     > a {
            &:hover, &.open {
             background: #003ba8 !important;
             }
     }
}

This file is placed in $CUSTOMIZATION_DIR/css/header.css. As i said, the color of the Header and the Toolbar works fine, only the on-hover color doesn’t work. Is this something you can’t customize (In _main.scss it’s marked !important after all) or am i just doing something wrong? Any help would be very much appreciated!

Cheers

2

As of 2.2, there is no scss support in customizations anymore (since the tools to build client assets are not part of the production setup anymore). So you have to convert it to normal CSS:

.toolbar.global-menu {
  background-color: #11799c !important;
  background: #11799c !important;
  border-color: #ffffff !important;
}
.toolbar.global-menu > a:hover, .toolbar.global-menu > a.open {
  background: #003ba8 !important;
}

Tip: You can use either a local sass compiler or an online sass compiler to convert your SCSS to CSS. That way you can keep the (more human-friendly) SCSS as the “master” and generate the CSS Indico needs from it.

1 Like
3

Thank you! This works flawlessly. The Tip is also very handy.
Cheers