Table of Contents

  • Choosing a Public Theme
  • Website Navigation
  • Feature an excerpt of a page on your homepage
  • Additional tips for selected public themes
  • Action Theme
  • Aware Theme
  • CityZen Theme
  • Collective Theme
  • Headliner Theme
  • Presence Theme
  • Publish Theme
  • Verve Theme
  • Victory Again Theme

Choosing a stock theme

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

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:

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.

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

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 page tag "homepage" to any page under [Your Page] > Settings > Page Settings.

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 stock themes

Stock 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.

Action

Welcome to Action theme by cStreet. The Action theme is a theme designed for organizations that want a simple and clean website focused on taking action. All of the NationBuilder features you’re used to are built into the theme but some of them are being used in new and interesting ways, so please read through this documentation to learn more about them. (See a demo.)

Features:

  • Header image: The NationBuilder header image is editable in your site settings. It is used to trigger a splash image when your homepage loads for the first time in a given user's browser session. The text overlay is the site subheadline and is also editable in your site settings. When a user scrolls or clicks the down arrow they will be taken to the homepage and will not be able to return to the splash unless they reload the page.
  • Background image: The background image is editable in your site settings. It will add a background to your featured content slider. For faster loading, the background image does not appear in mobile.
  • Top Navigation: There are two new features in the top navigation. First, when you have a donation page set as your default donation page and that page is added to the top navigation, it will display as a button in the top right corner of the page.  To display the "Sign In" button you need to have "Show public profiles" enabled in your site settings. 
  • Image thumbnails: Blog posts, suggestions, and events will have background and thumbnail images where they’re displayed on the site. To add these simply upload an image under the page social media settings.
  • Squeeze pages: To activate a squeeze page layout (hiding the top navigation bar and footer), add the tag “squeeze page.”
  • Image sizes: The images in this theme are responsive, meaning the same photo will have different dimensions in desktop or mobile. As a result, refrain from putting text on top of photos, and make sure your subject is roughly in the center of your image.

General Guidelines:

  • When your users are logged in, they will see their profile photo in the top right hand corner of the screen. Clicking on this will drop down your supporter nav. If folks are logged in and admins, they will be able to access page edit and control panel links in here as well.
  • In mobile, the featured content image will be square. In desktop it will be a maximum of 750 x 414px. If you have no headline on your featured content slider, the image will be 1140 x 414px.
  • For post thumbnails, a good rule of thumb is to upload an image that is 1200 x 630px. This is the optimal size for Facebook, and remember this will also be the default image when you share on Facebook.
  • Action does not make use of a sidebar, so the "Show sidebar" checkbox in a page's Settings tab can be left in the default "checked" state and ignored. Similarly, the theme does not make use of either the "_columns_1.html" or "_columns_2.html" theme templates.
  • Tablet-and-desktop.scss styles are located at the bottom of the theme.scss file and are not in their own separate file. 

Aware

Aware is a responsive theme with a flat, versatile look. (See a demo.)

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 1026px 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. (See a demo.)

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. (See a demo.)

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. (See a demo.)

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.
  • The recommended header image size 1024x204px (1024px wide image, with a height 204px).
  • 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. (See a demo.)

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. (See a demo.)

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. (See a demo.)

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. (See a demo.)

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.

Related HOWTOs

How to create and edit web pages
How to create a custom website theme

 

Did this answer your question?