WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change recent post list style in widget (15 posts)

  1. Alyson
    Member
    Posted 3 years ago #

    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.

  2. oturia
    Member
    Posted 3 years ago #

    Do you mean a "|" when you say a bar?

  3. Alyson
    Member
    Posted 3 years ago #

    this --> ---------------------

  4. oturia
    Member
    Posted 3 years ago #

    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.

  5. Alyson
    Member
    Posted 3 years ago #

    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?

  6. oturia
    Member
    Posted 3 years ago #

    Add this:

    padding: 5px 0 5px 15px;

  7. Alyson
    Member
    Posted 3 years ago #

    thank you, too perfect!

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

  8. Alyson
    Member
    Posted 3 years ago #

    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?

  9. oturia
    Member
    Posted 3 years ago #

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

  10. Alyson
    Member
    Posted 3 years ago #

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

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

  11. oturia
    Member
    Posted 3 years ago #

    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.

  12. Alyson
    Member
    Posted 3 years ago #

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

  13. oturia
    Member
    Posted 3 years ago #

    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!

  14. Alyson
    Member
    Posted 3 years ago #

    Thanks, works perfect!

    resolved =D

  15. oturia
    Member
    Posted 3 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic