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  anitac 1 year, 3 months ago.

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

    calendargirl
    Participant
    Post count: 27

    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 1 year, 4 months ago by  nickthegeek.
    • This topic was modified 1 year, 4 months ago by  nickthegeek.
    #4559

    nickthegeek
    Keymaster
    Post count: 751

    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

    anitac
    Participant
    Post count: 6489

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #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

    anitac
    Participant
    Post count: 6489

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

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

You must be logged in to reply to this topic.