Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change color in Education Theme
Tagged: call to action, educations
- This topic has 6 replies, 5 voices, and was last updated 12 years, 1 month ago by
AnitaC.
-
AuthorPosts
-
December 11, 2012 at 12:11 pm #4537
calendargirl
ParticipantHi, 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.comDecember 11, 2012 at 2:55 pm #4559nickthegeek
MemberThe 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;
}December 11, 2012 at 3:12 pm #4565Aaron Hartland
ParticipantThe 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+December 25, 2012 at 6:05 am #7366tfmurphhk
ParticipantThis 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
December 25, 2012 at 12:00 pm #7380AnitaC
KeymasterTom, 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.
December 25, 2012 at 12:26 pm #7391Aaron Hartland
ParticipantTom - 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+December 25, 2012 at 4:20 pm #7408 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.