Hello,
I am trying to change the highlighting options for when a cursor is moved over a piece of text which has a link inserted. However, when I had published a post, and selected the Today News Pro template, the text highlight went away entirely. when I hover over linked text now, it looks the screenshot:
https://snipboard.io/hQ3tP7.jpg
How to highlight linked texts? How to change color of the tags and author name and stuff like that with the Newspaper Theme.
Thank you.
Regards.
Hello!
In order to avoid misunderstandings, please provide more information about what exactly you need to achieve, screenshots or a video and your website link. Please be more specific. Some demos have specific colors for those links, which may interfere, but you can change them from the TagDiv Composer.
A solution for sending a screenshot/video is this:
Download, capture, send: https://www.techsmith.com/jing-tool.html
After making the screenshot, you will have a link, paste it here.
Thank you!
Hello,
https://snipboard.io/npzAci.jpg
See the color of the author name is different from the other text. I want to do the same for some of the text in the content on the blog post.
In the Gutenburg editor, when you insert a link in a phrase or text it changes color like below:
https://snipboard.io/130cks.jpg
However, when the template is selected, the colors are reverted to like how it is for the other text. https://snipboard.io/PmoYpE.jpg
I want to give text with any such inserted links in the body of the blog post a separate color. Otherwise, visitors will be unable to distinguish them from normal text.
For example, this is an article by gamerant https://snipboard.io/JMTp9V.jpg . Notice that when you hover over a text with inserted link, it highlights up. I want a similar effect or maybe just a different color by default.
Regards.
Hello!
The author’s name color can be changed when you edit the article with the TagDiv Composer: https://prnt.sc/-mdLAB2xczSI
Click on the text and there you can change the link color: https://prnt.sc/mH-bwh9HsFeI
Check the code for a nice highlighted link in the post content in this topic: https://forum.tagdiv.com/topic/want-to-implement-this-hyperlink-effect-in-posts/
Thank you!
Hello,
I pasted the following CSS for the highlighted links:
.td-post-content a {
text-decoration: none;
color: #000!;
font-weight: 700;
position: relative;
}
.td-post-content a::before {
content: “”;
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
z-index: -1;
transition: all .3s ease-in-out;
}
.td-post-content a:hover::before {
bottom: 0;
height: 100%;
}
However, I am facing a different problem now. All the hyperlinks are not being highlighted. Sometimes, the ones that are not underlined and highlighted on desktop devices are underlined and highlighted on mobile devices.
For example:
Link: https://wirefray.com/tarantula-nebula-spider-silk-spotted-by-webb-space-telescope/
Desktop:
https://snipboard.io/X14uw7.jpg
See the red lined part
Mobile:
https://snipboard.io/sXgAB7.jpg
See the red lined part.
I think the problem arises when the hyperlinked text goes on till the next line.
Please tell me know how to fix this. Also, let me know how to tryout different colors for the underline and highlighting.
I have a question, please refer to the image I provide from the mobile device. See, that the font is different from that shown on desktop devices. The text font seems bolded and appears to use a different font.
I want everything to show up like it does on desktop. I even tried copying the desktop theme for mobile devices but it yielded no results.
Please answer these questions separately for each problem so that it is easy to understand.
Thank you.
Regards.
Hello!
You need to inspect your website on desktop and mobile, so you can see what the problem is there. Also, it could be a plugin conflict or a cache issue because this code is working well on my end.
If you want to try different colors, then you need to replace the color in the code.
When I access your mobile version on my desktop, it is not loading at all, but on my phone it is loading perfectly. So, unfortunately, I can not inspect your mobile version.
I see that your mobile version resembles the desktop version on a mobile device.
Thank you!
Hello,
No. The code is not working well.
The issues I talked about, I check them out in each and every device I could get my hands on. I said clearly when the piece of text with the hyperlink is split between two lines, i.e. broken off at the end of one line, the underlining and highlighting do not show up.
The exact CSS that I had pasted in the CSS is:
.td-post-content a {
text-decoration: none;
color: #000!;
font-weight: 700;
position: relative;
}
.td-post-content a::before {
content: “”;
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
z-index: -1;
transition: all .3s ease-in-out;
}
.td-post-content a:hover::before {
bottom: 0;
height: 100%;
}
Please see the following images:
https://snipboard.io/ZUOugB.jpg
The underline did not appear when the phrase was split.
https://wirefray.com/tarantula-nebula-spider-silk-spotted-by-webb-space-telescope/
Check out the following post:
https://wirefray.com/best-faucet-water-filter/
Here all the headings in the articles have an inserted link. Notice in the headings for 1 and 2 split over two lines show an unusual type of highlighting only for the first and last word.
https://snipboard.io/6aiomn.jpg
Please tell me how to fix this.
Thank You.
Regards.
Hi,
I don’t know exactly if something can be done for these situations, because the css is applied as a backend after the link, it is not applied directly on the link.
If you want you can try this for H2 titles
.td-post-content h2 a {
text-decoration: none;
color: #000!;
font-weight: 700;
display: block;
}
.td-post-content a::before {
content: “”;
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
z-index: -1;
transition: all .3s ease-in-out;
}
.td-post-content a:hover::before {
bottom: 0;
height: 100%;
}
Hello,
Thank you.
However, even if this CSS worked for H2 headings. The problem would still persist for any other hyperlink texts that are present throughout the content.
Thus, I would request you to give me a singular solution. I will paste it on my live CSS and if it doesn’t work I will let you know.
Thank you.
Regards.
Hello,
This is not a link hover option, is an extra custom css that is apply on ::before not on the link.
Unfortunately, for the links that are like this https://snipboard.io/ZUOugB.jpg there is nothing that can be done for this extra custom cs hover, (the css will apply only if the words on the link are on the same line).
If you want to use the normal option that has underline for hover on the link, (the option that is the theme) then this will work without problems.
Thank you for your understanding!
