Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 14, 2020 at 1:52 pm #1252770

    Joagin
    Participant

    Hi,
    I have an image background on a page and want to add some text over it. Is there any way to add a translucent colored layer behind my text so I can both preserve the background image and control the text visibilty over it?

    Tnhanking you in advance for your help.

    October 15, 2020 at 12:55 am #1252853

    Jordan Shannon
    Moderator

    Hey Joagin,

    This should be possible via css. Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    October 15, 2020 at 11:32 am #1252977

    Joagin
    Participant
    This reply has been marked as private.
    October 16, 2020 at 12:29 pm #1253240

    Rikard
    Moderator

    Hi,

    Thanks for that. We can’t view local installations, but if you give the text in question a class in the element options, then you can target it with CSS like this:

    .your-class {
  background: rgba(0, 0, 0, 0.5);
}

    Best regards,
    Rikard

    November 3, 2020 at 3:39 pm #1258033

    Joagin
    Participant

    Hi Rikard,
    Thanks for your reply.
    (let me advise you I know very little of code…)

    So I gave the text ( in this case a headline rotator) the class “titulo” and tried to add the code you provide in front of it but nothing really happens. I save it, updoad the page and the page keeps the same. When I go back to the advance layout editor the added code I copied from you is gone again like this:

    [av_headline_rotator before_rotating='Missão' after_rotating='' margin='' margin_sync='true' align='left' custom_title='#ffffff' size='4vw' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' tag='h1' interval='5' animation='' alb_description='' id='' custom_class='titulo.{
    background: rgba(0, 0, 0, 0.5);
    }' av_uid='av-kgaophm9' admin_preview_bg=''][/av_headline_rotator]

    What am I doing wrong? Also it looks to me the code language you provided is not the same that the one I have on the shorcode, no?
    Can you help me on this issue?

    Kind regards,
    Joana

    November 5, 2020 at 5:06 am #1258509

    Rikard
    Moderator

    Hi Joana,

    Don’t add the CSS in the shortcode. First add the class in the Advanced tab in the element options, then you add the CSS to Quick CSS under General Styling in the theme options panel.

    You might have to target the spans in the headline rotator like this:

    .your-class span {
  background: rgba(0, 0, 0, 0.5);
}

    Best regards,
    Rikard

    November 6, 2020 at 12:03 pm #1258831

    Joagin
    Participant

    Thank you so much Rikard!
    It worked just fine (no need for targeting the spans!)
    Great I’m coding :) the sky is the limit now :D

    November 7, 2020 at 4:18 am #1258973

    Jordan Shannon
    Moderator

    Hi,
    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.