Links highlight on blog posts and pages content

[JavierCane]

Hi!

In order to diferenciate the links from the common text, I want to apply the same border-bottom as in the links about the post attributes like author and categories.

Example: if you go to this post: http://beisbolsantboi.com/campeoanto-nacional-de-beisbol-cadete-2014_6397/ probably you don’t appreciate that the “Calendario 2014” text is a link.

If I add the custom CSS:
.article-body-wrap a{border-bottom: 1px dotted #357ebc}

It doesn’t apply to the pages like this one: http://beisbolsantboi.com/acerca-de/

but if I put the custom CSS like:
. page-content a{border-bottom: 1px dotted #357ebc}

It’ll apply even to the previous and next posts links in the post details page, or the home posts carrousel “previous” and “next” buttoms, which is something weird.

Is it any way to do it “cleanly”?

Thanks!

[laranz – SUPPORT]

Hi,

Try create links like this.

<a href="" class="underlinestyle">Calendario</a>

then add this in the Custom CSS.

.underlinestyle { text-decoration: underline; }

Let us know,

Thanks,
laranz.

[JavierCane]

Hi,

Yes, for sure it’ll work, but I’m wanting a way to do that without having to edit *all* the links of my site adding a new class.

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.single-post div.page-content div.body-text p a{text-decoration:underline !important;}
Thanks 🙂
With Best Regards
Mohammad

[JavierCane]

Hi Mohammad,

Your CSS work out for posts content, but it doesn’t work for pages.

You can see it here:

• Blog post (Ok): http://beisbolsantboi.com/campeoanto-nacional-de-beisbol-cadete-2014_6397/
• Single page (Not ok. The bus lines, texts “L72” and “SB1”, doesn’t match the CSS selector): http://beisbolsantboi.com/acerca-de/contacto/

If you want to test the selector, just go to the single page I’ve linked, open the browser console, and type it as a jQuery selector like that one:

jQuery('.single-post div.page-content div.body-text p a');

BTW: Thanks for your support, you’re being very helpful 🙂

[Mohammad – SUPPORT]

Hi,
You can use this code also for page.
div.page-content div.body-text p a{text-decoration:underline !important;}
Thanks 🙂
With Best Regards
Mohammad

[JavierCane]

Hi,

It doesn’t work. In order to be specific, it doesn’t work for the page I previously specified: http://beisbolsantboi.com/acerca-de/contacto/

There’re no <p> tags, so it’s impossible that the links match the CSS selector.

I would like to highlight the fact that you can test the selectors as I said before 🙂

Thanks!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
div.page-content a{text-decoration:underline !important;}
Thanks

[JavierCane]

Hi,

According to this article: http://css-tricks.com/efficiently-rendering-css/

Doesn’t should be better to set the selector as:
.page-content a{text-decoration:underline !important;}

Thanks a lot again Mohammad!

[Mohammad – SUPPORT]

Hi,
It is perfect in rendering because it is only for small content area.
Thanks

[JavierCane]

Are your referring to your selector or the one I proposed? 😛

[Mohammad – SUPPORT]

Hi,
I am referring to my selector.
Thanks

[JavierCane]

Alright, perfect!

Thanks!

[Kyle – SUPPORT]

Thanks Mohammad

– Kyle

[Mohammad – SUPPORT]

Hi,
You most welcome.
Thanks
Mohammad