Loading

NationBuilder public theme guidelines

Your nation comes pre-loaded with a selection of beautiful public themes. You can choose from any of these as you start building your website, and easily change the look and feel with the click of a button. In addition to being able to switch your website's look, you can also use public themes as you create your own custom theme.

Table of Contents

Choosing a Public Theme

The overall design of your website is determined by which theme you choose. Browse our public themes, theme styles and descriptions in the theme gallery. You can select a theme in your control panel by clicking Websites > {Name of Your Site} > Theme. This gives you the option to choose from our public themes. Once you choose a theme, you can then select a style to determine the color palette of your site.

website_themes.jpg

Global settings for your entire website are handled from Websites > {Name of Your Site} > Site settings. This includes the name of the site, who the primary broadcaster for your site is, and settings that can be turned off across the entire site. Many of these settings can also be toggled on individual pages within your site - whatever choice you make here will over-ride what is in your page settings. Unchecking "show parent in nav dropdown" is a particularly popular option.  

Top navigation dropdown with and without parent included:

Parent_not_in_top_nav.pngParent_in_top_nav.png


Top navigation & supporter navigation

Pages that should be easily accessible to all visitors of your site, like your blog and calendar of events, should be included in the top nav, the horizontal navigation that appears at the top of all pages in your website.

Pages that are only useful if a person is logged in are included in the supporter nav, a vertical bar on the left or right side of your website. When a person isn’t logged into your website, the supporter nav disappears and can be replaced by buttons that encourage them to engage with your site.

Go to the top nav tab to see the order of pages displaying in the top navigation of your site. You can click on an item and drag and drop it to a new location to change the order of items in your top nav.

Nav_pages.png

The supporter nav area allows you to define the text of up to three buttons to display when a visitor to your website is not signed in. The reorder links section allows you to order the items in the supporter nav with the same drag and drop functionality as the top nav.

Featured content sliders on your home page provide an additional way to navigate your site. 


Feature an excerpt of a page on your homepage

Click to enlarge

Many times you want to feature the latest blog post and the most recent upcoming event under the main content on your homepage. Or perhaps you want to display a petition or contact form. This is easy to do in NationBuilder.

If you are using a current public theme and are using a "basic" page type for your homepage, you can easily add a homepage widget by adding the tag homepage to any page.

To remove an excerpt from the homepage, simply remove the tag homepage from the page.


Additional tips for selected public themes

Follow the guidelines below to ensure everything looks and works as good as it can.

Aware

Aware is a responsive theme with a flat, versatile look. Please note this is a version 2 theme. Custom page level templates from version 1 themes are not compatible with it.

aware-responsive.png

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of screen (iPhone/iPad/Desktop ready). If you are creating a new theme, we strongly recommend you clone Aware to serve as the base of your theme.
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • include page excerpts on homepage

General Guidelines:

  • To prevent distortion, site logos should be 100px high by 200px wide.
  • The images you upload to your Featured Content Sliders should be 960px wide and a height of 250px is suggested. Make sure all your images are exactly the same dimensions.
  • The top navigation will change to an off canvas nav when viewing Aware on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • Developers can override icons by first cloning Aware, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.

CityZen

CityZen is an innovative NationBuilder theme that includes a modern and clean visual language, four color variations, and many features previously not seen in themes, including a slide-out sidebar which allows more space for your content.

Collective

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready).
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • include page excerpts on homepage
  • Staged donations
  • Slide-out supporter navigation sidebar

General Guidelines:

  • As the logo may occasionally overlap the header image, we suggest preparing it in a transparent PNG format
  • The Featured Content Sliders in this theme use bold and big headline text. For this reason, we recommend keeping headlines for each slide as brief as possible (about 8 to 15 words).
  • The images you upload for the Featured Content Sliders should be at least 1080px in width, with an aspect ratio of about 3:1. For example, an image that is 1080px wide should be 360px in height. It is important that all images used in Featured Content Sliders have the same dimensions.
  • The top navigation will change to an off canvas nav when viewing CityZen on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • You can override icons by first cloning CityZen, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.
  • If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
  • To enhance the readability of text-heavy pages, such as petition, press release, feedback, endorsement, blog post, moneybomb, and rules pages, the page width is automatically narrowed to optimize for the ideal number of characters per line.
  • If their sidebars are disabled, blog and FAQ pages will arrange blog posts and FAQ pages, respectively, in a tiled format.
  • Navigation bar sizing, blog/FAQ page tiling, and other dynamic features are driven by the collective.js script in the Files tab of your theme.

Collective

Collective is a responsive theme with a clean and modern metro design. Please note this is a version 2 theme. Custom page level templates from version 1 themes are not compatible with it.

Collective

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready).
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • include page excerpts on homepage
  • Staged donations
  • Widget that links to the public bios of recent supporters of your nation

