Archived topic
Text link underline
10 replies · Started by Dev on August 7, 2021
Hello,
In my blog post, I want my hyperlinked text like this - https://prnt.sc/qeg9ok
For that, I use this CSS. But it is not working. Can u please tell me the correct CSS.
body:not(.blog):not(.archive) .inside-article a {
font-weight: bold;
}
body:not(.blog):not(.archive) .inside-article a:hover {
text-decoration: underline;
}
Hi there,
That CSS us working, i can see the link is Bold and the underline appears when the link is hovered.
Have you cleared your browser caches ?
Hello,
Please see this image. http://prnt.sc/1kycego
And I want that underline only to get applied to my post and pages texts. Not any other place.
Please this query of mine. Both are related to each other.
https://generatepress.com/forums/topic/link-color-settings-2/#post-1887820
.
Remove your current CSS.
And try this:
.single .inside-article p a {
font-weight: bold;
text-decoration: underline;
}
Hello,
I don't want the text to get bold. I only need an underline and I told u that my color settings are getting override. Please see this image. http://prnt.sc/1l541xb
You just need to remove the font-weight: bold; property from the CSS i provided.
And the color is Red when i visit your site. You can change the link color in Customizer > Colors > Content.
Thanks, but I think I'm not making it clear to you.
First, my breadcrumbs text is also getting underline due to the above CSS see this image - http://prnt.sc/1l5kksp
Second, for my blog to readmore text I'm using the below CSS and in that CSS color code (blue) is also there. Now the problem is when I'm making my post or pages link color red, it is overriding the Readmore color. It Means the blog Readmore text color also gets red, which I don't want.
@media (min-width: 769px) {
.blog .inside-article, .archive .inside-article{
display: flex;
flex-wrap: wrap;
}
.blog .inside-article .post-image, .archive .inside-article .post-image {
width: 40%;
}
.blog .inside-article .entry-summary, .archive .inside-article .entry-summary{
width: calc(60% - 42px);
}
.blog .inside-article header.entry-header, .archive .inside-article header.entry-header{
width: 100%;
}
.blog .inside-article a.read-more, .archive .inside-article a.read-more {
margin-top: auto;
margin-bottom: 0;
}
.blog .inside-article .entry-summary p, .archive .inside-article .entry-summary p{
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
}
.read-more {
margin: 20px 30px;
float: right;
border-bottom: 2px solid rgba(35, 117, 214, 0.4);
}
Try this CSS instead:
.single .inside-article .entry-content p a , .page .inside-article .entry-content p a {
text-decoration: underline;
color: #ab262b;
}
For the read more link, it's using the color set in the customizer, I don't see specific CSS added for it.
Hello,
For Readmore text you and David gave me the CSS here, check this link. - https://generatepress.com/forums/topic/read-more-text-on-right-side-with-hover-effect/
To make things simple. Please tell me how I can make my Readmore text of this color - #1b60a1
Hi Dev,
I've checked your site's CSS and you're actually half-way there.
There's a syntax error with this CSS:
.read-more {
margin: 20px 30px;
float: right;
border-bottom: 2px solid color: #1b60a1;
}
Here's a corrected version.
.read-more {
margin: 20px 30px;
float: right;
border-bottom: 2px solid #1b60a1;
color: #1b60a1;
}
Or remove border-bottom: 2px solid #1b60a1 if you don't want the underline anymore.