Change color in Education Theme

[calendargirl]

Hi, I need to change the color of the call to action bar. I went into style sheet and started changing other colors. I went to the home-featured call to action but it still shows up orange. The same thing is happening with the are behind the slider. It is still showing up blue. HOWEVER, when I refresh I can see the color change for a micro-second and then it goes back to default. I am sure I am missing something simple here. Please advise. Thanks!
website: http://www.growet.com

[nickthegeek]

The call to action is actually made of these 3 backgrounds
#home-featured .call-to-action {
-moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
background: url(images/banner-texture.png) repeat-x #b8bc9b;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
color: #fff !important;
height: 131px;
margin: -20px 0px 30px -15px;
position: relative;
text-shadow: #8f4819 1px 1px !important;
}
#home-featured .call-to-action .banner-left {
background: url(images/banner-left.png) no-repeat;
bottom: -12px;
display: block;
height: 12px;
position: absolute;
width: 15px;
}
#home-featured .call-to-action .banner-right {
background: url(images/banner-right.png) no-repeat;
right: -30px;
display: block;
height: 132px;
position: absolute;
top: 0px;
width: 40px;
}

[Aaron Hartland]

The orange on the CTA and the blue for the widgets beside the sidebar are getting their color from images.

The "banner-texture.png" that you see here is creating the majority of the orange CTA:

#home-featured .call-to-action {
-moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
background: url(images/banner-texture.png) repeat-x #f05f21;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
color: #fff !important;
height: 131px;
margin: -20px 0px 30px -15px;
position: relative;
text-shadow: #8f4819 1px 1px !important;
}

The "banner-right.png" here is creating the point at the right of the CTA:

#home-featured .call-to-action .banner-right {
background: url(images/banner-right.png) no-repeat;
right: -30px;
display: block;
height: 132px;
position: absolute;
top: 0px;
width: 40px;
}

And one final image here ("banner-left.png")provides the little triangle on the bottom left of the CTA:
#home-featured .call-to-action .banner-left {
background: url(images/banner-left.png) no-repeat;
bottom: -12px;
display: block;
height: 12px;
position: absolute;
width: 15px;
}

So... to change the color of the CTA, you will need/want to create 3 new images, upload them to your server, and update your CSS appropriately.

The same is true for the blue behind (or to the right of) the slider...
Creating a new image for the background here:

#sidebar-alt {
background: url("images/bg-sidebar.jpg") repeat scroll 0 0 #254C67;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
color: #AEC6D7;
float: left;
font-size: 12px;
margin: 15px -5px 15px 0;
position: relative;
text-shadow: -1px -1px #0D1A23;
width: 165px;
z-index: 0;
}

If you update this image, you'll probably want to also update the color of the lines (border-top & border-bottom) between widgets here:

#sidebar-alt .widget {
background: none repeat scroll 0 0 transparent;
border-bottom: 2px solid #173041;
border-top: 1px solid #35556C;
margin: 0;
}

I hope that helps!

Regards,

Aaron

--

Aaron Hartland
http://www.aaronhartland.com/

---

Aaron Hartland | http://www.aaronhartland.com
Twitter  |  Facebook  |  LinkedIn  |  Google+

[tfmurphhk]

This is all very good... but in the EXECUTIVE theme, I can't seem to find any Call-to-action section in the style sheet?

Thoughts?

Tom

[AnitaC]

Tom, the Education has a built-in Call to Action area. The Executive themes or the other Studiopress themes do not have that area.

---

Need help with customization or troubleshooting? Reach out to me.

[Aaron Hartland]

Tom - I believe that the section you are looking for in the Executive theme CSS is:

.executive-home .home-cta

("cta" = short for call to action)

---

Aaron Hartland | http://www.aaronhartland.com
Twitter  |  Facebook  |  LinkedIn  |  Google+

[AnitaC]

Oh man, I have the Executive theme and never realized it had the Call to Action. Sorry for incorrectly stating that it didn't have it.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts