Change Colour of Text Highlight (CSS Help!)

  • Resolved chieftruthful

    (@chieftruthful)


    4 years ago

    Hi all!

    I’ve recently been customizing a theme to my liking by adding CSS. The theme came with a purple colour scheme, so lots of elements were in this colour.

    I have managed to change most elements that were in purple to my preferred colour scheme so far, except for when text is highlighted. I thought I fixed things by adding the following CSS to the ‘Additional CSS’ section:

    p::-moz-selection { background-color: #00CA12}
    p::selection { background: #00CA12; }

    This did fix most highlighted text. However, there are still some text elements that are showing up in purple – it seems to be when hyperlinks are highlighted, as well as any italicized/bold text. Please refer to my web site for more info.

    I’m still learning, so if someone could please let me know what CSS I could implement to fix this and get all highlighted text showing up as the green colour, that would be great! Many thanks & have a good one,

    – C

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Gyan Gaurav

    (@gyan-gaurav)

    Hi, Please post screenshots of page/content where you need help.

    I looked at your website though, it seems you need to have below code in your style.css somewhere. 

    ::selection {
	background: #00CA12;
}
    Thread Starter chieftruthful

    (@chieftruthful)

    Hey Gyan! Thanks for your reply! Here’s a screenshot of what I’m referring to:
    https://ibb.co/4FvBm56

    The CSS you have quoted there is for the Menu background that shows up when the site is viewed on mobile. #00CA12 is the green colour I’m trying to change all the purple to. It’s the highlighted text shown in my screenshot that I’d like changed from purple to green.

    Hope this makes sense!

    ??

    Gyan Gaurav

    (@gyan-gaurav)

    The css was supposed to do that for every selection. If you need it for contents you have selected. There is an em element. so to handle that specifically you can try putting. 

    em::selection {
    background: #00CA12;
}

    see the screenshot below:

    https://ibb.co/WvcNnTX

    Thread Starter chieftruthful

    (@chieftruthful)

    Hey Gyan, that is amazing, incredibly helpful, thank you! I just implemented that now. I also managed to find some more stuff out using Inspect. Slowly learning more about CSS!

    I really appreciate your time. Cheers ??

    Gyan Gaurav

    (@gyan-gaurav)

    You are welcome! Cheers

    Thread Starter chieftruthful

    (@chieftruthful)

    Hi all, I need some further help! When viewed on a tablet or smartphone, the navigation menu is Purple… I actually previously changed this CSS to green which worked well, however for some reason it’s gone back to purple again! I haven’t changed any CSS related to the navigation menu though…

    Here is a screenshot with highlighted sections to show you that the CSS doesn’t seem to be working:
    https://ibb.co/n6mfVsc

    Any one have any ideas? Many thanks,

    – C

    As you can see in the screenshot you pasted CSS is written different for different device sizes. You need to find all the responsive css written there and change it accordingly.

    Read more about CSS @media Rule
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Thread Starter chieftruthful

    (@chieftruthful)

    Thanks Gyan, after some further frustration, I realised that it does matter which order CSS is in – I just changed around some of the order and things are now working nicely!

    Cheers ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change Colour of Text Highlight (CSS Help!)’ is closed to new replies.