Change color in Education Theme

Community Forums Forums Design Tips and Tricks Change color in Education Theme

This topic is: not resolved

This topic contains 6 replies, has 5 voices, and was last updated by  AC 1 year, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #4537

    calendargirl
    Participant
    Post count: 36

    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

    • This topic was modified 2 years ago by  nickthegeek.
    • This topic was modified 2 years ago by  nickthegeek.
    #4559

    nickthegeek
    Keymaster
    Post count: 756

    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;
    }

    #4565

    Aaron Hartland
    Participant
    Post count: 37

    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+

    #7366

    tfmurphhk
    Participant
    Post count: 5

    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

    #7380

    AC
    Blocked
    Post count: 7712

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

    #7391

    Aaron Hartland
    Participant
    Post count: 37

    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+

    #7408

    AC
    Blocked
    Post count: 7712

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.