We’ll be using a simple copy and paste code snippet.
Please only do this if you know what you are doing. AND only do this after you have made a full backup of your site. Just in case you break something.Editing code can be dangerous!!!
Download, scan and unzip the CSS snippets.
The code snippets change the color schemes of these 3 themes…
- Altitude Pro
- Magazine Pro
- and Parallax Pro
There are two versions of the code…
- DIY Version
- Ready to Use Version
If you understand CSS you can use the DIY Version to make your own color schemes.
In this tutorial we’re just going to copy and paste the “Ready to Use Code”.
Open the code snippet
Open the folder containing the color you want to use. Then open the code snippet for your theme.
For instance, if you use Altitude Pro theme. Open the…
Ready to Use folder > Blue Folder. Then open the AltitudePro-Blue code snippet in a text editor such as Notepad.
It is important that you open that code snippet in a plain text editor such as Notepad. Do NOT use Microsoft word.
Copy the code to your clipboard
Place your cursor inside the code snippet and press Ctrl + A to select all of the code.
Then press Ctrl + C to copy the code to your clipboard.
Paste the code inside WordPress
- In WordPress go to Dashboard > Appearance > Editor.Make sure you are editing the style.css file for your chosen theme.
- Scroll to the VERY bottom of the code.
- Place your cursor AFTER the last character of code, in the editor.
- Press Enter 3 times to make some space, so you can easily tell where this extra code snippet has been added. Just in case you want to remove it later.
- Paste the code snippet.
- Click the big blue Update File button.
Don’t Forget To Click the Update File Button
Set the color Scheme or Accent color
The text links in buttons etc are set via the WordPress Dashboard.
Dashboard > Customize > Colors or Color Scheme.
In altitude Pro you can set the exact color using a color picker. In Parallax Pro and Magazine Pro, you choose a color from a drop down list.
Test your code snippet and color scheme
Refresh the front page of your site. Press Ctrl + F5 if necessary. So that your new code becomes active and you can see the changes in your browser.
Your website now has it’s own color scheme. Why not show it off to your friends?
These are the instructions for the second video…
Making your own color scheme with the DIY Version of the CSS code snippets
You will need three Colors
MainColor: Main top navigation bar and footer.
RollOver: Hover Color for drop down links.
TheButtons: Buttons that site visitors click when they want to add comments to your site or sign up for your newsletter.
Adobe Color is a good place to find Color schemes.
Editing the code snippets to add your own Colors
Open the DIY Version in Notepad.
- Chose Edit > Replace.
- Find What: MainColor
Replace With: #324D5C (Replace All)
- Find What: RollOver
Replace With: #46B29D (Replace All)
If you’re using Parallax Pro or Magazine Pro themes you have an other option
- Find What: TheButtons
Replace With: #DE4949 (Replace All)
If your theme is Altitude Pro you have two Color options…
Magazine Pro and Parallax Pro have three Color options that you need to set…
The WordPress Customizer
All three themes have another option that needs setting. Do this after you have edited and pasted the code snippet.
In the WordPress Dashboard go to…
- Appearance > Customize and choose Colors or Color Scheme.
Here you can choose a highlight Color to go with your new Color scheme. Experiment to see which Color looks best.
Depending on your theme, there will be a Color picker or a drop down list where you can choose a Color.