Remove underline for links only in buttons’ is closed to new replies - Support

Tagged: Buttons, CSS, links

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
October 18, 2024 at 3:40 am #1469349

ScatmanAT
Participant

Hello,

I found a previous post about this and the person wrote they found the follow as a solution.

/* LINK UNDERLINE */

.avia-buttonrow-wrap a.avia-button {
text-decoration: none !important;
}

I added this to my quick CSS section and it does not work. Can anyone explain why?

C

October 18, 2024 at 5:15 am #1469358

Ismael
Moderator

Hey ScatmanAT,

Thank you for the inquiry.

The button text should not be underlined by default. Where can we see this issue? Please provide the page URL in the private field.

Best regards,
Ismael

October 18, 2024 at 10:39 pm #1469417

ScatmanAT
Participant

Ismael,

See Link

C

October 19, 2024 at 11:31 am #1469428
Rikard
Keymaster
Hi,

You have this added in your child theme:
```
.main_color a {
  text-decoration: underline !important;
}
```
Please try removing it, change the selector, or remove the !important part.

Best regards,
Rikard
October 19, 2024 at 4:03 pm #1469447

ScatmanAT
Participant

Rikard,

That works but now all link don’t have underlines. I still want links within text to be underlined.

C

October 19, 2024 at 8:48 pm #1469462

Rikard
Keymaster

Hi,

Did you try without !important? If that didn’t work, then try the :not pseudo class: https://www.w3schools.com/cssref/sel_not.php

Best regards,
Rikard

October 19, 2024 at 10:01 pm #1469471

ScatmanAT
Participant

Rikard,

This is what I have now:

.main_color a { color: #f1f1f1; text-decoration: underline }
.alternate_color a { color: #f1f1f1; text-decoration: underline !important;}

C

October 19, 2024 at 10:15 pm #1469472
Mike
Moderator
Hi,
When I check your homepage I don’t see an underline on your buttons or links, I assume that you removed your above css, if not please due and use this css instead:
```
#top a:where(:not(.wp-element-button,.avia-button)) {
    text-decoration: underline;
}
```
this is the result:

Best regards,
Mike
October 20, 2024 at 2:05 am #1469488

ScatmanAT
Participant

Mike,
I only got rid of the !important as Rikard suggested.

Currently it looks like this:

.main_color a { color: #f1f1f1; text-decoration: underline }
.alternate_color a { color: #f1f1f1; text-decoration: underline !important;}

Which line(s) are you suggesting I remove?

C

October 20, 2024 at 1:12 pm #1469508
Mike
Moderator
Hi,
Please use this instead for the result in my screenshot:
```
#top a:where(:not(.wp-element-button,.avia-button)) {
    text-decoration: underline;
}
```
Best regards,
Mike
October 21, 2024 at 2:54 am #1469522

ScatmanAT
Participant

Mike,

Which line(s) of code do I replace? one or both of the ones I posted?

C

October 21, 2024 at 4:45 am #1469523
Ismael
Moderator
Hi,

Thank you for the update.

You can remove both css rules and replace them with the code @Mike provided above:
```
.main_color a { color: #f1f1f1; text-decoration: underline }
.alternate_color a { color: #f1f1f1; text-decoration: underline !important;}
```
Use this if you need to adjust the text color:
```
#top a:where(:not(.wp-element-button,.avia-button)) {
    text-decoration: underline;
    color: #f1f1f1 !important;
}
```
Best regards,
Ismael
October 21, 2024 at 2:51 pm #1469557

ScatmanAT
Participant

Thanks guys. It seems to be correct now.

C

October 21, 2024 at 3:44 pm #1469560

ScatmanAT
Participant

Guys,

I notice that when I hover over links now, the color doesn’t change list it did before. How can I fix that as a result of the fix you gave me for the underline?

C

October 21, 2024 at 5:55 pm #1469570
Mike
Moderator
Hi,
Please add this css, and also keep the css Ismael posted:
```
#top a:hover:where(:not(.wp-element-button,.avia-button)) {
    text-decoration: underline;
    color: #d97d1a!important;
}
```
Best regards,
Mike
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.