Skip to main content
All CollectionsWebsiteStock themes
CityZen theme guidelines
CityZen theme guidelines
Updated over 6 months ago

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 that 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

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

  • To split the default single address field into separate fields, use the instructions provided this article.

Did this answer your question?