Change markup color

[nik9]

Hello,

I’m trying to change the markup color in GP with this CSS here:

::selection {
  background: #ffcd05; /* WebKit/Blink Browsers */
  color: white;
  text-shadow: 0px 0px 90px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff;
}
}

::-moz-selection {
  background: #ffcd05; /* Gecko Browsers */
  color: white;
  text-shadow: 0px 0px 90px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff;
}
}

This is working. However, I want it more modern. In private note you have a page on which the markup is very cool. The marked text is white and is looks a little shiny: https://ibb.co/xhJLv2n

I’m not able to get the same style. Is this theme related or just a CSS trick?

[Elvin]

Hi,

I want it more modern.

Can you explain a bit more?

I’ve checked the page you added and the ::selection css properties is basically this:

body ::selection {
    color: var(--selectionTextColor);
    background-color: var(--selectionBackgroundColor);
}

Which translates to this if we take the var values from :root assigned by elementor.

body ::selection{
color: #ffffff;
background: #ffcd05
}

I’ve not sure what you mean by “little shiny”. The image provided and the actual page only had background-color and text color settings.

is this possible with GP?

Yes. You just have to add the CSS.

A wise man once said:
"Have you cleared your cache?"

[nik9]

Hey Elvin,

Now I use this CSS here on my page: (URL in Private info)

::selection {
  background: #ffcd05; /* WebKit/Blink Browsers */
	  color: white;
text-shadow: 0px 0px 90px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff;
}

::-moz-selection {
  background: #ffcd05; /* Gecko Browsers */
	  color: white;
text-shadow: 0px 0px 90px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff;
}

The marked text on the mentioned page look like that there is shadow or something on it.
Is it possible that there is some other stuff, which styles the marked text this way?

[Elvin]

The marked text on the mentioned page look like that there is shadow or something on it.

Ah, that’s not a shadow. It’s the background-color from the first line overlapping with the background-color on the second line.

You can actually see that on your page also, If you increase the line-height to a level where the text backgrounds won’t overlap, you won’t see this “shadow”.

Here’s a demo video about it on your site. – https://share.getcloudapp.com/nOunBe6y
Here’s another demo video on your reference site – https://share.getcloudapp.com/L1uQxpKO

As for the text-shadow:

To fully replicate your reference, place the text-shadow css on the text itself instead of ::selection

If you inspect the reference site, you’ll see that the text-shadow is actually applied on the headings. (they’re pretty subtle.)

A wise man once said:
"Have you cleared your cache?"

[nik9]

Thank you! Now it’s working 🙂

[Elvin]

Nice one, no problem! 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts