Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Changing List-Style-Type

    Hi there,

    On my Wordpress website (www.ironwhisk.com) I'm having two issues with comment styling. Both issues are best seen on this post (http://www.ironwhisk.com/2012/08/french-croissants/) since it has pingbacks.

    The first issue is that the dotted line under the pingbacks is wider than for the other comments, which I would prefer not to happen. Also there are roman numerals indicating the comment number (just for the pingbacks). I would like to get rid of those but only for commenting (I want to keep the roman numerals in other parts of my site that I currently have set up).

    I'd also like to change the reply button colour and was wondering how I could do that.

    Thank you so much for your help!

    Ilan

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    There's no line under your pingbacks that I can see, so maybe you've sorted that.

    Roman numerals - Have a try removing the !important from this:

    Code:
    #content #page ol li, #content .post ol li {
        list-style-type: lower-roman !important;
        margin-left: 30px !important;
    }
    That'll take the roman numeral off your comments. Check it doesn't cause any issues elsewhere. If it does then restore it and add !important to this:

    Code:
    #comments-content ol li.post.pingback {
        list-style: none outside none !important;
        margin: 0;
        padding: 20px 0 10px 20px;
    }
    It's generally better to avoid !important except as a last resort, which is why I've suggested the approach above.

    Reply Button - do you mean 'Post Comment'? You can change that with this:

    Code:
    form#commentform p.form-submit input#submit {
        background: none repeat scroll 0 0 #4C4C4C;
        border: medium none;
        color: #FFFFFF;
        cursor: pointer;
        font-family: 'Droid Sans',arial,sans-serif;
        font-size: 12px;
        margin: 8px 0 10px 1px;
        padding: 6px 8px;
    }
    Change the highlighted to any value of your choice.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    Thank you for your reply.
    I accidentally removed the lines while trying to reduce their width, but I put them back now, so I would appreciate some help with that

    With regards to the roman numerals, I had to use the second method but it worked perfectly, thanks.

    For the reply link I'm actually having trouble with this http://pbrd.co/16rtNHf

    Thank you so much for the help!

    Ilan

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a try with:

    Code:
    #comments-content ol li.post.pingback {
        border-bottom: 1px dotted #4C4C4C;
        list-style: none outside none !important;
        margin-bottom: 0;
        margin-left: 45px !important;
        margin-right: 0;
        margin-top: 0;
        /*padding: 20px 0 10px 20px;*/
    }
    And for Reply:

    Code:
    .reply {
        border-bottom: 1px dotted #4C4C4C;
        color: #4C4C4C !important;
        float: right;
        margin: 10px 0 0;
        text-decoration: none !important;
        width: 100%;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks! That worked quite well.

    I'm wondering though why the two ping backs are in different positions between the dotted lines (http://pbrd.co/19nCdhu) if they should be formatted the same way.

    With regards to changing the colour of the reply link, unfortunately it did not work. That was the first thing I tried :P

    Thank you!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Those pingbacks look the same to me. Do you mean the differing gap at the top?

    If you do mean the vertical gap, it's coming from this:

    Code:
    #content .post #comments-content ol li.depth-1 {
        overflow: hidden;
        padding: 25px 0 10px;
    }
    Re the colour, all those !important statements are part of the problem here. You're going to need:

    Code:
    #commentlinks .comment-reply-link {
        color: green !important;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Ilan (08-17-2013)

  • #7
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, you're a CSS wizard! That fixed my problem perfectly

    One last quick question - what should I use to change the colour of the name & date links for comments?

    Thanks!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a try with:

    Code:
    #commentlinks a {
        color: green !important;
        text-decoration: none !important;
    }
    (This whole thread is a perfect example of why !important should be used sparingly...)

    That will change all the links within comments.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #9
    Regular Coder
    Join Date
    Aug 2012
    Posts
    109
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks! Yes, it's important that people stop using them excessively


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •