Custom themes
Download the customs theme video (Quicktime: 128mb, 23:47)
Creating 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. We've found this to be faster and easier way to get started.
- Leaving "Switch site to your new theme immediately" checked means that changes you make after clicking the publish button on stylesheets or HTML templates will show up on your live website. If you uncheck this, you will need to come back to the Theme area later and select your theme.
- Say goodbye to the stress of accidentally making a mistake on your website as you make changes. With NationBuilder, you can preview any changes you make to your HTML without publishing to your live website by clicking "Save Draft" and then clicking the preview button. Click publish once everything looks perfect.
- The Chrome and Safari browsers have a featured called Inspect Element which could be helpful as you build your custom theme. When there's an area of your page where you'd like to view the HTML and CSS, just right click and choose Inspect Element. The HTML and CSS in the area of the page where you clicked will be revealed. You can even see how adjustments to your HTML and CSS will change the way your page looks. This feature is enabled by default in Chrome, but must be turned on in Safari by going to Preferences > Advanced, then checking Show Develop menu in menu bar.
- Refer often to our detailed Theme Documentation, which spans everything from the basics to a full object reference guide so you can unleash the full potential of NationBuilder.
SASS and the Liquid Template language
- NationBuilder extends HTML with the Liquid template language, and extends CSS with SASS. All that means is you can use regular HTML and CSS, but you also get some cool plugins, variables, and logic in both. Have you noticed how easy it is to change the color scheme of the Revolution theme? That all happens with SASS and a couple of color variables.
- We provide detailed theming documentation and an object reference guide in the right column of the custom theme control panel. You'll be amazed at all the things you can do.
- Looking for the full stylesheet of a theme you cloned? Click on Overriding theme styles under the right hand column theme documentation on your custom theme page. Reference the styles here and override them in the theme.scss file to modify or create your own theme.
Page level configuration
- You can configure if a page should be the homepage, or whether it should show comments, show the sidebar or an activity stream within the page settings area when editing a specific page.
- When you modify the HTML template of a page type in the custom theme area, the change will be reflected on all pages of that page type. If you wish to change a specific webpage only, go to that page in the control panel and click on the template button.
Awesome fonts
- Because NationBuilder uses TypeKit, you can easily use several high quality professional fonts we've chosen on your website. Check the theme documentation to see what fonts are available and how you can use them.
Was this helpful?
Showing 2 reactions
Jesse Haff commented
2011-12-01 10:28:06 -0800
I don’t see any custom themes in your nation Heidi. I’ll email you in just a minute to help you get a banner up.
Heidi Thiess commented
2011-12-01 10:09:18 -0800
I created a custom theme using a custom banner, it displayed properly for a few days then all of a sudden it is showing incorrect. I don’t know what the problem seems to be.
