# Customing Your Theme

To customise your theme, you'll need to first create a custom theme using the promote theme as a base. Go to Website > Theme > New Custom theme. Name your new theme, ensure Clone your current theme (Promote) is selected, and click Create Theme.

WARNING

Please note, customising your theme assumes you're confident editing html, javascript, and css files, and know how to edited your theme files either through the NationBuilder admin interface (opens new window), or via the Dropbox (opens new window) connection.

# Additional Social Media Accounts

The Promote theme allows you to add additional social media links to your site's header and footer. Currently you can add links to Instagram, YouTube and Facebook.

In your theme files, open __theme_settings.html and look for;

<!-- Social accounts -->
{% assign youtube_url = '' %}
{% assign instagram_url = '' %}
{% assign facebook_url = '' %}

Add the URLs to your relative social media accounts here, and the links will appear in your site's header.

Twitter links will also be added if your site's broadcaster (opens new window) has a Twitter account connected.

# Preview Text Length

Where one page is previewed on another (i.e. content blocks, etc.), you can adjust how many words are previewed before the user is directed to read more. The default is 100 words.

In your theme files, open __theme_settings.html and search for {% assign truncate_length = 100 %} and change the number (how many words) as desired.

Preview text example

# Customising Theme Colors

In your theme files, open __theme_settings.scss and search for;

$theme-accent-color-dark: #2F4F72 !default;
$theme-accent-color: #72A6DE !default;
$theme-accent-color-light: #A9C9EB !default

Change these color codes as you desire. These will be the dominant colors in your theme. Please note, these colors need to contrast enough with the relevant text color.

For dark theme styles, the $theme-accent-color-light and $theme-accent-color colors need to contrast enough with black, and the $theme-accent-color-dark color needs to contrast enough with white.

For light theme styles, the $theme-accent-color-light color needs to contrast enough with black, and the $theme-accent-color-dark and $theme-accent-color colors need to contrast enough with white.