Color Scheme for Associate

[Doug]

I have a client that doesn't care for the 4-5 options Associate theme offers in terms of color scheme. Is there a set of instructions anywhere of all the different places in the code (CSS and other files) I need to change the code and what each one does? I've heard a few people say use Firebug and I do have that and have played around with it a little but it's not been as easy to figure out as I had hoped - so just wondering if there's a set of instructions on this basic task out there.

http://mont-bucksdha.org/

[CleanPageDom]

Hi there

How are you with functions.php?

The simplest way to do it (I think. At least this is how I would do it) is to register a new colour scheme in functions.php, then find the colour schemes in style.css, copy and paste one of those and alter each colour to reflect your client's choices.

For example, in Modern Portfolio, in the functions.php you'll find this:

//* Add support for additional color style options
add_theme_support( 'genesis-style-selector', array(
	'modern-portfolio-pro-blue'   => __( 'Modern Portfolio Pro Blue', 'mpp' ),
	'modern-portfolio-pro-orange' => __( 'Modern Portfolio Pro Orange', 'mpp' ),
	'modern-portfolio-pro-red'    => __( 'Modern Portfolio Pro Red', 'mpp' ),
	'modern-portfolio-pro-purple' => __( 'Modern Portfolio Pro Purple', 'mpp' ),
	<strong>'modern-portfolio-pro-cpd' => __( 'Modern Portfolio Pro CPD', 'mpp' ), - I ADDED THIS CUSTOM ONE</strong>
) );

Then in style.css, you should find something like this:

/* Modern Portfolio Pro Red
--------------------------------------------- */

.modern-portfolio-pro-red .after-entry .entry-title a:hover,
.modern-portfolio-pro-red .entry-meta a:hover,
.modern-portfolio-pro-red .entry-title a:hover,
.modern-portfolio-pro-red .genesis-nav-menu > .right > a:hover,
.modern-portfolio-pro-red .site-footer a:hover,
.modern-portfolio-pro-red .site-header .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.modern-portfolio-pro-red .site-header .genesis-nav-menu a:hover,
.modern-portfolio-pro-red a {
	color: #fd5452;
}

etc etc etc…

If you copy and paste the whole of the CSS for one of the colour schemes, then alter the hex codes based on your client's colours you should be OK. Anything that doesn't work you can fix using Inspect Element or similar.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts