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 a templates that are website together
• Uploading pictures, jQuery or other assets
• Image sl >You can modify any section of your internet site and also have access to any or all the objects and factors which make NationBuilder therefore effective. NationBuilder expands HTML because of the fluid template language, and expands CSS with SASS. All which means is you can make use of regular HTML and CSS, however you additionally get some good cool plugins, factors, and logic both in. To produce a customized theme that is website register to your country’s control interface and click Websites > Theme. This can show thumbnails of all of the themes that are public. You could browse all free themes that are public the theme gallery.

Pressing a thumbnail immediately changes the real way your site appears. In addition it reveals a few theme style variants to help you pick from that offer various colors combinations, fonts and so forth.

To modify your site beyond these alternatives, you ought to produce a custom theme. If you wish to begin with one thing currently a little polished, choose your favorite general public theme. That which you choose will serve whilst 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 theme that is current and web web web site to your brand-new web web site instantly selected. Simply Simply Click generate theme.

If you should be a developer or designer knowledgeable about 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 bootstrap that is official as you look your brand-new theme. We highly recommend you utilize our Dropbox integration to modify your theme files.

The theme templates web web page

When the theme is completed cloning, you can expect to secure regarding the templates web web page of one’s brand new custom theme:

Some files that are important note are:

• theme.scss may be the mobile first stylesheet which controls the entire look of your internet 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 almost any kind of web page it is possible to produce in NationBuilder. Tips to comprehend about these templates are:

• Modifications built to a template here will change every web page of this kind across your internet 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 lets you modify and sync website theme files and custom web web page templates entirely on your personal computer, utilizing your favorite text editor.

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

Theme vs. page level editing

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

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

web web Page degree modifying: Web web Page level modifying occurs when you simply want to style one distinct page. Find the web page you intend 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 page which exists under each web page is where it is possible to upload images or assets utilized for that web web page only.

Instance: You actually have a Petition web web page utilizing 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 change the HTML and fluid.

The stylesheet

Exactly why is the stylesheet file expansion .scss?

The reason the stylesheet file expansion concludes in .scss (rather than .css) is basically because NationBuilder makes use of the SCSS syntax of Sass. Sass is really an extension that is css3 makes use of mixins, factors and easy logic that allows you to definitely do a little amazing things you ordinarily can not do with normal CSS. Like you always have without any problems, learning the basics of Sass can go a long way while you can write CSS. Browse tutorials and paperwork right here to find out more.

Two of the most extremely effective top features of Sass are wix support chat factors and mixins. Let us just take a fast view just just exactly how both work:

Sass factors start out with a buck indication and are usually followed closely by a value. Factors enable you to effortlessly create the properties that are same your stylesheet.

Mixins are perhaps one of the most effective Sass features. They enable re-use of styles – properties if not 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 prefer circular corners for a back ground element. Rather than typing out of the border-radius home for all the different browsers, you can easily simply make use of the border-radius mixin like therefore:

Now let us have a look at theme.scss. You start 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. What this means is you merely need certainly to figure down these values as soon as, after which it is simple to reuse equivalent colors and fonts again and again in your stylesheet.

Remember that theme.scss is a mobile very first stylesheet. This means all of the designs are cellular devices are loaded very very first, and designs for desktop or tablet users are packed a short while later in table-and-desktop.scss.

The easiest method to govern the way in which elements look on your own internet site is always to bypass these standard designs or producing brand new designs whenever necessary. Utilizing Inspect aspect in Chrome and Safari or Firebug in Firefox may be the way that is easiest to expose which styles are managing various areas for a offered web web page.

As an example, suppose you need to replace the color regarding the header and nav area doing his thing. First, right click on that part of the web page and click Inspect Element. This can expose the course or name that is id attributes.

You can observe Inspect Element revealed the div course, as well as on just the right 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. That is it — the backdrop is really a brand new color. Apply this exact same method of what you would you like to alter on your own web web site.

How the templates that are website together

Why don’t we have a look that is quick just how the web templates work by pressing on design.html.

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

• << content_for_header >> lots a crucial amount of rule needed for your NationBuilder internet site to work precisely. For instance, it automatically loads jQuery and appropriate meta data. Never ever eliminate this.
• includes the _nav.html file, containing all of the rule for the top nav. You will find your _nav.html file in your theme template page if you want to edit it.
• _columns_2.html wraps the content that is main of a typical page whenever sidebar is switched on. Inside you will find:

• << content_for_notifications >> displays different notification communications, such as for instance when a questionnaire is effectively submitted.
• lots the template when it comes to style of web page being packed. For instance, in cases where a calendar 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. It loads _supporter_nav.html in the s >What is shown in the sidebar changes when a user is signed in vs. signed out if they are

If you’d like to alter what exactly is when you look at the sidebar when someone is finalized down, edit _sidebar.html. If you’d like 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 register kind, social networking widgets and methods for the users to register, whereas _supporter_nav.html includes the sidenav that will be configurable through the control interface.

Uploading images, jQuery or other assets

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

If you are staying away from Dropbox, all pictures or assets employed for your current theme should always be uploaded to Website > Theme > data.