Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 14, 2017 at 8:15 pm #793062
    farzanahmed

    Hi, i’m trying to get a text background to look like the one here – http://prntscr.com/f7rs69, to go all the way to the edge of the left side of the screen, but also have opacity like it is showing in there?

    At the moment, i’ve managed to get the background colour but no opacity, and it doesn’t go to the edge of the page on the left. (here’s what i’ve got – http://prntscr.com/f7rqu7)

    This is how I did it

    Create a color section and put the background image in there (the colourful one of the bars)
    Inside that section, I put a 2/3 column and give that column a grey background and padding as below
    Top – 0
    Right – 20
    Bottom – 0
    Left – 30
    Add text element in the 2/3 section

    Thanks
    Farzan

    • This topic was modified 7 years, 6 months ago by farzanahmed.
    May 14, 2017 at 8:38 pm #793065
    Mike

    Hey farzanahmed,
    Try this code in the General Styling > Quick CSS field:

    .page-id-1195 .av-section-color-overlay-wrap .container {margin-left: 0 !important; padding-left: 0 !important; }

    Best regards,
    Mike

    May 14, 2017 at 8:50 pm #793068
    farzanahmed

    Thanks Mike
    That worked to get it to the edge; how do I make that grey background more opaque so its just an overlay of the background if that makes sense?

    Thanks
    Farzan

    May 14, 2017 at 9:52 pm #793085
    Mike

    Hi,
    Check it out now, I removed the background color of the column element, changed the text element font to white, and added this css:

    .avia_textblock  {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.2);
}

    you can tinker with the 0.2 until you like the background :)

    Best regards,
    Mike

    May 14, 2017 at 11:19 pm #793117
    farzanahmed

    Thanks Mike

    That’s worked, but its no longer at the edge of the screen anymore on the left; although the previous CSS is still in the settings?

    Thanks
    Farzan

    May 14, 2017 at 11:32 pm #793123
    farzanahmed

    Also, can I prevent it from adding the grey background on all text blocks?

    May 14, 2017 at 11:35 pm #793124
    farzanahmed

    i’ve managed to stop it from adding the bg on all blocks by using .page-id-1195 :)

    May 14, 2017 at 11:36 pm #793125
    Mike

    Hi,
    Ops, I gave you the wrong class :)
    replace “.avia_textblock” with “.flex_column.av_two_third” like this:

    .flex_column.av_two_third {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0)!important; 
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.2)!important; 
}

    Best regards,
    Mike

    May 14, 2017 at 11:38 pm #793128
    farzanahmed

    Super – that’s worked :)
    Thanks Mike.

    I’ve got another ticket open as well, do I have to wait for that to get allocated as you work through the list I presume?

    Thanks
    Farzan

    May 14, 2017 at 11:42 pm #793130
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.
    I’m working though the list :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Text background padding and opacity’ is closed to new replies.