[Support request] Change markup color

Home Forums Support Change markup color

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1464488
    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?

    #1464497
    Elvin
    Staff
    Customer Support

    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?"

    #1464501
    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?

    #1464526
    Elvin
    Staff
    Customer Support

    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?"

    #1464903
    nik9

    Thank you! Now it’s working πŸ™‚

    #1465864
    Elvin
    Staff
    Customer Support

    Nice one, no problem! πŸ™‚

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

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