Produce a site theme with NationBuilder

Dining dining dining Table of articles

  • Create a theme that is new
  • The theme template page
  • Sync your themes with Dropbox
  • Theme vs. page level modifying
  • The stylesheet
  • How the web themes work together
  • Uploading pictures, jQuery or other assets
  • Image sl >You can personalize any part of your site and possess access to all or any the objects and variables which make NationBuilder therefore effective. NationBuilder runs HTML because of the liquid language that is template and stretches CSS with SASS. All which means is you need to use regular HTML and CSS, however you also get some good cool plugins, factors, and logic both in. To produce a customized site theme, register to your nation’s control interface and click Websites > Theme. This can show thumbnails of all of the themes that are public. You may want to browse all free general public themes in the theme gallery.

Pressing a thumbnail immediately changes the way your internet site appears. Additionally reveals theme that is several variants so that you could pick from that provide various colors combinations, fonts and so on.

To modify your site beyond these alternatives, you will need to produce a custom theme. If you would like focus on one thing already a little polished, choose your favorite theme that is public. That which you choose will serve given that starting place for the new theme that is custom. Click New theme that is custom.

Offer your theme a title and then leave Clone your theme that is current and web web site to the new web site fruitful link instantly chosen. Click generate theme.

If you’re a designer or designer acquainted with the Bootstrap framework, choose “Start with Bootstrap framework” to start with a stripped down theme which utilizes Bootstrap 4.3. Please relate to the bootstrap that is official as you look your brand-new theme. We strongly recommend you utilize our Dropbox integration to modify your theme files.

The theme templates web web page

If the theme is completed cloning, you will definitely secure from the templates web page of the brand new custom theme:

Some files that are important note are:

  • theme.scss may be the mobile stylesheet that is first controls the general appearance of your site.
  • design.html wraps every web page and includes your header and footer.
  • _content.html wraps the main content area of a typical page and prov >Listed below these files are templates for each and every style of page it is possible to produce in NationBuilder. Tips to comprehend about these templates are:

  • Modifications designed to a template here will alter every web web page of this kind across your site. As an example, modifying pages_show_blog_post.html will change all websites pages. Should you want to change a template for a certain web page just, click internet site, choose the page you intend to modify, then click Template.
  • Templates ending in _w >Connecting Dropbox to your country enables you to modify and sync website theme files and custom web page templates entirely on your personal computer, making use of your favorite text editor.

Require more assistance? Find out more by watching the movie below or reading our in-depth paperwork.

Theme vs. page level modifying

Theme degree modifying: There’s two degrees of modifying your theme – theme degree modifying and web page degree modifying. Theme degree defines editing entire web page kinds across your whole web site. Any template modified in the themes template page accessed from Website > Theme is theme level modifying.

Example: in the event that you want all Petition pages in your internet site to check a specific means, edit the file pages_show_petition.html.

Page level modifying: web Page degree modifying is whenever you merely want to style one particular page. Choose the web page you wish to modify from internet site after which Template. Changing the template will override the theme level template and just influence these pages. The Files web web page which exists under every page is where you can easily upload pictures or assets employed for that page just.

Instance: You now have a Petition page using the name “Jobs Bill” you intend to design differently than many other petition pages. Click Edit next to the “Jobs Bill” web page and then click Template to change the HTML and fluid.

The stylesheet

Exactly why is the stylesheet file expansion .scss?

the reason why the stylesheet file expansion comes to an end in .scss (as opposed to .css) is really because NationBuilder makes use of the SCSS syntax of Sass. Sass is really an extension that is css3 utilizes mixins, factors and easy logic that allows you to definitely do a little amazing things you usually can not do with normal CSS. As you can write CSS like you usually have without the issues, learning the basic principles of Sass can help. Browse tutorials and paperwork right here for more information.

Two of the very most effective top features of Sass are factors and mixins. Let us just take a fast check just just how both work:

Sass factors start with a buck indication and so are followed closely by a value. Factors permit you to effortlessly produce the exact same properties throughout your stylesheet.

Mixins are perhaps one of the most powerful Sass features. They enable re-use of styles – properties and even selectors – and never have to duplicate and paste them or go them into a class that is non-semantic.

As an example, let’s say you desire circular corners for a back ground element. In place of typing out of the border-radius home for all of the different browsers, you are able to simply utilize the border-radius mixin like so:

Now let us have a look at theme.scss. You start the file by clicking the filename theme.scss:

In theme.scss above, we come across along with palette, headline and the body fonts are defined by factors. This implies you simply have to figure these values out as soon as, after which it is possible to reuse the exact same colors and fonts again and again in your stylesheet.

Keep in mind that theme.scss is just a mobile first stylesheet. What this means is most of the designs are mobile phones are packed very first, and designs for desktop or tablet users are loaded a short while later in table-and-desktop.scss.

The way that is easiest to control the way in which elements look on the site is always to bypass these standard styles or creating new styles when needed. Making use of Inspect aspect in Chrome and Safari or Firebug in Firefox could be the way that is easiest to expose which styles are managing different areas for an offered web web page.

For instance, let’s imagine you wish to replace the colour for the nav and header area for action. First, right click on that part of the page and click Inspect Element. This may expose the course or name that is id characteristics.

You can view Inspect Element revealed the div course, and on the best you can observe that .navbar-header has to be modified in theme.scss.

Next, available theme.scss and just look for the class .navbar-header and edit the backdrop home.

Now click Save and publish. Which is it — the back ground is really a color that is new. Apply this exact same way of what you like to alter on the web site.

How the templates that are website together

Let us have a look that is quick just exactly how the web templates work by clicking on design.html.

Design.html is exactly what wraps every page and includes your footer and header. Inside you will discover:

  • << content_for_header >> loads a chunk that is critical of required for your NationBuilder web site to function precisely. For instance, it automatically loads jQuery and relevant meta information. Never ever eliminate this.
  • includes the _nav.html file, containing all of the rule for the top nav. You shall find your _nav.html file in your theme template page if you want to modify it.
  • _columns_2.html wraps the main content area of a typical page if the sidebar is switched on. Inside you’ll find:

  • << content_for_notifications >> displays notification that is various, such as for example whenever a questionnaire is effectively submitted.
  • lots the template for the variety of web web web page being packed. For instance, in cases where a calendar web web page has been packed, the _pages_show_calendar.html template will be packed right here.
  • checks to see in the event that user loading the web web web page is logged in. If they’re, it loads _supporter_nav.html when you look at the s >What is shown when you look at the sidebar modifications whenever a person is finalized in vs. finalized out

If you’d like to alter what exactly is within the sidebar an individual is finalized away, edit _sidebar.html. Should you want to alter what exactly is in this certain area an individual is finalized in, edit _supporter_nav.html. As a whole _sidebar.html frequently includes a message subscribe kind, social media marketing widgets and methods for the users to check in, whereas _supporter_nav.html includes the sidenav that is configurable through the control board.

Uploading images, jQuery or other assets

When your country is attached to Dropbox, pictures and assets utilized for your general theme are uploaded simply by dragging and dropping them to your Dropbox theme folder. Pictures or assets applied to just one web page should be uploaded straight towards the data area when it comes to page within the control interface. Find out about the NationBuilder Dropbox integration.

All images or assets used for your overall theme should be uploaded to Website > Theme > Files if you’re not using Dropbox.