Table of Contents

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

Raise

A fresh, functional, versatile, and mobile-friendly theme built on Bootstrap 4. Use it for your organization’s flagship website, a single-page microsite, and everything in between. (See a demo.)

Features

  • Built to work with many of Bootstrap 4’s native components & utilities
  • Fully responsive, and designed to look and work great on devices of all sizes
  • Create an engaging homepage with full-width, modular homepage sections and featured content sliders
  • Action forms included in sidebars for petition pages, endorsement pages, signup pages, and more
  • Fixed navigation menu that stays with you as you scroll
  • More intuitive UI design for nearby event search, user generated events, suggestion box pages, and more
  • New profile card design for directory pages, leaderboard pages, public profiles, and more
  • New expanding & collapsing accordion design for FAQ pages

General Guidelines

Supporter nav

  • To view the supporter nav, a user must be logged in. When they are logged in, clicking the profile icon in the top right corner of the nav menu will display the supporter nav.
  • Any page with the “Include in supporter nav” option checked will show up as a button in the supporter nav.
  • The user’s profile image, social capital score, and point person will also display in the supporter nav, as well as links to their public profile (if enabled), account settings page, and a link to log out
  • Note that the three site buttons found under Supporter nav > Buttons are not used in this theme.

Page sidebars

  • When the sidebar is turned on for these page types, the form will appear in the sidebar, otherwise the form appears below the main body of content: Petition, Signup, Endorsement, Volunteer Signup, and Event. Page sidebars are only available for these page types.
  • Turning the page sidebar on or off for other page types will not change the layout.

Homepage background image

  • The background image for the first section of the homepage pulls the image uploaded to “Site settings > Background image”
  • Recommended minimum width for this image is 1440px wide
  • Recommended height will vary, as the height of the first section of your homepage will depend on the content added to it.
  • Note an overlay will automatically be added to your image to help ensure any overlay text is legible.

Header image for other pages

  • The background image for the header section of other pages on your site pulls the image uploaded to “Site settings > Header image”
  • Recommended dimensions for this image are 1440px wide by 250px tall
  • Note an overlay will automatically be added to your image to help ensure any overlay text is legible.

Blog post & event card background image

  • Add a custom background image to blog post and event cards by uploading an image with the name “thumbnail” to the Files tab for that blog post or event page. Note that it can be either a .jpg or .png file.
  • Recommended image dimensions ate 700px wide by 920px tall
  • If no thumbnail image is uploaded the page thumbnail image uploaded under the “Settings > Social media” tab will be used instead. Note that this is also the image that will appear in the page preview when shared on Facebook & Twitter

Featured content sliders

  • The recommended image dimensions for featured content sliders are 1440px wide by 500px tall.
  • Note that on different screen sizes your image may be “cropped” due to the responsive nature of the theme, so we recommend against using images that contain text as part of the image itself. You can add overlay text using the “Headline / Action text” field.
  • Anything after the “|” character in the “Headline / Action text” field will be used as button text
  • If you set the “Page to feature” field to point to the same page that the featured content slider is on, that slide will not be clickable. If it points to another page it will be clickable.
  • If a page tagged with “homepage” has a featured content slider, that slider will appear as a full-width section on the homepage above the section with the content for that page. If that page has no content but is still tagged with “homepage”, then the slider will appear on it’s own on the homepage.

Homepage tags

Tag your homepage with any of these tags to enable/disable the described feature:

  • site: disable sticky nav turns off the sticky nav feature (nav will remain fixed at the top of the page)
  • site: hide like page hides the social sharing options at the bottom of some pages (site-wide)

Other page tags

Tag any page with any of these tags to enable/disable the described feature:

  • homepage adds the tagged page as a modular section on the homepage.
  • nav button Will turn top nav link into a button and move it to the far right. Note “include in top nav” must still be checked.
  • hide like page hides the social sharing options at the bottom of the page
  • sitemap adds a sitemap to the page. Works on basic pages only

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?