Adding and changing website colors
- 05 Dec 2024
- 2 Minutes to read
- Print
- DarkLight
- PDF
Adding and changing website colors
- Updated on 05 Dec 2024
- 2 Minutes to read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
When you are choosing the colors for a website, you should try and set as many colors as possible under the General Layout page first, before you code the styling with CSS. This means that any user of the website can change the colors here in future without needing to go into the CSS file. On the global layout page you can:
Change the menu colors
Change all font colors
Change the theme colors.
The theme colors are the three main colors used on the website. When you change these colors, it will replace all instances of that color in the Site Colors Page, Public CSS file and Global CSS file.
Important
When you code a website, you should make sure you use 3 main colors consistently across the site. Such as one color for primary items such as buttons, one color for secondary items and one color for accents.
These colors should be represented by their hex code i.e. #000000 so they can be picked up by the color changer. You can add transparency to the end of the hex code if needed i.e. #000000a an it will still work.
To change the color styling, navigate to Setup >Website Content > General Layout.
Click on the rainbow wheel icon to modify the website colors.
Note
Any color settings applied on the general layout page will apply to the entire site, including the public pages, such as the homepage, and the back end pages. You should ensure any settings you apply here also look good on the back end screens.
You will often still need to style the colors in the CSS file, for example:
You want the default h1 text color to be #222222, but you want the h1 on the homepage to be blue
You would set the text color on the general layout here as #222222 and then use CSS to style the homepage h1 tags
You want more special effects on the menu such as hover effects, underlines etc. than are available. You can see as many colors as you can using the general layout, and then apply the rest with CSS
You should try and use as many of the global CSS colors as possible, and then apply any extra CSS needed on top.
Make sure to test your website using the color changer and General Layout settings and see how the website responds.
Examples
The following is an example of a website which has been changed only using the theme colors!
Now using a pink colour scheme:
Was this article helpful?