Changing colours of sidebars

  • Hi there,

    I need some help with changing the colors of my sidebars.

    https://www.bestkeyloggingsoftware.com

    I want to have a different color for each sidebar, and I manage to get the background images up for both of them, but only one will repeat vertically, either the left or the right. I have changed the stylesheet from:

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;

    }

    to

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;
    background-image: url(‘images/grey-bg-sheet-left.png’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top left;
    }

    This repeats the left sidebar vertically, but not the right one.

    So I changed it to

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;
    background-image: url(‘images/sheet-red.png’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;

    }

    which then displays the right (red) sidebar all the way down, but I don’t have the left sidebar repeating.

    So I changed it to

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;
    background-image: url(‘images/sheet-red.png’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;
    background-image: url(‘images/grey-bg-sheet-left.png’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top left;
    }
    which brings the left (grey sidebar back repeating, but I’ve lost the right (red) sidebar repeating. I was playing around with all different positions and possibilities (I think), but it either displays the left or the right one repeating, never both.

    Btw., I am using a free WP template created with Artisteer.

    I have also changed the Sidebar in the stylesheet accordingly (see below). However, it seems as if I am still missing something.

    The Cell Layout reads as follows:

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    background-image: url(‘images/grey-bg-sheet-left.png’);
    background-repeat: repeat-y scroll;
    width: 238px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-content
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 567px;
    }
    .art-contentLayout .art-content-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 805px;
    }
    .art-contentLayout .art-content-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 755px;
    }
    .art-contentLayout .art-content-wide
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 993px;
    }
    /* end LayoutCell */

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar2
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    background-image: url(‘images/sheet-red.png’);
    background-repeat:repeat-y scroll;
    width: 188px;
    }
    /* end LayoutCell */

    to

    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top right;
    background-image: url(‘images/grey-bg-sheet-left.png’);
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: top left;

    Any ideas anyone?
    Help is greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Looking at your site, you seem to have resolved this, yes?

    Thread Starter connie-merk

    (@connie-merk)

    Not really. The color in the left sidebar (grey) repeats down all the way, but still not the red color on the right sidebar. it’s always either the left or the right, but never both. Is there anything else I need to change in one of the phps?

    The background will only extend downwards as far as the sidebar itself. The only ways around this is to either apply a min-height to the right sidebar’s CSS to force a certain fixed length or to use a body background that incorporates a red bar that will act as a background for the right sidebar (known as a “faux column”).

    Thread Starter connie-merk

    (@connie-merk)

    I am really grateful for your input. Your second suggestion with the background picture, positioned top center, works perfectly.

    body
    {
    margin: 0 auto;
    padding: 0;
    background-color: #FAFAFA;
    background-image: url(‘images/Page-BgTexture.jpg’);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-position: top center;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing colours of sidebars’ is closed to new replies.