Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 6, 2017 at 2:14 am #872894
    ccyran

    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!

    November 6, 2017 at 1:24 pm #873039
    Rikard

    Hey ccyran,

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

    Best regards,
    Rikard

    November 6, 2017 at 6:09 pm #873233
    ccyran

    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

    November 6, 2017 at 10:56 pm #873398
    Nikko

    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

    November 7, 2017 at 6:42 am #873558
    ccyran

    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 ago by ccyran.
    November 9, 2017 at 10:51 pm #874859
    Basilis

    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

    November 9, 2017 at 10:53 pm #874862
    ccyran

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

    November 11, 2017 at 9:17 pm #875592
    Mike

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

    Best regards,
    Mike

    November 11, 2017 at 9:21 pm #875593
    ccyran

    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;
    }

    November 12, 2017 at 3:19 pm #875747
    Mike

    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

    November 13, 2017 at 3:54 pm #876143
    ccyran

    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

    November 15, 2017 at 3:42 am #876891
    Mike

    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

    November 20, 2017 at 1:25 am #878931
    ccyran

    Hey Mike,

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

    Thanks!

    November 20, 2017 at 5:34 am #878967
    Nikko

    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

    November 20, 2017 at 5:46 am #878973
    ccyran

    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!

    November 20, 2017 at 6:24 pm #879267
    Nikko

    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

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