Four main colors are used in the Raise theme.
With a little work, these colors can be changed so the website fits your branding needs. This HOWTO doc will walk you through how to change these four colors. If you need to change other colors that are shown in your theme, please consider working with one of our ecosystem partners, that level of customization is out of the scope of what our support team can help with.
Before you start, make sure you've already selected your color palette. You can use a tool like Canva Palette Generator. Learn about how the colors are used below. These can be viewed in a working demo website here.
Primary
Is the color used for the “buttons” of the website, so this color should be bright, it will be used as the color for all of the buttons on action pages.
Color 1
By default this color is set to be the same as your primary color, but you can change it. If you have a “Donate” button, it will appear in this color and stand out on your top navigation.
Color 2
This is the color that becomes the backdrop of your menu when someone hovers over a menu item.
Color 3
This color is the one that is used the most of all the colors. It should be a dark color. The default color for the font of your top navigation menu and the background color of the footer, homepage excerpt background panels. It is also the default page headline color.
This is the color palette I have chosen for my website. I've got Color 3 as the darkest color, the primary and color 1 are the highlight shade, and color 2 is more of a neutral that looks good with white text over the top of it. If you stick to those principles, you won't need to dive any deeper into code.
To make the change. I need to follow these three easy steps
-
Create a custom template
-
Open file and replace color codes
-
Save changes
Step 1: Create a new theme
To create a custom website theme, sign in to your nation's control panel and click Websites > Theme. This will display thumbnails of all public themes. You can also browse all free public themes in the theme gallery. For this HOWTO guide please select the “Raise” theme and then choose “Click New custom theme”.
Click Create theme.
When the theme is done cloning, you will land on the templates page of your new custom theme that looks like this.
On lines 2 - 5 you will see the list of colors and their corresponding hex codes. Copy/paste your color hex codes on the corresponding line. Please be aware that Color 3 is the main color for the font used in your top navigation, and the background color for the panels. It should be a dark color, the highlight color could be Primary or Color 1 or Color 2. Please see above for explanation of each.
If you need to restart, there is a button at the bottom of the template that says “Restore default template”. That will restore the template to its original and you can start again.
Step 3: Save changes and check your work
Click “Save and Publish Changes” button at the bottom of the page. Check out your website to see the changes. If you need to come back to edit the colors again, just come back to the theme.scss template and make those changes on the corresponding rows
All done!
Voila! You should now have a website with your brand's colors! For reference here is the website showing the changes made in this HOWTO doc.
If you need help, please email [email protected]. Note that our Support team may recommend you work with one of our ecosystem partners if the customizations you are trying to make are outside of the scope of the technical advice they can provide.
