Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 29, 2014 at 8:52 pm #342972
    GGLNetwork

    Hello,

    I’m looking for help on how to modify the color and opacity of content sections on various pages.

    I only have quick css (not coding) ability. If i want light gray semi opaque in a section, what do i do?

    Many thanks in advance – I’m way new to this.

    b.

    October 31, 2014 at 11:18 am #343938
    Arvish

    Hi GGLNetwork!

    You can code the CSS in the following way:

    After adding a colored section in Avia Layout Builder,

    Enter the color you want to use in “Custom Background Color”

    In the colored section settings specify an ID for the section:

    The ID can be anything (do not use spaces and special chracters. You can use – and _)

    In your Quick CSS add code in the following way

    #the_ID_you_entered_above{
    opacity:0;
    }

    Opacity can be anything from 0 to 1.

    I would suggest looking into a few CSS coding tutorials before attempting in-depth modifications.
    http://www.w3schools.com/css/default.asp
    http://www.w3schools.com/css/css3_intro.asp

    Regards,
    Arvish

    November 2, 2014 at 9:58 pm #344995
    GGLNetwork

    Thank you so much Arvish.

    Since the colored sections can only be full width, I’d love a solution that doesn’t involve them. Especially because the reason I want a semi-opaque gray background behind my text is because I have a colored section with an image as my background, text on top, and in some places it is difficult to read.

    It’d be best to be able to apply a semi-opaque background to:
    1) text block
    2) special heading
    3) icon box

    Is this possible?

    Thanks thanks thanks!

    November 3, 2014 at 10:36 pm #345575
    Andy

    Hey!

    If you do the Arvish’ style you could make the color section not full width by adding 

    position: absolute;
width: 75%;

    to it. Adjust 75 to whatever is needed.

    Cheers!
    Andy

    November 5, 2014 at 3:28 pm #346546
    GGLNetwork

    and I can put that color section in a “1/4 sized layout element” which is inside another color section?

    can I not use something like this to make a “special heading” background color semi-opaque:

    .page-id-211 ?specialheading? {
    background-color: rgba(255,255,255,.5);
    }

    Thanks!

    November 5, 2014 at 3:42 pm #346563
    Yigit

    Hey!

    Can you post the link to your page where we can see the element so we can provide you accurate custom CSS code?

    Best regards,
    Yigit

    November 5, 2014 at 6:01 pm #346679
    GGLNetwork

    Hi Yigit,

    This is the page (ignore how bad it looks I’m messing around) –

    http://www.new.globalgl.org/?page_id=211

    -So, I created “Heading6” to be the same as my main heading but to have a gray background (you’ll see “convening press” is H6, the rest of the headings are H4), but, it has no opacity.

    Ideas?

    Thanks!

    November 5, 2014 at 10:27 pm #346797
    Yigit

    Hey!

    Please add following code to Quick CSS 

    h6.av-special-heading-tag {
background-color: transparent!important;
}

    You can turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and apply classes to them and style them as needed without affecting other elements

    Best regards,
    Yigit

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