sidebar color change

  • Unknown's avatar
    juliarich7 · Member ·

    Hi, I would like to change the color which runs alongside my latter posts from green to gold- leaving my summer posts green. Is this possible? Thanks for your help, Julie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    juliarich7 · Member ·

    Hi, I would like to change the color which runs alongside my latter posts from green to gold- leaving my summer posts green. Is this possible? Thanks for your help, Julie

  • Unknown's avatar
    thatrobyn · Member ·

    Hello there!

    I’m not seeing a sidebar running alongside your posts. Once you have one installed, I can help with adjusting its formatting.

    Since you don’t have a sidebar yet, I can give you some code that will adjust your colors from gold to green. You can try it out on your page, and if you like the effect, but want to change the colors, I’ll show you how.

    If you’d like to give this a try, click Appearance → Customize in your site’s Dashboard. Then, click CSS in your right-hand menu. In the CSS Revisions box, please paste the following underneath all existing text:

    #page {
    background: rgba(255,245,130,1);
    background: -moz-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,245,130,1)), color-stop(100%, rgba(179,199,68,1)));
    background: -webkit-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -o-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: linear-gradient(to bottom, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fff582′, endColorstr=’#b3c744′, GradientType=0 );

    }

    Then Save your changes.

    Your main column’s background should now be gold at the top, and run down to green at the bottom of the page. The fewer posts you allow to appear on the front page, the more apparent your gradient will be.

    If you like this effect and want to change the coloring, you can create your own code here:
    http://www.cssmatic.com/gradient-generator#

    Once you have something you like, place it between the { } brackets in the code I’ve given you above.

    Please let us know if you have any other questions. Thanks much!

  • Unknown's avatar
    juliarich7 · Member ·

    Hmm… maybe I am describing it wrong. I can see it on my preview. The green stripes running down both outer edges of the post- what do you call that?

  • Unknown's avatar
    thatrobyn · Member ·

    Hiya Julie,

    Check out the link below:
    https://cloudup.com/cLDfBhwYzr6

    If that is the area to which you’re referring, you’ll want to follow the same instructions I gave your before, with one adjustment.

    As I mentioned, you will begin by clicking Appearance → Customize in your site’s Dashboard. Then, click CSS in your right-hand menu. In the CSS Revisions box, please paste the following underneath all existing text:

    .wf-active body, .wf-active body.custom-font-enabled {
    background: rgba(255,245,130,1); background: -moz-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,245,130,1)), color-stop(100%, rgba(179,199,68,1)));
    background: -webkit-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -o-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    background: linear-gradient(to bottom, rgba(255,245,130,1) 0%, rgba(179,199,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fff582′, endColorstr=’#b3c744′, GradientType=0 );
    }

    Then Save your changes.

    Your site’s background will now be a gradient from gold to green as you scroll down the page.

    I hope this helps! Take care.

  • Unknown's avatar
    juliarich7 · Member ·

    Thanks for getting back to me. I was hoping there was an easy way for me to customize each individual post. I appreciate your help, but it feels a bit too complicated at this point. I am happy with the green and think I will leave it at that. I am loving WordPress. Thanks for a great site. Julie

  • Unknown's avatar
    samjhamdy · Member ·

    Hi Julie,

    Robyn is out for a bit, so I’m jumping in to assist. Based on what you’re describing, I think it would be very difficult to change the background color for each individual post. If it is possible, it would require a lot of customization.

    The reason is that, even though you see a coherent “whole” when you look at your site, the background and posts are actually two different areas in the WordPress coding. The background is one area – it’s not divided by posts. So in order to change its color for specific posts, there would need to be wholesale changes in the way your theme is coded.

    Sorry we couldn’t come up with a solution on this one. But glad to hear you love WordPress and your site, and please get in touch if there’s anything else we can to do help you. :)

    Thanks,
    Sam

    Happiness Engineer | WordPress.com

  • The topic ‘sidebar color change’ is closed to new replies.