Tagged: , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 17, 2016 at 3:57 pm #599630
    riskagency

    Hi,

    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 http://postimg.org/image/tn0a7cg09/)

    Many thanks

    March 17, 2016 at 4:09 pm #599639
    begrafiks

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

    March 17, 2016 at 4:34 pm #599675
    Yigit

    Hey!

    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 – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-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;}


    @begrafiks     thanks as always! :)

    Best regards,
    Yigit

    March 17, 2016 at 5:12 pm #599760
    riskagency

    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 http://postimg.org/image/rui8djhrr/, what I have already is shown in the bottom example).

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

    Thanks

    March 19, 2016 at 11:33 pm #600773
    begrafiks

    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

    March 21, 2016 at 8:10 am #601091
    Rikard

    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,
    Rikard

    March 21, 2016 at 11:24 am #601154
    riskagency

    Hi
    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 http://postimg.org/image/rui8djhrr/)

    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 http://postimg.org/image/rui8djhrr/). 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

    March 23, 2016 at 7:19 pm #602754
    riskagency

    Anyone have any ideas please?

    Thanks!!

    March 24, 2016 at 9:32 pm #603432
    Yigit

    Hi!

    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

    Cheers!
    Yigit

    March 29, 2016 at 11:19 am #604364
    riskagency

    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?

    About

    Thanks!

    March 29, 2016 at 3:06 pm #604597
    Yigit

    Hi!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    March 29, 2016 at 3:15 pm #604612
    riskagency

    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

    March 29, 2016 at 3:18 pm #604617
    Yigit

    Hi!

    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 imgur.com or Dropbox public folder and post the links here.

    Cheers!
    Yigit

    March 29, 2016 at 3:40 pm #604638
    riskagency

    Hi

    I’m afraid that hasn’t worked either.

    This is what i’m trying to achieve: http://imgur.com/OOaOAfg

    Thanks again

    March 30, 2016 at 6:51 pm #605369
    Andy

    Hi!

    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,
    Andy

    April 22, 2021 at 6:08 am #1295927
    oladigital_co

    Hello,

    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: https://oladigital.co/wp-content/uploads/2021/04/Heading.jpg

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

    Thanks so much.

    April 24, 2021 at 4:43 am #1296464
    Rikard

    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,
    Rikard

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