Changed colour of sidebars but now bg_ul_li.gif is gone

  • Unknown's avatar
    benben78 · Member ·

    Hi all,
    I have decided to use Digg 3 Column (great theme and good fit for me) and have used the CSS upgrade to change some things.
    I really wanted to change the left and right sidebars to light grey and have sort of done that but now the bg_ul_li.gif images which were used as seperators between each sidebar widgets are not visible.
    I’ll try to post the CSS in question if it helps…

    Original:
    .sidebar ul, .obar ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .sidebar ul li, .obar ul li{
    margin: 5px 0 0;
    padding: 9px 16px 15px;
    background: url(images/bg_ul_li.gif) no-repeat left top;
    }

    .sidebar ul li.widget_search, .obar ul li{
    padding: 15px 16px;
    }

    .sidebar ul li h2, .obar ul li h2{
    font-size: 16px;
    font-weight: bold;
    line-height: 27px;
    color: #8dab3b;
    }

    .sidebar ul ul li, .obar ul ul li{
    margin: 0;
    padding: 6px 0 3px;
    background: none;
    }

    .sidebar ul ul ul, .obar ul ul ul{ padding: 3px 0 0; }

    .sidebar ul ul ul li, .obar ul ul ul li{
    padding: 6px 0px 3px 15px;
    background: url(images/bg_arrow_right.gif) no-repeat 0px 8px;
    }

    .sidebar ul ul ul ul li, .obar ul ul ul li{
    background: url(images/bg_arrow_right_2.gif) no-repeat 0px 8px;
    }

    Now my edited version:
    .sidebar ul,.obar ul {
    list-style:none;
    background:#ededed;
    margin:0;
    padding:0;
    }

    .sidebar ul li,.obar ul li {
    background:#ededed url(‘images/bg_ul_li.gif’) no-repeat left top;
    margin:5px 0 0;
    padding:9px 16px 15px;
    }

    .sidebar ul ul li,.obar ul ul li {
    background:#ededed;
    margin:0;
    padding:6px 0 3px;
    }

    .sidebar ul ul ul li,.obar ul ul ul li {
    background:#ededed url(‘images/bg_arrow_right.gif’) no-repeat 0 8px;
    padding:6px 0 3px 15px;
    }

    I’ve new to it all but spent all day reading tutorials and such and still can’t figure it out. I’d really appreciate any help.

    Also, is it possible to make the whole top to bottom grey? It seems only the sections that have widgets have changed to grey.

    Thanks for your time.

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

  • Unknown's avatar
    benben78 · Member ·

    http://blogelous.wordpress.com/

  • Unknown's avatar
    thesacredpath · Member ·

    First off, the “relative” URL is probably going to have to be changed to reflect the absolute URL and for that element, it is http://s3.wordpress.com/wp-content/themes/pub/digg3/images/bg_ul_li.gif .

    If you look at that image you will see that it has a white background and when used over a light grey background for the widget area, it doesn’t have the effect you want. You will need to create a replacement image to the exact size of the original with a transparent background (not white).

  • Unknown's avatar
    benben78 · Member ·

    Ah I see. I thought the gif was just the image with a transparent bg, not a white one.

    So how do I link to my own, newly created image in CSS?

    If the original was background:#ededed url(‘images/bg_ul_li.gif’) no-repeat left top;
    Do I just make my new image and add it to my media then link to it’s url?

    Thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    Yes.

  • The topic ‘Changed colour of sidebars but now bg_ul_li.gif is gone’ is closed to new replies.