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

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

Click here to download the code.

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

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.

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.

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.

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.

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.

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…