WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] [closed] Grey background on sidebars and behind images with captions (5 posts)

  1. laurenjane
    Member
    Posted 8 months ago #

    Hi Alex,

    Two things:

    I would like to change the light grey of the sidebars to a different color, but haven't been able to figure out where in the stylesheet I might do this.

    Could you let me know what I might add/change in the code to do this?

    The website is: http://www.multiculturiosity.com

    Thanks!

    Lauren

  2. jwn4157
    Member
    Posted 8 months ago #

    Very nice Website, Lauren! I have the same question as you for my company site, http://www.havebluepower.com

  3. Alexander Agnarson
    Member
    Theme Author

    Posted 8 months ago #

    Hi Lauren! Looks tasty there on the website! (Tip: run the regenerate thumbnails plugin once to fix older thumbnail sizes)

    For the caption background:

    .entry .wp-caption { background: #mycolor; }

    The sidebar:

    @media only screen and (min-width: 480px) and (max-width: 1200px) {
    .s2-expand .s2 { background: #f0f0f0; }
    }
    @media only screen and (min-width: 480px) and (max-width: 960px) {
    .s1-expand .s1 { background: #f0f0f0; }
    }
    @media only screen and (max-width: 479px) {
    .sidebar { background: #f0f0f0; }
    }

    Then you'd also need to edit /img/sidebar/s-left.png and /img/sidebar/s-right-s2.png and save them with your color. Or all images in the sidebar image folder if you want it to work with all layout options.

    There is quite a bit of "css-logic" going on behind the responsive and toggle-able sidebars (gave me a headache to create), so that's why there are so many different things to change.

  4. noaneo
    Member
    Posted 2 months ago #

    hi,

    Just a clarification, this is not the same lines as in the child theme,
    we need to change the child theme or add these lines in addition?

    /* Global */
    .mystyle {}
    
    /* Tablet - 800px, 768px & 720px */
    @media only screen and (min-width: 720px) and (max-width: 800px) {
        .mystyle {
    }
    
    /* Mobile - 480px & 320px */
    @media only screen and (max-width: 719px) {
        .mystyle {}
    }
    
    /* Mobile - 320px */
    @media only screen and (max-width: 479px) {
        .mystyle {
    }

    thank you

  5. noaneo
    Member
    Posted 2 months ago #

    I had to off

    .col-3cm .main-inner {background:none;}
    .col-3cm .main {background:none;}

    otherwise remain gray sidebars
    even before they try to

    /* Tablet - 800px, 768px & 720px */
    @media only screen and (min-width: 720px) and (max-width: 800px) {
    .s2-expand .s2 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 480px & 320px */
    @media only screen and (max-width: 719px) {
    .s1-expand .s1 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 320px */
    @media only screen and (max-width: 479px) {
    .sidebar { background:none; background-color: #FFF; }
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic