Hi!
I’ve changed the styling of my links in the body text of my website and also on the pages.
I would also like to change the styling of the links in the sidebar and in elements as the newsletter signup thingy. However, I don’t know how to do that. If I try to change those links, all the links on my site change, also the titles on the homepage and the menu titles, et cetera.
How can I change the styling of the links in separate elements without changing them all?
See for example this post ->
https://www.fuckdiestudieschuld.nl/studieschuld-wat-is-normaal/
-> I would like to style the links in the sidebar elements and also in the newsletter element at the end of the post.
Thank you!
Maaike
Update: I would also like to change the styling of the link to the privacy page in the comment section. Also, the word that is a link is somehow placed a bit lower than the rest of the text? Odd. How can I fix this?
Hi,
Please try this custom css -> http://prntscr.com/pylxus
.tdb_single_comments a, .tdn_block_newsletter_subscribe a {
color: #000000;
text-decoration: none;
box-shadow: inset 0 -0.5em 0 0 #ffff00;
}
The code need to be set in Theme panel> Custom code> Custom css
Hope this will help!
Thank you!
Yes, that works perfectly, thank you! 🙂
One thing, the word ‘privacyverklaring’ is pushed down a little bit now that it is a link.
See here, below in the comment section: https://www.fuckdiestudieschuld.nl/studieschuld-wat-is-normaal/
Any ideas how I can fix this?
Thanks!
Hi,
So you do not want the effect on this element -> http://prntscr.com/pyyc0h ? if yes then replace the above custom css with this one
.tdn_block_newsletter_subscribe a {
color: #000000;
text-decoration: none;
box-shadow: inset 0 -0.5em 0 0 #ffff00;
}
Thank you!
No, I do want the effect, that’s not it.
Look closely at the link in the comment section. The word that is linked (privacyverklaring) is somehow placed a tiny bit lower than it should be. (You can see it more clearly if you select the sentence.)
I have no idea why.
How can I fix this?
Thanks!
Hello !
Please try this css code:
.comment-form-cookies-consent a {
vertical-align: unset;
}
Let us know the result !
Thank you !
That worked, thank you!
I tweaked it a bit. The editor told me it wasn’t expecting unset as a property. I tried using baseline and that worked as well, and now the CSS editor is happy too.
🙂
Oh, a quick follow up question.
When I’m logged in, the two links at the top of the comment section (‘logged in as …’ and ‘logout’) are still styled a bit odd.
There is a yellow line, however, when hoovered the text becomes red. It should stay black.
Any thoughts?
Thanks!
Maaike
Hello !
Please make sure that your users see those links, we couldn’t find it on your website.
Thank you !
Well, it’s only viewable if you’re logged in. Is there a way for me to post an image here?
Hello !
Sure, in order to post an image here just click on this button and insert the link: https://www.screencast.com/t/wazEX68H
Thank you !
Ah, thanks.
Here, look at this.
https://imgshare.io/image/knipsel.hEQpl
If I hoover over the link (as I am doing in the image), the text becomes red. I would like it to stay black.
The rest of the site is doing that just fine, only this comment section is mixed up.
Thanks for your help!
Hello !
This code should do the trick: .td_uid_58_5dde403e18cf2_rand .comment-form .submit {
background-color: #222222;
}
I hope this was helpful !
Thank you !
Hi! Unfortunately, that doesn’t work. The words still become red when hovered.
Hello !
Sorry, that is for the button in the comment section. Please provide a direct link to that phrase you want to provide a css since I cannot find it.
Thank you !
Will do!
Here are some examples of links that still turn red when hovered ->
– https://www.fuckdiestudieschuld.nl/studieschuld-aflossen-stappenplan/#comment-21
– https://www.fuckdiestudieschuld.nl/studieschuld-aflossen-stappenplan/#comment-23
– https://www.fuckdiestudieschuld.nl/wp-admin/profile.php
– https://www.fuckdiestudieschuld.nl/wp-login.php?action=logout&redirect_to=https%3A%2F%2Fwww.fuckdiestudieschuld.nl%2Fstudieschuld-aflossen-stappenplan%2F&_wpnonce=caa927c9ba
I would like the text to stay black when hovered.
Thanks!
Maaike
Hi,
I think that you can achieve this in two ways, you can edit the single post template with tagDiv Composer and change the accent color for single post comments -> https://i.imgur.com/Dy78aAT.png or you can do this with custom css -> https://i.imgur.com/qHfEFRa.png
.tdb_single_comments a:hover, .tdn_block_newsletter_subscribe a:hover {
color: #000;
}
Hope this will help you!
Thank you!
It works, hurray! Thank you!
One follow up question, if that’s OK.
The word ‘bewerken’ (Dutch for ‘edit’) is a link. However, the link is too long. There is a white space before the word that also becomes part of the link. Any thoughts on how I can fix this?
Thanks!
Hi,
Sorry, i can not find the word “bewerken” on your website, maybe I need to be log in to see it, or to let a comment, like this -> https://i.imgur.com/cgw4yFd.png is si so please provide some screenshots with the problem, in this way I will be able to recreate it and make a fix.
Thank you for your understanding!
See here. The yellow line starts before the word bewerken.
Hi,
Please try this custom css
.comment-edit-link {
padding-left: 0px;
margin-left: 10px;
}
Hope this will help you!
Thank you!
That works, awesome! 😀
Is there a similar solution for the date link as well? (The link just to the left of it?)
Hi,
Yes, there it is -> https://i.imgur.com/T2TM9U2.png the code is just like the one from above, and need to be set on anther classes
.comment .comment-link {
padding-left: 0px;
margin-left: 10px;
}
Hope this will help you!
Thank you!
Yes! Thank you! 🙂