General Guidelines:

  • Since the logo overlaps the navigation bar background, it should be prepared in a transparent PNG format.
  • The images you upload to your Featured Content Sliders and headers are suggested to be at least 1024px wide, with an aspect ratio of around 3:1 (for a 1024px wide image, the height should be around 340px). Make sure all your images are the same dimensions.
  • The top navigation will change to an off canvas nav when viewing Collective on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • You can override icons by first cloning Collective, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.
  • If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
  • To enhance the readability of text-heavy pages, such as petition, press release, feedback, endorsement, blog post, moneybomb, and rules pages, the page width is automatically narrowed to optimize for the ideal number of characters per line.
  • If their sidebars are disabled, blog and FAQ pages will arrange blog posts and QA pages, respectively, in a tiled format.
  • Navigation bar sizing, blog/FAQ page tiling, and other dynamic features are driven by the collective.js script in the Files tab of your theme.

Headliner

Headliner is a fresh, bold theme designed to organize a captive audience. As a responsive theme, it works seamlessly across devices. Please note this is a version 2 theme, and custom page level templates from version 1 themes are not compatible with it.

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready)
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Off canvas sidebar to maximize content area
  • Featured Content Sliders that span the entire width and height of your window to better showcase your featured images
  • The calendar homepage widget is scrollable if more than five events are displayed
  • Customizable icons
  • Include page excerpts on homepage
  • Staged donations
  • Widget that links to the public bios of recent supporters of your nation

General Guidelines:

  • Since the logo overlaps the navigation bar background, it should be prepared in a transparent PNG format.
  • Since Featured Content Sliders span the browser area, slider images are suggested to be at least 1024px wide, with an aspect ratio of around 16:9 (for a 1024px wide image, the height should be around 576px).
  • The top navigation will change to an off canvas nav when viewing Headliner on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • You can override icons by first cloning Headliner, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.
  • If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
  • Blog pages will arrange blog posts in a tiled format, with an image attachment of each post set as its respective tile's background image.
  • The content background will become transparent when a site background image is used.
  • Navigation links will align left if the nav bar spans multiple rows.
  • Navigation link alignment, login form overlay display, sidebar/supporter nav display and positioning, calendar homepage widget container behavior, and other dynamic features are driven by the headliner.js script in the Files tab of your theme.

Presence

Presence is an elegant and minimal responsive theme, with an emphasis on content and readability in mind. Please note this is a version 2 theme. Custom page level templates from version 1 themes are not compatible with it.

Presence

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of screen (iPhone/iPad/Desktop ready).
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • Include page excerpts on homepage
  • Staged donations

General Guidelines:

  • Since the logo overlaps the header background and Featured Content Slider, it should be prepared in a transparent PNG format.
  • The images you upload to your Featured Content Sliders and headers are suggested to be at least 1024px wide, with an aspect ratio of around 3:1 (for a 1024px wide image, the height should be around 340px). Make sure all your images are the same dimensions.
  • The top navigation will change to an off canvas nav when viewing Presence on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • Developers can override icons by first cloning Presence, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.
  • In the control panel, within the homepage content editor, changing the text format to Heading 1 will enable a statement-of-purpose style paragraph with large type.
  • If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
  • To enhance the readability of text on blog pages, the page width is automatically narrowed to optimize for the ideal number of characters per line.

Publish

Publish is a vibrant and playful theme ideally suited for nonprofits, bloggers and digital magazines. Please note this is a version 2 theme. Custom page level templates from version 1 themes are not compatible with it.

Publish

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready).
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • Include page excerpts on homepage
  • Staged donations

General Guidelines:

  • If a site header image is set, it will appear above the nav bar and stretch the width of the window. The width of the header image is recommended to be at least 1024px wide, with an aspect ratio of around 8:1 (for a 1024px wide image, the height should be around 128px).
  • If a both a site header image and a site sub-headline is set, the site sub-headline will be displayed over the site header image.
  • The mobile and wide (no-sidebar) page views apply a background color to the content container.
  • If a site background image is applied, the content background becomes translucent.
  • The dimensions of the images you upload to your Featured Content Sliders is recommended to be at 1026×455px.
  • Meta images added to blog posts will show up as thumbnails on the blog page. Meta images can be uploaded via the control panel under Settings → Social Media.
  • The top navigation will change to an off canvas nav when viewing Publish on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • Developers can override icons by first cloning Publish, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.

Victory Again

Victory Again is a beautiful modern theme that's perfectly suited for political organizations.

Publish

Features:

  • Responsive theme: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready).
  • Inline sign in flow
  • Off canvas nav when viewing the theme on a mobile device
  • Customizable icons
  • Include page excerpts on homepage
  • Staged donations
  • Widget that links to the public bios of recent supporters of your nation

