Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Changing header color

MaxfieldMaxfield New
edited March 2019 in Vanilla 2.0 - 2.8

I want to change the blue header color. I made a custom CSS in theme/design/ and tried to add this background-color:#a38dfd;  to te .navbar.default .navbar-brand . I tried on the body too. No success!

I can't even find the color in syle.css . Where is this blue color from? How can I change it to match my site?


  • Options
    R_JR_J Ex-Fanboy Munich Admin

    That css rule will work:

     .Header {

    The keystone theme is based on the theme boilerplate and that is highly configurable. Instead of changing the Keystone theme, I would recommend to start from theme boilerplate. That has a file src/scss/base/variables.scss where you can find the following section:

    /* -------------------------------------------------------------- *\
    \* -------------------------------------------------------------- */
    $header_minHeight:                      48px !default;
    $header_bg:                             $global-color_primary !default;
    $header_fg:                             $global-color_white !default;
    $header-link_color:                     $global-color_white !default;
    $header-link-hover_color:               $global-color_white !default;
    $header_border:                         0 !default;
    $header_boxShadow:                      none !default;
    $headerButton_bg:                       transparent !default;
    $headerButton_fg:                       $header-link_color !default;
    $headerButton_borderColor:              $header-link_color !default;
    $headerButton-hover_bg:                 mix($header-link_color, $header_bg, 12%) !default;
    $headerButton-hover_fg:                 $header-link_color !default;
    $headerButton-hover_borderColor:        $header-link_color !default;
    $headerMebutton_bg:                     transparent !default;
    $headerMebutton_fg:                     $header-link_color !default;
    $headerMebutton-hover_fg:               $header-link_color !default;
    $headerMebutton-hover_bg:               mix($global-color_fg, $header_bg, 26%) !default;
    $headerMebutton-active_bg:              mix($headerMebutton_fg, $header_bg, 12%) !default;
    $headerMeBoxAlert_bg:                   $global-color_secondary !default;

    To see how the Keystone theme "evolved" from the boilerplate, you can take a look at the source files on GitHub where you can find the uncompiled scss files, e.g.

Sign In or Register to comment.