Body text links styling

[rhodez]

Hi,

How can I style the body text links without affecting the social icons & stuff? If I use this basic CSS, it changes the social icons aswell (which looks really ugly).

a {
text-decoration: underline;
}

[Zachy]

Hey rhodes,

You can create a custom class at the bottom of your style.css file.

– In WordPress go to:
Appearance > Editor

– Then on the sidebar to the right of your screen you’ll want to scroll to the bottom and select your style.css file.
– Copy the text in the image below to the bottom of the style.css file.

When you add a link to a page or blog post using HTML just call the class like this:

I hope this helps! If this isn’t what you’re looking for just let me know. Also, any screenshots or additional information on how you’re inputting your hyperlinks in WordPress will help me to figure it out!

Thank you and Happy Holidays!

-Zach

[Zachy]

I’m sorry rhodez, those image links wouldn’t work for me and I couldn’t edit my post a second time.

See attachments below.

Underline-CSS is the first image.

Underline-HTML is the second image.

[rhodez]

Thanks for this trick :).

However, i’d like to have less timeconsuming and more future proof way of styling the links. If i need to style manually each link on each post, it sure takes some time.

This CSS works for everything else BUT the social icons styling:

a {
text-decoration: underline;
}

.widget a, ul.post-pagination-wrap li > a, ul.social-icons.large li a i {
text-decoration: none;
color: #444;
}

Is there any way to set “text-decoration: none;” to the social icons? I can’t find the proper selector.

[Zachy]

Haha yeah that wouldn’t be ideal!

The way I made it work was by changing the shortcodes.php file and adding a few things to the style.css file.
I’ve attached the edited shortcodes.php file which will need to be added to your web server.

(EDIT: I’m not allowed to attach a .php file for security reasons. I’ll upload it to my cloud and put a link to it but if that doesn’t work. I can email it to you if you give me your email address.)
On your web server the file would typically be found here:

wp-content > themes > dante > swift-framework > shortcodes.php

***I highly recommend renaming the original shortcodes.php to shortcodes-original.php instead of replacing the file. That is just incase anything were to go wrong you have the original file in the same place.***

– Now in your style.css file you’ll want to find all of the “a” selectors (they’re listed in a row) and add what I have in bold below:

a {
text-decoration:underline;
outline: none!important;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
outline: none;
}
a:focus {
text-decoration: underline;
-moz-outline-style: none;
outline: none;
}

– Then you’ll want to add a custom CSS class as well:

.social-icon {
text-decoration:none;
}

Save the style.css file and it should underline all of your text hyperlinks and keep the social icons as they were.

Let me know if this helps or if you have any questions. If you want me to walk you through it step by step I can give you my Skype information. Good luck!

[Zachy]

Man, they don’t make it easy. Here is the link to my website that holds the link to the shortcodes file. I’m sorry for the mayhem.

insidegeek.com/rhodez

[rhodez]

Thanks a lot for your effort, reaaly appreciate it :).

Can you please post the link to .php file in the cloud? Since I’m using the dante child theme, i guess I can just drop the edited file in the child theme folder?

[Zachy]

It’s my pleasure. I’m still clueless when it comes to certain code but I like to help where I can.

Here’s a link to my website that has the link to the file in the cloud.

insidegeek.com/rhodez

I’m not sure if the structure of the child theme is the same. Do you have this directory on your web server?

wp-content > themes > dante > swift-framework > shortcodes.php

[Swift Ideas – Ed]

Thanks for your assistance @Zachy! 🙂

– Ed

[rhodez]

Ed,

Is this really the only way to do this? It is a powerful framework but still I can’t add this very basic styling to body text links without this complex hack?

[Tahir – SUPPORT]

Hi rhodez,

You dont need this complex hack . If you can provide screenshots to what elements you need changed i can provide custom css for it.

Thanks
Tahir

[rhodez]

Hi,

problem solved. Used this css for underline and some other css tweaks to get rid of the underline in unwanted places.

.article-body-wrap a {
text-decoration: underline;
}

[Tahir – SUPPORT]

Hi Rhodez,

Glad you got it sorted. In Future please wait for a initial response from the Support Staff Like Me so your time is better used.

All The Best
-Tahir