• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Customization / Changing the color scheme of Altitude Pro, Magazine Pro and Parallax Pro themes

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

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top