• Please see my site.

    http://www.philpeeps.com

    The Lifestream feed has background images from the respective service as the bullet list markers. However it is repeating them and dropping the test to the next line and I can’t find the conflict in the CSS files causing this. Anyone want to take a shot at it? Thanks in advance…

    CSS from Lifestream affecting this section:

    #sidebar ul.lifestream, ul.lifestream { list-style-type: none; margin: 0 0; padding: 0 5px; }
    #sidebar ul.lifestream li, ul.lifestream li { padding: 0 0 0 24px; margin: 5px 0; background-repeat: no-repeat; background-position: 0 0; }
    #sidebar ul.lifestream li a, ul.lifestream li a { display: inline; }
    #sidebar ul.lifestream li li { font-size: 85%; margin-left: 0; padding-left: 0; }
    #sidebar ul.lifestream ul { margin-left: 0; padding-left: 0; }

    CSS from theme:
    ‘#col-2 {
    list-style: none;
    float: right;
    width: 288px;
    }

    #col-2 ul {
    list-style: none;
    }

    #col-2 li {
    margin-bottom: 25px;
    }

    #col-2 li div.tweet {
    margin-bottom: 50px;
    }

    #col-2 li div.tweet p {
    border: 1px solid #cccccc;
    }

    #col-2 li div.tweet p span {
    background: #f1f1f1;
    border-top: 3px solid #c3c3c3;
    color: #000;
    display: block;
    font-size: 12px;
    line-height: 20px;
    padding: 10px;
    }

    #col-2 li div.tweet .arrow {
    background: transparent url(‘imgs/tweet_arrow.jpg’) no-repeat bottom right;
    margin-top: -1px; margin-left: 232px;
    width: 29px; height: 20px;
    }

    #col-2 li div.tweet a {
    background: transparent url(‘imgs/twitter.png’) no-repeat top right;
    color: #517700;
    display: block;
    height: 48px;
    text-decoration: none;
    }

    #col-2 h3 {
    background: transparent url(‘imgs/heading_col2_bg.jpg’) repeat-x bottom left;
    color: #676661;
    font-size: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    }

    #col-2 li ul li {
    float: none;
    display: inline;
    margin: 0;
    }

    #col-2 li ul li a {
    background: transparent url(‘imgs/arrow.jpg’) no-repeat 10px 10px;
    border-bottom: 1px solid #e5e5e5;
    color: #517700;
    display: block;
    padding: 7px 10px;
    text-indent: 20px;
    text-decoration: none;
    }

    #col-2 li ul li a:hover {
    background: #f1f1f1 url(‘imgs/arrow_highlight.jpg’) no-repeat 10px 10px;
    color: #000;
    }

    #col-2 li div#tabs {
    background: #f1f1f1;
    }

    #col-2 li ul.tabs {
    background: #fff;
    overflow: hidden;
    width: 100%;
    }

    #col-2 li ul.tabs li {
    float: left;
    }

    #col-2 li ul.tabs li a {
    border-top: 3px solid #689800;
    background: #689800;
    border-bottom: 0;
    color: #fff;
    margin-right: 2px;
    text-indent: 0;
    }

    #col-2 li ul.tabs li a.selected, #col-2 li ul.tabs li a:hover {
    background: #f1f1f1;
    border-top: 3px solid #c3c3c3;
    border-bottom: 0;
    color: #000;
    margin-right: 2px;
    text-indent: 0;
    }

    #col-2 li div#tabs ul li a {
    background-image: url(‘imgs/arrow_grey.jpg’);
    }

    #col-2 li div#tabs ul li a:hover {
    background-color: #fff;
    background-image: url(‘imgs/arrow_highlight.jpg’);
    }

    #col-2 li div#tabs ul.tabs li a, #col-2 li div#tabs ul.tabs li a:hover {
    background-image: none;
    }

    #col-2 li div#tabs ul.tabs li a:hover {
    background: #f1f1f1;
    }

    #col-2 li.ads {
    margin-bottom: 50px;
    }

    #col-2 li.ads ul {
    overflow: hidden;
    width: 100%;
    }

    #col-2 li.ads ul li {
    float: left;
    width: auto;
    margin-right: 10px; margin-bottom: 10px;
    }

    #col-2 li.ads ul li a {
    background: transparent none;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 0;
    display: block;

    padding: 2px;
    border: 1px solid #CCCCCC;
    }’

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter philpeeps

    (@philpeeps)

    bump

    Thread Starter philpeeps

    (@philpeeps)

    anyone willing to take a look? I like this plugin and it works with other themes, just something about my main theme CSS and the lifestream CSS file that makes them not get along…

    Thread Starter philpeeps

    (@philpeeps)

    looks like I am just gonna have to dump this and use the standard RSS widget…I have tried everything I can think of…

    I know this is really late to this thread, but thought I might help someone else. I had the same issue, and fixed it with these lines of code:

    .lifestream_text { margin-left: 20px;}
    .widget_lifestream ul.lifestream li { background: left 15px; }

    The .lifestream_text pushed it over so it didn’t sit directly underneath the icon. The li fix pushed the icon down so it sat by the text.

    You may have to do some editing to any other ul li styles you’ve got, so your mileage may vary!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Lifestream CSS Conflict’ is closed to new replies.