Changing the colors on Outreach theme

[peps2004]

I've uploaded the Outreach theme to our site - globalyouthaction.org - and am trying to get it to look a little more like the Outreach demo with regards to the colors.

At the top of the page where our logo is, we want to make it all white rather than the dark grid background that's there at present.

We also want to change the shade of orange it uses for the menu and elsewhere - I've selected orange on theme settings, but it's a different shade to the one on the demo. We'd like to make our menu the same color as the one on the demo.

Finally, we'd like the background to be the same plain gray color that's on the demo, rather than the black/gray grid that's on there by default.

Is there an easy way for us to make these changes??

http://globalyouthaction.org

[Ginger]

Hi there,

Your best friend will be the theme setup instructions....follow those and you can easily set everything up like the demo:

http://my.studiopress.com/setup/outreach-theme/

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[peps2004]

Hi Ginger,

I've tried following that by both adding a background image and changing the color but nothing actually changes, even after saving and publishing.

[Ginger]

For wanting the header white, in your style.css, look for #header and remove the background image and change it to the color white:

Remove this:
background: #090909 url(images/header.png) center repeat-y;

Add this in it's place:
background-color: #fff;

The orange is a different shade I believe since you have an old version of Outreach (v1.8) and it's been updated to Outreach Pro (v3.1). Using Inspect Element in your Browser, notice on the demo the orange shade of the background menu is

background-color: #ff7b00;

Change your orange background menu color to that and it will match.

On the slider section, increase the slider side to encompass the full width of that section and the textured background should go away.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[MoodyRiviera]

Are you using any kind of caching plugin that might be preventing the changes from showing up?

*MoodyRiviera*

[peps2004]

@moodyriviera - I don't have any caching plugin

@ginger - thanks for the help. I've been able to get the header area to show up as white, so that's looking better. I'm still struggling with getting the different shade of orange to display though. I've changed various colors to ff7b00, but the menu is still the darker shade of orange.

If I refresh the page, there's a brief flash of the orange we want, but it then reverts to the darker shade.

[Ginger]

If found it! The theme us using images as backgrounds in the nav area.

Look for these sections in your style.css file and comment them out or remove them. When you do your lighter orange will be visible.

.outreach-orange #nav {
	background: url(images/orange/nav.png);
}

/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */

#nav {
	background: url(images/nav.png); 
}

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[peps2004]

That's done the trick - thanks so much for the help!

[Author]

Posts