Hi,
Instead of link colors I would like to just have an underline. I tried this:
But that also underlinks in buttons, and that doesn’t look very good. Is there a workaround?
Hello @Kobber,
Please try:
.entry-content.content a:not(.x-btn) {
text-decoration: underline !important;
}
https://www.w3schools.com/cssref/sel_not.asp
If it is still adding an underline to buttons in your post content, please provide us with the link to some sample blog post on your site where the buttons are so that we can check it.
Hope this helps.
Hi Jade,
Thanks but it didn’t work. If you look at my front page (https://vektropol.dk/) - just below the hero image and the headline. Here you’ll find 5 buttons…
Hi @Kobber,
I can see it is already underline. That is a button element, it is available on Button settings under Text tab:
I think you’re misunderstanding me ;-).
Instead of a color, I want all my anchor text/links throughout the website to be underlined - but not on my buttons. I’ve pasted the code above, and though it works fine on anchor text, it also underline text and graphics in buttons, and that doesn’t look very good.
I’ve checked my buttons settings and there’s no underline turned on (it’s from the code above).
Hello @Kobber,
Please try:
.entry-content.content a:not(.x-anchor-button) {
text-decoration: underline !important;
}
Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps.
That worked, but… I thought that I could go to Theme Options -> Typography -> Site Links and set the color to transparent and then my anchor text/links would be the color determined in the text block, but the links actually become transparent. Is there a workaround that?
Hi @Kobber,
It seems that there is a misunderstand between the Theme Options and the Elements. The Theme Options link feature will work only for the links that are either generated via the theme itself or you added manually using HTML code.
The feature will not take affect for the elements such as buttons as those are controlled using their individual options.
If you created a button and want to have that for all other use cases of the button element, you can simply make a preset out of that button and use that as the starting point. Kindly click here for more information:
You will not be able to set the link transparent from the Theme Options and force it to the button elements.
Thank you for your understanding.
Hi @christopher,
Fine, but I don’t think that we’re on the same page here. I just want my links in text (not buttons!) to be the same color as the rest of the text in that text element - but with a line below that shows that this is a link. So… if I use black text I also want the link to be black - but with an underline, if the text is white I also want the link to be white etc…
Hi @Kobber,
On the custom CSS code provided by Jade above, you can add a color property to change the color of your inline text link.
If you have a multiple text/link colors, then you need to apply that custom CSS in Element level (see element CSS feature here)
Or you can set the Theme Options > Typography > Site Links the same color as your content text (unless you’re using multiple colors on your content text).
Do not set that to transparent, inline text link, and theme, and plugins generated links with no color option rely on that setting.
Hope that helps,
Cheers.
I’m giving up… it seems like you don’t understand it.
I do not want to add a color property, and I do not want to change the color at all (<- that’s the point!). I want my links to have no other color than the rest of the text in a text element. I want links to have a line below the link instead of a color.
I other words, I want the Theme Options > Typography > Site Links to be “bypassed”, because - yes I use multiple colors.
Hey @Kobber,
To your concern:
All content links get the color from Theme Options > Typography > Site Links so what you want is not possible without using custom CSS. If you want to target links within Text elements, you need to use the Text element’s class x-text so your CSS will be like:
.x-text a {
color: black;
text-decoration: underline;
}
For specific Text elements, you need to use the Element CSS and your code should be like
$el a {
color: white;
}
Just note again that this is a developer-level instruction so if you haven’t already, you need to learn CSS and learn using the browser’s element inspector so you can get the selectors you need.
Hope that helps.
As mentioned, learning the basics of CSS will do you wonders for small customizations like this. In your case, simply set the color to inherit in the rule given above.
.entry-content.content a:not(.x-anchor-button) {
text-decoration: underline!important;
color: inherit;
}
This will apply to the bulk of your links present in simple text blocks. Setting a color to the text block will change both the text and the anchor inside it.
@michaelbourne - that was exactly what I was going for. Thanks! I am in the process of learning CSS, but I couldn’t figure this one out ;-).
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.