Unable to see text after selecting it
-
Whenever I select text on my website, instead of showing up underneath the text highlight, it just makes my text disappear. Is there any way to change the selection highlight color?
WP.com: Yes
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Hello there,
That sounds interesting.
Are you able to tell me the name of the post you’re working on please?
This will help us to try and replicate the behaviour you’re experiencing.
-
Hello there,
That sounds interesting.
Are you able to tell me the name of the post you’re working on please?
This will help us to try and replicate the behaviour you’re experiencing.
-
Hey hi hello!
Is https://theholefrom2001.wordpress.com/ your site?
If so, it seems that your text highlighting color is the same color as your background, making it look like your text disappears! To fix this “illusion”, you can either change the color of your text-highlighting, or you can change your background.
For your case, I recommend Steps 1A and Step 2:
1. To change the color of your text highlighting…
A. Edit your Theme’s settings
1. First, access your site’s dashboard by clicking “My Sites” at the top left while you’re in a wordpress.com page, or by using this link:
wordpress.com/sites (and then select your site)
2. At the bottom left, hover over “Appearance”
3. Select “Customize”4. From here, your options depends on your Theme. I’m not sure what Theme you’re using, so I’m afraid I can’t suggest precise advice. If there is a “colors & backgrounds” section, this might be it!
B. Use custom CSS
1. Firstly, this requires the purchase of the Premium Plan or above.
2. Using the same steps above, go to Dashboard > Appearance > Customize
3. Select “Additional CSS”
4. Copy and paste the following CSS:::selection {
background: red;
}You can replace “red” with any color you’d like. If you google “color picker”, you can use a color chooser tool. Simply select your desired color, copy the hex code under “HEX”, and replace “red” with your hex code.
For instance,
::selection {
background: #4287f5;
}There are some caveats to using code that isn’t more “specific”, which I’ll explain if you choose to use Additional CSS. (which, again, requires a Premium Plan)
2. To modify your background…
1. Access your site’s dashboard by clicking “My Sites” at the top left while or using this link below:
wordpress.com/sites (and then select your site)
2. At the bottom left, hover over “Appearance”
3. Select “Customize”
4. From here, you’ll most likely have a “Backgrounds” optionI hope this helps!
-
Unfortunately, I don’t have the premium plan at the moment and my theme editor doesn’t have an option to change the text selection color. I tried messing with some of the text and color options but nothing’s resolving it. Thank you anyway.
-
@theholefrom2001 – it looks like you’re using a block theme that allows you to set link colors in the Site Editor.
Looking at your site now I’m seeing your links set as a light blue – are you still having this issue? If so, let us know what isn’t working and we can take a closer look. People designated as Staff can view your site’s backend and can view posts or pages that aren’t published yet.
Let us know if you still have trouble!
-
Yes, I’m still having the issue. I figure unless I upgrade to premium and gain access to the CSS, I can’t do much to fix it. Do link colors impact the text selection colors?
-
Without seeing the problem in question, we can’t advise whether or not you need to upgrade to a plan that lets you use CSS. It’s quite possible that we can change this without an upgrade – but we need to see what you’re seeing in order to advise one way or the other.
Let us know if you have any concerns.
-
I’m trying to make it so that when I highlight my text, the text underneath doesn’t disappear. I added some links to images of what my problem is.
What I see
What happens when I highlight the text with my cursor -
@staff-heroponriki In case it means anything, when I open their page (https://theholefrom2001.wordpress.com/) and open my browsers’ dev tools, I’m able to solve the problem on my end by changing
::selection {
background: var(–wp–preset–color–foreground);
color: var(–wp–preset–color–background);
}into (for example)
::selection {
background: #02ff1e66;
color: #f5bf3d;
}(Which reminds me, I see that I excluded “color” in my above instruction; my apologies for that oversight.)
In any case, I imagine this can be rectified without a plan upgrade. I thought surely there must be an option somewhere in Appearance > Customize, but it seems it’s not quite apparent so that’s curious!
-
To further illustrate, this is what I see after using the aforementioned CSS.
To be sure, is this roughly along the lines of your desired outcome, @theholefrom2001 ?
-
-
Thanks for confirming!
If you’d like me (a volunteer) to replicate the matter on a test site and hopefully find a solution, I’ll need to humbly request the name of your website’s Theme. This is mainly for if you wish to have the matter (potentially) resolved right away.
Otherwise, if you’d prefer a sure-hit and beautiful solution, you ought to ignore my offer and simply wait for the next Staff response!
Either way, thank you so kindly for your grace and patience.
-
Sorry, I should’ve mentioned that earlier. The theme I’m using is called “Disco” by Automattic.
-
No no, that’s on me for not asking you from the very beginning! Thank you kindly.
I’ll look into it right this second and report back as soon as I can. Be right back!
-
Hello, I’m back!
I see where the confusion stemmed from! It was a bit baffling at first, but I’ve figured it out. It seems that the text-highlighting color is linked to the Theme’s foreground color.
As such, to customize the text-highlighting colors…
1. Access your Dashboard (by clicking “My Sites” at the top left, or by going to https://wordpress.com, or going to wordpress.com/sites where you then select your site)
2. At the bottom left, hover over “Appearance”
3. Select “Editor”
4. From here, at the top right, you will notice several icons. Select the one I’ve highlight here:
https://imgur.com/a/HtsCFHB
(To describe it, it’s the circle that’s half black and half white)5. Select “Colors”
6. Select “Palette”7. Next to “Theme” are three dots (vertically aligned); click those dots
8. Select “Edit colors”
9. Adjust the “Foreground” color to preference
10. Save!Do please let me know if this is what you were looking for. All that said, I sincerely hope this helps!!!!
-
Wow, thank you so much. That worked perfectly. I didn’t realize the theme colors did anything different. I seriously appreciate it!
-
That’s a relief! I’m glad it worked out. I suppose that settles it, then!
Once again, thank you for your patience. If anything else comes up, feel free to post your inquiries in these forums and we’ll be happy to help!
Until then, take care and best wishes!
- The topic ‘Unable to see text after selecting it’ is closed to new replies.
WordPress.com Forums 