Link styling

[kenfbell]

I’m struggling with styling links on this site.

I’d like the links in regular body text to have an underline on hover, but the CSS change I made it also caused the accordian headers to have an underline (as seen on this page). I just want regular text links to have the underline and nothing else.

I’d also like the footer links to have an underline on hover. I made a CSS change and in the X preview it shows the underline, but once the page is published the change is not there.

Can someone help please?

PS: X is a brilliant theme…I think this is my 8th site using it.

[nabeel]

Hi @kenfbell,

Thank you for reaching out to us. If you’re not adding the links manually then there is no easy way to style the links without affecting the accordion links or buttons as they are the part of the regular body text. One way you can do this by giving a class to those elements or links that you want the styling to take effect e.g give your elements (all the elements where you want to show the underline on hover) a class hover-style and then add the following code in the Theme Options > CSS:

.hover-style:hover, .hover-style a:hover {
    text-decoration: underline !important;
}

This way only those links will have underline on hover that contains the hover-style class. For the footer links you can use the following code:

.x-colophon.top .widget a:hover {
    text-decoration: underline !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[kenfbell]

Thanks, very helpful. I’ve decided to change body font and link colors to avoid having to use the underline. Seems like a better solution overall, in order to preserve the beauty of the theme.

[paul.r]

You’re welcome!