[Support request] Text Highlighting in articles

Home Forums Support Text Highlighting in articles

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #886909
    Vijaykumar

    Hi
    Is there any way or CSS change that can highlight text in articles and add different color boxes around text?
    See an example in the webiste url field.
    I’ve provided an example URL. The sections I am referring to are “Free Bonus” “Note” with the different background color.

    #887057
    David
    Staff
    Customer Support

    Hi there,

    are you using the Gutenberg Block editor? If so the text block has background colors. If not then you will need to use some HTML. Let me know.

    #887345
    Vijaykumar

    no I am using the classic editor as block editor had some issues with functionality that we wanted to keep from the classic editor.

    what HTML do I need to use? Can it be added as hook or CSS?

    #887638
    David
    Staff
    Customer Support

    HTML would be something like this:

    <div class="alert-box alert-yellow">
        <p>my content in here</p>
    </div>

    Then your CSS:

    .alert-box {
        padding: 1em;
        box-sizing: border-box;
    }
    
    .alert-yellow {
        background-color: #ebb205;
    }

    You can create different alert-color classes if you need different backgrounds.

    #889819
    Vijaykumar

    Perfect. Thanks. With few border and corner mordifications here is the final I used:

    .alert-box {
    padding: .75em 1em;
    box-sizing: border-box;
    margin-bottom: 1.125rem;
    border: 1px solid transparent;
    border-radius: .25em;
    }

    .alert-yellow {
    background-color: #ffeeba;
    border-color: #f1da95;
    }

    .alert-blue {
    background-color: #dfebf5;
    border-color: #c9e3f9;
    }

    #889961
    David
    Staff
    Customer Support

    Glad to be of help and thanks for sharing your final solution.

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