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 11 years, 3 months ago by Anita.
-
AuthorPosts
-
December 11, 2012 at 12:11 pm #4537calendargirlParticipant
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.comDecember 11, 2012 at 2:55 pm #4559nickthegeekMemberThe 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 HartlandMemberThe 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 #7366tfmurphhkParticipantThis 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 #7380AnitaKeymasterTom, the Education has a built-in Call to Action area. The Executive themes or the other Studiopress themes do not have that area.
Love coffee, chocolate and my Bella!
December 25, 2012 at 12:26 pm #7391Aaron HartlandMemberTom - 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 #7408AnitaKeymasterOh 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.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.