Styling Links For Body Text Only

[DannyC]

Hi,

I feel that the link styling options in Pro are a bit limiting.

I’d like to only style the links in the body text, not menu’s footers, sidebars etc.

I’d also like to only style anchor links not Tel: or Mailto: as they are styled manually because they don’t occur very often on the site.

I really don’t want to have to add a custom class to everybody text link as that opens the site up to inconsistencies and errors.

What would say is the best way to apply a class just to href links in the body and exclude tel, mailto, header, footer, sidebar?

I’m using this currently.

/* unvisited link */
a:link {
color: rgb(84, 65, 194) !important;
border-bottom-style: solid !important;
border-bottom-color: rgba(84, 65, 194, 0.5) !important;
border-bottom-width: 1px !important;
}

/* mouse over link */
a:hover {
color: rgb(244, 67, 54) !important;
border-bottom-style: solid !important;
border-bottom-color: rgb(244, 67, 54) !important;
border-bottom-width: 1px !important;
}

/* selected link */
a:active {
color: rgb(84, 65, 194) !important;
border-bottom-style: solid !important;
border-bottom-color: rgb(84, 65, 194) !important;
border-bottom-width: 1px !important;
}

You can see the staging site here - https://wordpress-227779-902472.cloudwaysapps.com/

I’ve commented out the CSS on the staging site for now.

Thanks for your help.

Dan

[lely]

Hello Dan,

We do have PRESETS per element.

Presets - The settings of an individual element can be saved, allowing you to recall them on elements of the same type. (Available in both X and Pro themes)

Though like a custom class, you have to applied it per element.

What you need exactly can be achieve using correct selector.

Please check the following guide on how to get the correct selector of an area or certain element:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

That is the main container for the content. Get the class. Using the specific content container means footer and header content are already excluded. Depending on the page, that might be different if you have a sidebar so you need to inspect a page with sidebar too. After that class, add the link tag a in it.
Then use the not selector to exclude telephone and mailto.

Here’s a guide to target href: https://stackoverflow.com/questions/31520894/using-css-classes-to-format-a-hreftel-link.
For mailto: https://css-tricks.com/all-about-mailto-links/

The final selector will be the content container class + link selector a plus combination of not selector and the tel and mailto. Please check all the guide.

Hope this helps.

[DannyC]

Hi,

Thanks for your detailed response here, it’s appreciated.

I’m okay finding and selecting CSS classes using these methods.

I’m just struggling a little bit with the “not selector” as that is new to me.

Does this need to be in the same comment as the main link styling or it’s own?

Essentially, I don’t really want to have to add a CSS style tot he tel & mailto links in this way as they have been styled inline to work with the design. I’d like to just exclude those, not add styling for them in the main CSS file.

Thanks

Dan

[jade]

Hello Dan,

We are some links that explain the use of the :not pseudo-class selector:

:not()

https://www.w3schools.com/cssref/sel_not.asp

Basically, the :not selector is a negation selector so if you want to target all links but not those with a certain class then you can write a:not(.the-class)

Hope this helps.