Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #599630


    I would like to add a highlight to behind text and apply it to all of my heading 1 text to be used in special headings throughout my site.

    Is it possible to do so and just highlight the text itself (instead of creating a box around the extent of the text as shown in screen shot

    Many thanks


    Hi @riskagency ;
    Try with these lines :
    h1{background-color: rgba(0, 0, 0, 0.5) !important;padding: 5px !important;}



    Please refer to @begrafiks’ post above and if you would like to apply the changes on certain elements, please turn on custom CSS field for ALB elements – and then edit your element and give it a custom class and then change the code to following one

    .your-custom-class h1{background-color: rgba(0, 0, 0, 0.5) !important;padding: 5px !important;}

    thanks as always! :)

    Best regards,


    Hi thanks both for your help.

    However when I use the code below I get a box around the text as I have had before. In case it wasn’t clear what I want to do is just highlight the text itself (as shown in the top example here, what I have already is shown in the bottom example).

    h1{background-color: rgba(0, 0, 0, 0.5) !important;padding: 5px !important;}



    Hi @riskagency ;
    I’m not really sure what I see your example, but in case it’s a “shadow” you can achive with css;
    Just look here css text-shadow


    Hi @riskagency,

    Did you get your problems solved or not? Please let us know if you should need any more help on the topic. Thanks for helping out @begrafiks :-)

    Best regards,


    Thanks Begrafriks and Rikard.

    Unfortunately I haven’t been able to solve the issue.

    When I use the code originally provided by Yigit, I am able to successfully achieve a highlighted block around (and behind) my text. However the block is rectangular shape, so there is a highlight in areas where there is no words / text. (as shown in lower example in

    However what I want to achieve is JUST to apply a highlight to the area immediately behind and around the words / text. (as shown in the upper example here The bottom example illustrates what I can get using Yigits previous code recommendation. \

    Please let me know if this is not clear.

    Thanks again for your help


    Anyone have any ideas please?




    Please try wrapping your text in span with a custom class in Speacial Heading element as following

    <span class="my-highlighted-text">your custom text</span>

    then add following code to Quick CSS

    .my-highlighted-text { background: rgba(0, 0, 0, 0.5) !important;padding: 5px !important; }

    If that too does not help, please post the link to your website



    Hi, thank you!

    Thats mostly worked. However is there any way of adjusting the extent of the highlight in the vertical direction? Currently the highlight for a line of text is overlapping with the line below / above.

    So is it possible to make the highlight hug the text tighter in the vertical direction?




    Please add following code to Quick CSS as well

    .my-highlighted-text {
        padding: 5px!important;
        line-height: 53px!important;

    Best regards,


    Hi, Thankyou Yigit,

    However this code has the opposite effect; its makes the highlight fatter, (rather than thinner) in a vertical direction

    Any ideas?

    Thanks again



    Please change the code to following one

    .my-highlighted-text {
        padding: 0 5px!important;

    If that too does not help, please post a screenshot showing the changes you would like to make.
    You can upload your screenshots on or Dropbox public folder and post the links here.




    I’m afraid that hasn’t worked either.

    This is what i’m trying to achieve:

    Thanks again



    Try to adjust padding’s value to 20px for example, then you’ll see that Yigit Code is working. Unfortunately there is no lower value than 0px, so basically this way it won’t be possible, I’m afraid.

    Best regards,



    I am unsure if this thread answers what I’m looking for as I can’t see the old images that were linked, but what I am wanting to achieve is headings with certain words highlighted as in the following example:

    Are you please able to instruct me as to how I can achieve this?

    Thanks so much.


    Hi oladigital_co,

    You should be able to achieve that with code like this:

    <p>This is my text, and <span style="background-color: red;">this text has a background colour</span>.</p>

    Best regards,

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