Support » Themes and Templates » Change recent post list style in widget

  • Resolved Alyson

    (@rn2web)


    Hello people!

    I’m try change my widget recents posts list style.

    Currently she is like this:

    Recents Posts
    Post 1
    Post 2
    Post 3
    Post 4
    Post 5

    I wish that every post on the list had a bar up and down
    And on mouse over the post on the list, modify the background color

    I’m use Mypooch Theme http://oobor.com/wp/ ( example )
    This list on the left of this site http://www.bimco.org is what i need.

    In which part of css to modify or php.

    Thanks so much.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Do you mean a “|” when you say a bar?

    this –> ———————

    OK, that would be a bottom border. Try looking for this:

    .blockcontent-body ul li {
        line-height: 1.25em;
    }

    and change it to this:

    .blockcontent-body ul li {
    line-height: 1.26em;
    border-bottom: 1px solid #477029;
    }

    The last item was the color of the border, because the site you sent me to had green items. If you need a different color, just change the value after the #mark.

    Let me know if this does it for you. If so, don’t forget to mark the post as resolved.

    worked perfectly! thanks so much!

    you have some idea of how to give more space between the posts this list, I think they are too close together

    Know where to change the color of the background when on mouse over?

    Add this:

    padding: 5px 0 5px 15px;

    thank you, too perfect!

    I’ll open another topic on another question, I’ll mark this as resolved.

    found a small problem…

    In Internet Explorer the changes not occurred, what should I do in the file and style.ie7.css style.ie6.css?

    Can you post a link to the actual site you are developing so I can test?

    http://www.cargoesclub.com/site/

    [Login details removed. Don’t post login details on a public forum!]

    Look in the stylesheet and tell me if the ul and li are capitalized:

    .blockcontent-body UL LI

    and if they are, make them lowercase and see if that makes a difference.

    .blockcontent-body ul li {
    line-height: 1.26em;
    border-bottom: 1px solid #477029;
    padding: 5px 0 5px 15px;
    }

    OK, because there is an authentication on the page, I can’t use my Adobe Browser Labs tool to view the site in IE 6 & 7.

    I do know that on older versions of IE, you need to be very specific with your style selectors, sometimes an earlier UL or LI style might override your custom settings for .blockcontent-body.

    Without being able to further analyze the site, I would suggest you do two things:

    One, place an IE conditional statement in your header.php file right before the closing </head> tag.

    Here is an example:

    <!--[if lte IE 7]>
    <style>
    .blockcontent-body ul li {
    }
    </style>
    <![endif]-->

    This will allow you to play around with padding (space between element and it’s border) and margins (space between outside of item’s border and the elements around it).

    The next thing you are going to need to get familiar with are styling the lists themselves, and the general CSS styling commands at your disposal.

    I would recommend a ten minute crash course by reading through this post. It will help you get the basics down.

    Good luck with your new site!

    Thanks, works perfect!

    resolved =D

    OK, try adding the below code to your IE 7 stylesheet:

    .blockcontent-body ul li {
    line-height: 1.26em;
    border-bottom: 1px solid #477029;
    padding: 5px 0 5px 15px;
    }
Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Change recent post list style in widget’ is closed to new replies.