I have chosen a theme and a style, but how can I change the default colors?
NationBuilder makes it easy to change your theme's color palette.
The first step is to create a custom theme. While it's possible to create your custom theme from scratch, we recommend cloning an official theme and style variation that's closest to what you're going for, and then modify it to your liking. There more information on how to create a custom theme here. Once you've created your custom theme, you'll be ready to start making changes to the colors.
Go to Websites > Theme > theme.scss to open up your theme's style sheet. Once there you will see a list of theme colors. Each theme color corresponds to an element on the website.
In this example, theme_color_1 is the header background and button color. You can pick and try different colors to see what you like using online tools like ColorPicker or ComputerHope.
In the example above, I changed the theme_color_1 to #000000 (black), clicked "save & publish," and that changed the colors of my header background and buttons. You can make changes for all of the colors on your website in this way. Enjoy!
Note for V2 themes: Since responsive themes have two stylesheets, you'll need to update the colors in both theme.scss and tablet-and-desktop.scss for changes to take effect on both mobile and desktop sites.
Showing 46 reactions
Sign in with
Updating this particular HOWTO is on the books and hopefully will be completed soon!
To change individual elements, like the header, you’d want to inspect the actual element, figure out what class is related to it, and then change background-color in stylesheet for that class. Does that make sense? You can find a little more about how to do that here: http://nationbuilder.com/theme_documentation#the_stylesheet
header-container { background-color: <a class="tweet-url cashtag" href="https://twitter.com/#!/search?q=%24header" title="$header">$header</a>-color; background-image: <a class="tweet-url cashtag" href="https://twitter.com/#!/search?q=%24header" title="$header">$header</a>-texture; background-position: top left; color: <a class="tweet-url cashtag" href="https://twitter.com/#!/search?q=%24theme" title="$theme">$theme</a>-color-20; position:relative; .width-container { background-color: <a class="tweet-url cashtag" href="https://twitter.com/#!/search?q=%24theme" title="$theme">$theme</a>-color-3; background-image: url("header-background.jpg");you’ll want to comment out background-image like this:
/* background-image: $header-texture; */
This should get rid of the texture overriding the header color.
My Carolina Alumni Association
Certified Expert