1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Customization
  8. /
  9. Changing the color scheme...

Changing the color scheme of Altitude Pro, Magazine Pro and Parallax Pro themes

We’ll be using a simple copy and paste code snippet.

Download the code used in this css color change tutorial

Click here to download the code.

This is important!
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!!!
Update! Since I made this tutorial WordPress have added the Additional CSS option in the Customizer. Paste your code in there.
If you want more space to paste your code, so you can see what’s going on better, use the Simple CSS plugin.

If the eNews Extended code doesn’t work try adding this extra selector .widget-area .enews-widget (.widget-area)

Step 1)…
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”.

The ready to use CSS code snippet to change the color of Altitude Pro, Parallax Pro and Magazine Pro themes

Step 2)…
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.

Open the CSS snippet for Altitude Pro using Notepad.

Step 3)…
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.

Copy the CSS code to your clipboard.

Step 4)…
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.

Copy the CSS code to your clipboard.

Don’t Forget To Click the Update File Button

Step 5)…
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.

Choose color scheme Parallax Pro

Choose color scheme Altitude Pro

Select color style from drop down list

Select Accent Color Altitude Pro

Step 6)…
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.

The Finished CSS Colour Scheme

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…

  • MainColor
  • RollOver

Magazine Pro and Parallax Pro have three Color options that you need to set…

  • MainColor
  • RollOver
  • TheButtons

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.

Do you want even more power? You need Cobalt Apps…

You can build your own Genesis Child Themes with Dynamik Website Builder
You can build your own Genesis Child Themes with Dynamik Website Builder