-
Posts
-
Hi guys!
I was able to decorate the hyperlinks as I wanted them but I need help so the CSS only applies to the hyperlinks and not the image links (hover on the image and then move towards the text – an underline will appear), and/or Enfold buttons (with the theme color get overridden and replaced with the new colors) and/or any other type of link that may appear on the body. Basically, I want this CSS to be applied only on blog posts plain text hyperlinks.
I had to emphasize the hover behavior as it would get overridden by the underline one.
What am I missing?
/*underline links body*/
.entry-content a {
color: #000 !important;
border-bottom: 2px solid #e06;
}
.entry-content a:hover {
color: #6e9e9a !important;
text-decoration: none !important;
border-bottom: none !important;
}Here’s one page where you can see it in action: https://argen-travel.com/argentina-pizza/
Thank you!!!
Havi
Hey havi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/*underline links body*/ #top.single-post .entry-content a { color: #000 !important; border-bottom: 2px solid #e06; } .entry-content a:hover { color: #6e9e9a !important; text-decoration: none !important; border-bottom: none !important; }Best regards,
VinayHi Vinay!
It did not work. It actually made it worse as the social media icons are not underlined (and the aviation button is too) constantly and the text is black.
Best,
Havi
Hey Vinay,
I removed the “important” and it is not changing the social media icons to black now but it still added the underline and it wasn’t doing so before. Also, the avid button cannot be switched to white font (even manually) I tried.
So now it’s this:
/*underline links body*/
#top.single-post .entry-content a {
color: #000;
border-bottom: 2px solid #e06;
}
.entry-content a:hover {
color: #6e9e9a !important;
text-decoration: none !important;
border-bottom: none !important;
}But my previous one worked better. Still underlining images and affecting Avia buttons.
Hope you can find a solution.
Help is much appreciated as this will increase readership and conversions!
Havi
Hi,
#top.single-post .entry-content a {
color: #000;
border-bottom: 2px solid #e06;
}
.entry-content a:hover {
color: #6e9e9a !important;
text-decoration: none !important;
border-bottom: none !important;
}
#top.single-post .entry-content img a,#top.single-post .entry-content button {
color: #000;
border-bottom: none !important;
}Let us know if that fixes the issue for you
Best regards,
BasilisHi Basilis!
I just replaced the CSS code with yours (I even changed the #000 for the button to #fff as it should be) and it’s not working.
The Avia buttons should look and behave like these ones: https://bodasyweddings.com/ (no matter what color is chosen, the font is white even on hover) and no border (on hover or not)
And the images and icons should not have a border (on hover or not)
#top.single-post .entry-content a that applies to both the button title and the regular links on the body. If you change it to white, the hyperlinked body text disappears (turns white) Is there a way to split this behavior? (same with the border bottom?)
Thank you!!
Havi
Hi Basilis!
I fixed the button with this CSS code but I am unable to fix the image piece. (adding #top.single-post makes things worse) At least we have one more piece solved… All we are missing is to stop the images (and sliders) from showing the bottom border.
/*underline links body*/
.entry-content a {
color: #000 !important;
border-bottom: 5px solid #e06;
}
.entry-content a:hover {
color: #e06 !important;
text-decoration: none !important;
border-bottom: none !important;
}
span.avia_iconbox_title {
color: #fff !important;
}I also tried adding this code but it didn’t work :(
#top .wp-caption img {
border: medium none;
display: block;
padding: 5px;
margin: 0;
width: 100%;
border-bottom: none !important;
}Hi,
To remove the bottom border from the images, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:.entry-content a img { border-bottom: none !important; }Best regards,
MikeHi Mike,
I think I had already tried that. It’s added and the bottom border still shows. I also tried to apply it to the Hover and Visited states and cannot make it go away.
Best,
Havi
Hi,
When I look at your site the images no longer have the bottom border, please try clearing your browser cache.
As a side note, since you wanted to only have the border on your text links, I would have recommend writing your css like this, with the “p” paragraph in the rule. But there are many ways to do this, and it seems that you have it under control now./*underline links body*/ .entry-content p a { color: #000 !important; border-bottom: 5px solid #e06; } .entry-content p a:hover { color: #e06 !important; text-decoration: none !important; border-bottom: none !important; }Best regards,
MikeHi Mike,
Hover down any time and the border will appear. I cleared the cache many, many times. Tried several browsers and they all show the same bar as before once you hover down on them.
If I replace my CSS with yours above, will this wacky behavior stop happening?
Best regards,
Havi
Hi Mike!!
I tried your code and it works to perfection!!! Only applies to the text!! Thank you!! Thank you!!! Thank you!!!
Havi
Hi,
That is great news! unless there is anything else we can help with on this issue, shall we close this then?Best regards,
Mike
- The topic ‘Links Decoration CSS Help Needed’ is closed to new replies.