Support Forum

Hello,

I would like in fullwidth two backgrounds of different color, for example: extension-a green and extension-b purple.

How can I get the result shown on the screenshot?

Thankyou
Attachments:
Responses (3)
  • Accepted Answer

    Wednesday, April 11 2018, 09:15 PM - #Permalink
    Hello Stefano,

    You can do that by writing your CSS code in the custom.scss file.
    Just target the proper elements, for example:

    #g-extension {
    .g-grid {
    > .g-block {
    &:first-child {
    background: green;
    }
    &:last-child {
    background: purple;
    }
    }
    }
    }


    The above code is just an example. It might work but you might need to modify it as well.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, April 12 2018, 10:42 AM - #Permalink
    Thanks for the answer IVO,
    unfortunately it does not work. Could you please verify?




    Ivo Valkov wrote:

    Hello Stefano,

    You can do that by writing your CSS code in the custom.scss file.
    Just target the proper elements, for example:

    #g-extension {
    .g-grid {
    > .g-block {
    &:first-child {
    background: green;
    }
    &:last-child {
    background: purple;
    }
    }
    }
    }


    The above code is just an example. It might work but you might need to modify it as well.
    Attachments:
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, April 12 2018, 10:58 AM - #Permalink
    Hello Stefano,

    As I said in my previous comment, the above code is just an example. It might work but you might need to modify it as well.
    Such customizations are out of the scope of support and as such, you need to do them on your own.

    Anyway, remove the code I gave you in my previous comment and try this one:

    #g-extension {
    @include linear-gradient(90deg, green 50%, purple 50%);
    }


    IMPORTANT: Make sure that you have the @import "dependencies"; code at the very top of your custom.scss file.

    Once again Stefano, please do such customizations on your own in the future.
    Thank you for the understanding.
    The reply is currently minimized Show
Your Reply

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!