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
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.To split the default single address field into separate fields, use the instructions provided this article.