[Resolved] How to Highlight Marked Text With Background Color

Home Forums Support [Resolved] How to Highlight Marked Text With Background Color

Home Forums Support How to Highlight Marked Text With Background Color

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1643537
    Felix

    Hello Team GP,

    I am using the stream-layout and currently, if I mark a text, the letters are highlighted yellow according to class=”gb-highlight”, which does not look so good on a white background.

    Hence, I would like to add a colored background with slightly curved edges, when I mark a text.

    Could you help me out with the according CSS?

    Much appreciated!

    #1643590
    Ying
    Staff
    Customer Support

    Hi Felix,

    You could try this CSS to add a background color to highlighted text:

    mark.gb-highlight:before {
        background-color: #4fd4e7;
        position: absolute;
        display: inline-block;
        top: 30%; /*adjust it for re-positioning*/
        left: 0;
        right: 0;
        z-index: -1;
        height: 75%; /*adjust it for box height*/
        content: "";
    }

    It will give you a rectangular look of background box. The example page is adding 2 background image to it, are you sure you want to go with this way?
    https://www.screencast.com/t/GHFxsDYo

    Let me know ๐Ÿ™‚

    #1643617
    Felix

    Thank you for your prompt response, Ying! However, I am not exactly sure, if the CSS is having the effect, I was looking for. Oddly, it seems to adjust the background-color of the box, not the text :/

    I applied it on my website, could you have a look at and let me know what you think/how to adjust the top/height-attributes accordingly?

    The example page is adding 2 background image to it, are you sure you want to go with this way?

    That s interesting. If there is no other way to soften/round the corners of the rectangular, I would like to add the two images right and left, too. I like that it gives it a nice look, as if marked by a real marker.
    I can create and upload the images. However, could you provide me with the CSS to load them?

    Thanks again!

    #1643630
    Elvin
    Staff
    Customer Support

    Hi there,

    That s interesting. If there is no other way to soften/round the corners of the rectangular, I would like to add the two images right and left, too. I like that it gives it a nice look, as if marked by a real marker.
    I can create and upload the images. However, could you provide me with the CSS to load them?

    Yes that’s how the reference site does it. It uses this:
    https://www.adam-riese.de/assets/img/left_highlight.svg

    And this: https://www.adam-riese.de/assets/img/right_highlight.svg

    But this is quite tricky to implement as the HTML structure of your site and the reference is significantly different and is not conducive for use of this images.

    Alternative to this, we can try using border-radius instead.

    Try this CSS:

    mark.gb-highlight {
        position: relative;
        z-index: 1;
    }
    
    mark.gb-highlight:before {
        background-color: #4fd4e7;
        position: absolute;
        display: inline-block;
        top: 30%;
        left: 0;
        right: 0;
        z-index: -1;
        height: 75%;
        content: "";
        border-radius: 30px 30px 20px 20px;
    }

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

    #1644647
    Felix

    That is great, Elvin: the border radius does the trick just fine!

    One last thing: why is the formatting only applying on the first line of the marked text? I.e. if the marked text spread over more than one line in the front-end, the nice background formatting is not being applied on the second line onwards (please refer to my website, esp. in mobile formatting).

    How can we fix this little detail?

    #1644659
    Ying
    Staff
    Customer Support

    Hi Felix,

    It’s because the height is set to 50%, so it won’t be able to cover the text entirely, especially when the text wraps.

    We could use a media query to set specific value for mobile, and I added a width, try it out ๐Ÿ™‚

    @media (max-width: 768px) {
        mark.gb-highlight:before {
            background-color: #4fd4e7;
            position: absolute;
            display: inline-block;
            top: 0;
            left: -4.5%;
            width: 150%;
            z-index: -1;
            height: 100%;
            content: "";
            border-radius: 20px 40px 25px 25px;
        }
    }

    But still, it’s gonna be difficult to fit in all different shapes of texts when they wraps.

    #1644813
    Felix

    Could you guys have another look please. I guess I was misunderstood, it is not an issue with the height, nor with the width of the site on mobile.

    It seems that the ::before selector is applying the formatting on the first row of text only, if the text is spreading over several rows. See screenshot Issue with marker

    Any other ideas, how to best solve it? Adding width did not help.

    Merci upfront

    #1645338
    David
    Staff
    Customer Support

    Hi there,

    tricky one … remove the existing CSS and try this:

    mark.gb-highlight {
      background-color: #4fd4e7;
      border-radius: 10px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 0 10px;
      line-height: 1.5;
    }
    #1645804
    Felix

    Great, thank you all!

    #1646629
    David
    Staff
    Customer Support

    Glad we could be of help

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