Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 21, 2017 at 11:38 am #841952
    gareththomson

    Hi,

    I want to overlay some test over sections of an image on the front page of a site I am redesigning.
    I have placed a colour section with the image added as the Section image.
    I have created a Custom Css Class and added the css code for this to the style.css file within the child theme. 

    .grt-text-shadow { 
    padding: 20px;
    position: relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5) !important;
}

    I’ve then applied this Custom Css Class to the text element on the page, but the opaque background is not being applied.

    Thanks for the support.
    Gareth

    August 21, 2017 at 3:33 pm #842053
    Victoria

    Hey gareththomson,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#av_section_1 .flex_column.av_one_half.flex_column_div.av-zero-column-padding.first.avia-builder-el-6 {
  padding: 20px;
    position: relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5) !important;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 21, 2017 at 4:48 pm #842085
    gareththomson

    Hi Victoria,

    Thanks, that made a difference to the larger area, but I wanted to be able to apply the shadow effect only to the textbox areas. I also wanted to be able to add into other textbox areas overlaying images I plan to add further down the page, so this was why I thought it best to implement as a Custom CSS Class, and I can then just apply this class to these elements in the design.

    Is this approach I had planned not something that should work?

    Thanks,
    Gareth

    August 21, 2017 at 5:35 pm #842117
    gareththomson

    Hi,

    OK, I’ve done some more playing about with the CSS and have got it applying to any textboxes within the colour section section using the following Quick CSS

    #top .grt-text-shadow {
  padding: 20px;
    position: relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.65) !important; }

    However, whenever I try and remove from QuickCSS and add to the child theme’s style.css file, it doesn’t work.

    I’m probably missing something really obvious, but cannot see it.

    Thanks,
    Gareth

    August 24, 2017 at 12:06 pm #843432
    Ismael

    Hi,

    The code looks correct. Do you have any cache plugin installed? Please purge the cache or re-minify the stylesheets after adding the modification.

    Best regards,
    Ismael

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