# 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.
# 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.