Changing header color

Maxfield

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?

R_J

That css rule will work:

 .Header {
  background-color:#a38dfd;
}

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
\* -------------------------------------------------------------- */

$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. https://github.com/vanilla/vanilla/blob/master/themes/keystone/src/scss/base/_variables.scss