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.

The homepage excerpts are sorted by the most recently published full versions of these pages first. To change their order you can simply modify the published dates of the pages corresponding to these excerpts via the Settings → Page Settings section in the control panel.


Additional tips for selected public themes

Public themes have recommended image sizes that are unique to that theme, so please follow the guidelines below for content sliders, header image, and background photo to ensure everything looks and works as well as it can.

Aware

Aware is a responsive theme with a flat, versatile look. 

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 200px wide by 100px high.
  • 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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.
  • 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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.
  • 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. 

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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger. 
  • 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. 

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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.
  • 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. 

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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.

Publish

Publish is a vibrant and playful theme ideally suited for nonprofits, bloggers and digital magazines. 

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 used, it should be 1366px wide by 768px high or larger.
  • When 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.

Verve

Verve is a clean and professional theme, designed to deliver your message with a clear voice.

Verve

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 supporter nav brings the focus to your content
  • Customizable icons
  • Include page excerpts on homepage
  • Staged donations
  • Image attachment previews for blog posts and suggestions

General Guidelines:

  • The dimensions of the images you upload to your Featured Content Sliders is recommended to be around 1170×700px. Make sure all your images are exactly the same dimensions.
  • Your supporter nav links will be displayed on the homepage next to a signup form, in order to inspire action.
  • Text for Featured Content Slides can have titles; in the Headline/Action text input field for a Featured Content Slide, use a vertical bar character to denote the title: Title Here | Body text here.
  • 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 Verve 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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.
  • Developers can override icons by first cloning Verve, 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.
  • The dropdown subnav is designed to fit one single line of subpage items. This is achieved by keeping total number of subpages to a minimum, and reducing their titles down to one or two words for optimal design aesthetics. There are alternative themes that can accommodate for several subpages and longer titles if this is a concern.

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.
  • If a site background image is used, it should be 1366px wide by 768px high or larger.
  • 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


Showing 9 reactions

Wrap code snippets in <code></code> tags.
Please check your e-mail for a link to activate your account.

Not finding what you're looking for? Browse the Website FAQs