Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #872894

    Hey guys,

    Is there a quick CSS way to highlight text like this:

    For enfold, the way this highlights text
    http://www.dmulvaney.com/new-york-times-magazine-open

    Thanks!

    #873039

    Hey ccyran,

    Thanks for the link, though I’m not sure which text you are referring to?

    Best regards,
    Rikard

    #873233

    Hey Rikard,

    Scroll down till you get to the body copy, and try to highlight it. I like the effect where the text turns white, instead of creating that background highlight.

    Thanks!
    Chris

    #873398

    Hi Chris,

    You can add this css code in Quick CSS (located in Enfold > General Styling):

    ::selection {
      background-color: #fff;
      color: #f00;
    }
    
    ::-moz-selection {
      background-color: #fff;
       color: #f00;
    }

    Just change the background color and the color. Hope this helps :)

    Best regards,
    Nikko

    #873558

    Hey that works!

    But there’s one strange problem. My website background color is #060606. In the CSS I made the background color also #060606. But when you highlight the text, the background color is #010101.

    Any ideas to fix it? Thanks!

    Screenshot for reference:
    https://ibb.co/m8icCb

    (its very subtle)

    • This reply was modified 7 years, 1 month ago by ccyran.
    #874859

    Hi,

    Try the pseudoselector who is responsible for that
    https://www.w3schools.com/cssref/sel_selection.asp

    and let us know if that will work

    Best regards,
    Basilis

    #874862

    Hey Basilis, sorry Im a bit confused :/. Not sure what to do with that link.

    #875592

    Hi,
    Try that code in the General Styling > Quick CSS field
    2017-11-11_141324
    2017-11-11_141514

    Best regards,
    Mike

    #875593

    Still no luck guys.

    My background color on my website is #060606. So I don’t understand why when I use the exact hex value, it’s a different background color when selecting the text.

    ::selection {
    background-color: #060606;
    color: #ffffff;
    }

    ::-moz-selection {
    background-color: #060606;
    color: #ffffff;
    }

    #875747

    Hi,
    Odd, I went to your about page and found no change in your text when selecting it, which is what I think you are trying to achieve. I found in your footer the text is gray so when selecting it the text changed to white.
    20876e0d67b6ccae73f377b6270426d6.jpg
    Perhaps you need to clear your cache to see the change?

    Best regards,
    Mike

    #876143

    Hey Mike,

    here’s a screenshot of what Im referring to. And this is happening wherever you try to highlight something on my page.

    I blew up the highlights so it’s easier to see the difference. See the black area that appears?
    https://ibb.co/jbn23G

    Best,
    Chris

    #876891

    Hi,
    I do see the black area in your screenshot, or the different shades of black from highlighting. But I don’t get that on my screens, I’m using the “sRGB IEC61966-2.1” color profile, and I tested in Chrome, Firefox, & Edge on Windows 10. If I recall correctly your using iOS, Perhaps your color profile has to do with this? I know your an art director, do you have a better color profile than mine, or is this not an issue? I’m not sure, your background & selected background are matching the same color code in my developer tools. Please confirm OS and browser and we’ll get someone with the same to take a look.
    Thanks for your patience.

    Best regards,
    Mike

    #878931

    Hey Mike,

    The issue is only happening in Safari! Sorry I didn’t mention that earlier. Any idea why thats happening?

    Thanks!

    #878967

    Hi Chris,

    I checked in both Chrome and Safari and highlighting on white text doesn’t change anything but on text that isn’t white turns to white when highlighted.

    Best regards,
    Nikko

    #878973

    Hey Nikko,

    Thats correct, thats how i want it to work.

    the issue is that highlighting grey text should turn white with no background color change. background should say #060606.

    but when browsing in safari, there is a background change. of #00000.

    you can see this in the screenshots i provided.

    Thanks!

    #879267

    Hi Chris,

    Sorry I couldn’t really see it but can you try to use !important, it might help:

    ::selection {
      background-color: #060606 !important;
      color: #ffffff;
    }
    
    ::-moz-selection {
      background-color: #060606 !important;
      color: #ffffff;
    }

    Best regards,
    Nikko

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.