Custom CSS - can't remove underline in comments link

[aschultz 0]

Hi There, I'm using Disqus. I have some custom CSS that I've added in the PlatformPro > Settings > Custom Code area (I'll paste it below). It's to modify the link to the comments in the POSTS page. However, it doesn't remove the underline in the link to the comments. Is there a different property to use other than "text-decoration: none"? Also, I can't get the color of the font used to show the comment count to turn white - it's still black. I've tried multiple ways of doing that, the one pasted below isn't the only thing I've tried. .post-comments { background-image: url("http://andrewbschultz.com/wp-content/themes/platformpro/platformpro/images/chatbubble.png"); background-repeat:no-repeat; display: block; font-size: 18px; text-decoration:none; font-color: white; font-weight: bold; height: 63px; width: 63px; margin-right: 4px; margin-top: 10px; float:right; overflow: hidden; padding-top: 8px; text-align: center; }

[cais 0]

You could try the following as custom CSS:

div.metabar span.post-comments a {text-decoration: none;}

The underline on a link is generally styled though the 'a' element; I've written the CSS to only address the underline of the anchor text.

[aschultz 0]

Thanks Cais, That doesn't seem to do anything - no change, as in my other attempts. I think this may be getting overridden by the dynamic.css file?

[cais 0]

I would expect CSS specificity to eventually take precedence over the dynamic CSS that is currently controlling the style. Have you tried stepping a lot further back, such as:

div.post div.post-meta div.post-header div.post-title-section div.post-title div.metabar span.post-comments a {text-decoration: none;}

You could go even further back on the chain but see if that helps any. NB: I'm doing this from Firebug so this is untested.

[bryan-hadaway 3]

Yes, when overriding default CSS you may need to be more specific. This is done most easily by adding body like: `body .post-comments a{text-decoration:none}` Thanks, Bryan

[aschultz 0]

That doesn't seem to work - no change occurs. That link just doesn't want to change.

[cmunns 16]

last resort and not good practice...but you can always test the selector and rule itself by adding `!important` before the semi-colon of any CSS rule. If it works your specificity is still off.

[aschultz 0]

Thanks for the suggestion, but that doesn't work either. I can change the font size, but I can't get rid of the underline and I can't change the color. So I'm not sure if specificity is the issue - I think I'm in the right place, the command just isn't working. Is there a different way?

[bryan-hadaway 3]

Perhaps we misunderstood what you want? Is this it: `body .post-comments a, body .post-comments a:link, body .post-comments a:hover{text-decoration:none}` and as Adam suggested: `body .post-comments a, body .post-comments a:link, body .post-comments a:hover{text-decoration:none !important}` Thanks, Bryan

[aschultz 0]

Hi Bryan, Thanks a lot for the guidance. That gets me to the right place - I can change the color of the text to white by going like this:

body .post-comments a, body .post-comments a:link, body .post-comments a:hover{ text-decoration:none; color:white; }

But that ridiculous underline is still there. As I mentioned way back in the first post here, it's counting comments from Disqus - is there a different approach necessary when it's a 3rd-party comment system?

[catrina 103]

There's probably a different approach that's needed here. I'm not sure why the underline is still showing up. The

text-decoration: none

code should work... What is your website URL?

[aschultz 0]

Hi Catrina, It's http://andrewbschultz.com. Thanks, Andy

[cmunns 16]

Add `border-bottom: 0px;` to your CSS selector

[aschultz 0]

That's it!! Thank-you!