Develop a internet site theme with NationBuilder

Dining dining Table of articles

  • Produce a brand new theme
  • The theme template page
  • Sync your themes with Dropbox
  • Theme vs. page level modifying
  • The stylesheet
  • How the templates that are website together
  • Uploading pictures, jQuery or other assets
  • Image sl >You can modify any part of your internet site while having access to all or any the objects and factors that produce NationBuilder therefore effective. NationBuilder runs HTML with all the liquid language that is template and runs CSS with SASS. All which means is you can make use of regular HTML and CSS, you additionally acquire some cool plugins, factors, and logic both in. To produce a customized site theme, register to your country’s control board and click Websites > Theme. This can show thumbnails of all of the themes that are public. You could browse all free general public themes in the theme gallery.

Pressing a thumbnail immediately changes the real way your internet site appears. It reveals a few theme style variations for you yourself to pick from that offer various colors combinations, fonts and so forth.

To personalize your site beyond these alternatives, you ought to produce a custom theme. Should you want to focus on something currently a little polished, choose your favorite general public theme. That which you choose will serve while the kick off point for the brand new theme that is custom. Click New theme that is custom.

Offer your theme a title and then leave Clone your present theme and Switch web site to your brand-new web web site instantly chosen. Simply Click generate theme.

If you’re a developer or designer acquainted with the Bootstrap framework, choose “Start with Bootstrap framework” in the first place a stripped down theme which makes use of Bootstrap 4.3. Please make reference to the formal Bootstrap paperwork as you look your brand-new theme. We recommend you utilize our Dropbox integration to modify your theme files.

The theme templates web web page

As soon as the theme is completed cloning, you may secure regarding the templates web page of one’s brand new theme that is custom

Some crucial files to note are:

  • theme.scss may be the mobile first stylesheet which controls the entire appearance of your internet site.
  • Layout.html wraps every web page and includes your footer and header.
  • _content.html wraps the main content area of a typical page and prov >Listed below these files are templates for each form of web web page you are able to produce in NationBuilder. Key points to comprehend about these templates are:

  • Changes designed to a template here will change every web web page of the kind across your site. For instance, changing pages_show_blog_post.html will alter all websites pages. Then click Template if you wish to modify a template for a specific page only, click Website, select the page you wish to edit.
  • 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 viewing the movie below or reading our in-depth documents.

Theme vs. page level editing

Theme degree modifying: There are two main quantities of modifying your theme – theme degree modifying and page degree modifying. Theme degree describes editing entire page kinds across your complete web site. Any template modified from the themes template page accessed from Website > Theme is theme level modifying.

Example: in the wix event that you want all Petition pages on the web site to look a specific means, edit the file pages_show_petition.html.

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

Instance: You actually have a Petition web web page aided by the name “Jobs Bill” you want to design differently than many other petition pages. Click Edit beside the “Jobs Bill” web web page and then click Template to alter the HTML and fluid.

The stylesheet

Exactly why is the stylesheet file expansion .scss?

the main reason the stylesheet file expansion concludes in .scss (as opposed to .css) is mainly because NationBuilder makes use of the SCSS syntax of Sass. Sass is really an extension that is css3 utilizes mixins, factors and easy logic makes it possible for you to definitely do a little amazing things you usually can not do with normal CSS. Whilst you can write CSS like you also have without having any dilemmas, learning the basic principles of Sass can help. Browse tutorials and documents right right here to find out more.

Two of the most extremely effective popular features of Sass are factors and mixins. Why don’t we have a fast have a look at just just how both work:

Sass factors start out with a buck indication and they are accompanied by a value. Factors permit you to effortlessly create the exact same properties throughout your stylesheet.

Mixins are the most effective Sass features. They enable re-use of styles – properties and even selectors – and never having to duplicate and paste them or go them in to a non-semantic course.

As an example, let’s imagine you desire circular corners on a history element. In the place of typing out of the property that is border-radius all the various browsers, you are able to simply make use of the border-radius mixin like therefore:

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

In theme.scss above, we see the color palette, body and headline fonts are defined by factors. This implies you merely need certainly to figure away these values when, then it is simple to reuse the exact same colors and fonts again and again in your stylesheet.

Observe that theme.scss is a mobile very first stylesheet. What this means is all of the designs are mobile phones are packed very very first, and designs for tablet or desktop users are packed a while later in table-and-desktop.scss.

The way that is easiest to control the way in which elements look in your internet site would be to bypass these standard designs or producing brand brand new designs whenever necessary. Making use of Inspect take into account Chrome and Safari or Firebug in Firefox could be the way that is easiest to expose which designs are managing different areas for a provided web web page.

For instance, suppose you need to replace the color of this header and nav area for action. First, right click on that section of the page and then click Inspect Element. This may expose the course or id name and characteristics.

You can observe Inspect Element revealed the div course, as well as on the proper you can observe that .navbar-header needs to be modified in theme.scss.

Next, available theme.scss and just seek out the class .navbar-header and edit the back ground home.

Now click Save and publish. That is it — the back ground is just a brand new color. Apply this exact same method of whatever you would you like to alter on your own web web site.

How the web templates work together

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

Design.html is really what wraps every web page and includes your header and footer. Inside you’ll find:

  • << content_for_header >> loads a crucial amount of rule needed for your NationBuilder web site to work precisely. For instance, it automatically loads jQuery and meta that is relevant. 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 full page once the sidebar is fired up. Inside you will discover:

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

If you’d like to change what exactly is into 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 often includes a contact subscribe type, social networking widgets and methods for the users to check in, whereas _supporter_nav.html includes the sidenav that is configurable through the control board.

Uploading pictures, jQuery or other assets

In case your nation is attached to Dropbox, images and assets utilized for your theme that is overall can uploaded simply by dragging and dropping them into the Dropbox theme folder. Pictures or assets applied to just one web web web page should be uploaded straight towards the data area when it comes to web web page within the control interface. Find out about the NationBuilder Dropbox integration.

If you should be perhaps not utilizing Dropbox, all images or assets utilized for your general theme must certanly be uploaded to Website > Theme > data.

Leave a Reply