General Guidelines:

  • The dimensions of the images you upload to your Featured Content Sliders is recommended to be at 1026×460px. Make sure all your images are exactly the same dimensions.
  • If you have a volunteer, donation, and/or signup page, your homepage will automatically bring the links to these pages into the forefront
  • If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
  • The top navigation will change to an off canvas nav when viewing Victory Again on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
  • Developers can override icons by first cloning Victory Again, and then editing the _icons.scss file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.

BusyBiz

This theme has been retired.

BusyBiz is a clean professional design ideal for businesses.

tectonica-busybiz_demo.png

Features:

  • Custom Slider
  • Sidebar Connect widget

General Guidelines:

  • To prevent your site logo from being stretched or distorted, the ideal dimensions are 205px wide and 130px high. Upload your site logo by clicking Websites > Theme > Settings > Logo. If you don't have an application to resize images, you can use free online tools such as picresize.com or cropp.me.
  • The images you upload to your Featured Content Sliders should be 490px wide and 439px high. Make sure all your images are exactly the same dimensions.
  • If you upload a background image, it will be resized to fit the users full screen. It should be no smaller than 1024px wide and 768px high to prevent the image from pixelating.
  • If you upload a header image, it should be 980px wide. Uploading a smaller image will cause it to be expanded to 980px.
  • In the BusyBiz theme, the text you enter in Websites > Settings > Footer will be used next to the homepage signup form.

Civitas

This theme has been retired.

Civitas is a bold and official looking theme, designed specifically for government websites.

civitas_copy.png

Features:

  • Custom Slider
  • Upcoming Event widget
  • Take Action widget
  • Sidebar Connect widget

General Guidelines:

  • To prevent your site logo from being stretched or distorted, your logo should not be bigger than 243px wide by 120px high. Ideal dimensions are 210px wide and 105px high. Upload your site logo by clicking Websites > Theme > Settings > Logo. If you don't have an application to resize images, you can use free online tools such as picresize.com or cropp.me.
  • The images you upload to your Featured Content Sliders should be 490px wide and 295px high. Make sure all your images are exactly the same dimensions. 
  • If you upload a background image, it will be resized to fit the users full screen. It should be no smaller than 1024px wide and 768px high to prevent the image from pixelating.
  • If you upload a semi-transparent background image, you'll need to remove the default image. In theme.scss, remove background-image:url($site_bg);, which will be found in the body selector towards the top.
  • If you upload a header image, it should be 980px wide. Uploading a smaller image will cause it to be expanded to 980px.
  • If you use a "Basic" page type for your homepage, it will automatically populate with snippets from your latest blog posts, a calendar of events widget, and large call to action buttons (if they exist). Whatever you enter into the Content editor for this page will display at the top of the page.
  • Add large call to action buttons and link them to action oriented pages on your website by clicking Websites > Supporter nav.
  • In the Civitas theme, the text you enter in Websites > Site Settings > Subheadline will be displayed prominently across the top of your website, just under your top nav. Use this to prominently display a couple sentences of text, such as a quote. This will display if you do not have a slider on your homepage.

Victory

This theme has been retired.

Victory is a beautiful modern website theme perfect for political campaigns.

victory_theme_new.png

Features:

  • Custom Slider
  • Take Action widget
  • Sidebar Connect widget
  • Sidebar Pulse widget

General Guidelines:

  • To prevent your site logo from being stretched or distorted, the dimensions should be 202px wide and 88px high. Upload your site logo by clicking Websites > Theme > Settings > Logo. If you don't have an application to resize images, you can use free online tools such as picresize.com or cropp.me
  • The images you upload to your Featured Content Sliders should be 960px wide. The height can be whatever you want, although 330px looks great. Make sure all your images are exactly the same dimensions. Action text is not displayed on sliders in this theme.
  • The "Participate" call out box will automatically populate with prominent buttons linking to your signup, volunteer and donation pages if they exist. Please note, in order for your volunteer, signup, and donation pages to display they must be set up as your primary pages under your defaults. Go to Websites > Defaults to make the edits. You can add additional call out buttons by clicking Pages > Supporter nav. Buttons you add here will show up in the sidebar on the right.
  • Blog content displayed on the homepage will have HTML stripped out of the content. 

Conserve

This theme has been retired.

Conserve is a fun and colorful theme that comes with custom illustrations for each season. 

Conserve theme

Features:

  • Custom Slider
  • Custom illustrations for spring, summer, winter and autumn
  • Sidebar Connect widget

General Guidelines:

  • To prevent your site logo from being distorted, the dimensions should be 174px wide and 114px high. Upload your site logo by clicking Websites > Theme > Settings > Logo. If you don't have an application to resize images, you can use free online tools such as picresize.com or cropp.me.
  • To avoid your images from being distorted, the images that you upload for your Featured Content Sliders should be 920px wide. It can be any height, but we recommend it to be 360px.
  • If you upload a header image, the recommended width should be 960px to avoid your image from being distorted. It can be any height, but it would look better in 160px.
  • You can customize the background image. It will be resized to fit the user's full screen so the dimensions should be no less than 1024px and 768px to avoid your image from appearing pixelated.
  • Text entered under Websites > Site settings > Subheadline will be centered and displayed prominently at the top of each page under the top nav elements.

IndiePro

This theme has been retired.

IndiePro is a bold theme with 4 very different style varations, perfect for entertainers, filmmakers, musicians and more.

IndiePro

Features:

  • Custom Slider
  • Custom homepage blog widget with images
  • Custom homepage event widget
  • Prominent Supporter Nav Buttons

General Guidelines:

  • Your homepage will automatically populate with the titles of your latest blog posts as long as the slug of your blog is "blog". The background image of each post block will use the first image you used in the blog post.
  • An event widget will automatically populate at the bottom of your homepage if you have a calendar page with events.
  • To prevent your site logo from being distorted, the dimensions should be 243px wide and 120px high. Upload your site logo by clicking Websites > Theme > Settings > Logo. If you don't have an application to resize images, you can use free online tools such as picresize.com or cropp.me.
  • Featured Content Slider images should be 930px wide to avoid distortion. It's important for all images included in a set of featured content sliders to be exactly the same height and width. We recommend 360px height, though any  height will work.
  • You can upload a header image. It should be 960px wide to avoid distortion.  It can be any height, but we recommend about 150px. The header will display beneath your nav, and under your Featured Content Slider (if there is one).
  • You can customize the background image. It will be resized to fit the user's full screen so the dimensions should be no less than 1024px and 768px to avoid pixelation.

Back to top


Related how to guides

Do you like this page?

Showing 9 reactions

Wrap code snippets in <code></code> tags.

  • commented 2014-02-20 15:36:37 -0800 · Flag
    Aaron, as Ian indicated, what you’re doing means that none of the credit card information passed through the donation page you’re creating will be encrypting and we would never recommend doing this. You’ve created an extreme security flaw for people donating to that organization. Only by using a donation page on a nation’s website can we ensure that the information is secure.
  • commented 2014-02-13 05:09:39 -0800 · Flag
    Hello Aaron —

    I should say that I’m no longer working at NationBuilder. I’m now freelancing as a certified NationBuilder Architect (designer).

    That said, embedding NationBuilder pages in other sites isn’t generally supported. You’re going to run into exactly the sorts of issues that you’re seeing.

    In your particular case, I might try editing the page-level template for that donation page so that it — itself — is responsively built. Right now it is not, which is what’s causing you the trouble.

    Note: That donation page will not be SSL encrypted, which will likely really hurt your conversion rate. (I know I wouldn’t donate on an insecure page.) Perhaps you should also consider coding that single page’s page-level template to match the overall style of your external site, and actually use the NationBuilder URL as the donation page (rather than embedding it in an iframe).
  • commented 2014-02-12 21:03:01 -0800 · Flag
    Hi Ian!

    Wanted to find out how to affect styles for mobile and tablets. page in question is here: http://wakethebeast.org/donate.html
    which is actually a frame for the NB page beneath. as you can see, we stripped the NB page of all style and header/footers so that the page is effectively white with text however we can’t get the same results in iOS and prolly Android – can you tell me where to look for the styles/header/footer codes so that we can yield the same results on mobile devices?

    Thanks!

    aaron
  • followed this page 2014-02-12 21:02:58 -0800
  • commented 2013-11-11 14:07:57 -0800 · Flag
    And I’m quite happy to help!
  • commented 2013-11-11 14:07:42 -0800 · Flag
    These are the comment variables that are currently available. http://nationbuilder.com/comment_variables
  • commented 2013-11-11 12:18:48 -0800 · Flag
    Appreciate the help! BTW, is there a way to configure these comments to show in reverse order (latest comments at the bottom like people are used to on most other sites)
  • commented 2013-11-11 12:16:31 -0800 · Flag
    Patrick — That’s a great question.

    When using our public themes, the best way to change color schemes is to select a new public theme. Each variation of the theme actually uses a separate stylesheet, so you’re actually making a wholesale change.

    With regard to your custom themes, the best thing to do would be to use SASS variables for your colors, fonts, etc., so that you can make a few changes in one places that are reflected throughout the stylesheet.
  • commented 2013-11-09 13:07:27 -0800 · Flag
    Once you have selected a theme with a particular color scheme (say I chose the “blue” Aware theme) and wanted to change over to green, what is the easiest way to do this?

    I am also asking in terms of how to setup my own themes so that it is easy to switch color schemes around… thanks…