Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 29, 2018 at 6:40 pm #948687
    goch

    Hi guys.
    I love the option “display a small styling shadow at the top of the section” that exists for the colour section!
    Now I need exactly the same thing at the top of some “grid row” elements. I tried to get it without success..
    Is there a way to get that? perhaps throught the “custom Css Class”?
    many thanks for any pointer!

    April 29, 2018 at 8:08 pm #948704
    Guenni007

    give to the grid-row ALB element the custom class: avia-shadow

    by the way it is defined already on Enfold shortcodes.css as:

    .avia-shadow {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

    if you like to have that a bit more visible play a bit with the 0.1 or the px values
    if you want to have that allways you can add it via functions.php that class.

    April 29, 2018 at 11:53 pm #948747
    goch

    thanks! that’s great!
    But one thing I don’t understand is that when I just set my grid as “avia-shadow”, I don’t get the same shadow as I have on the colour section elements (it’s lighter on the grid). You know if avia-shadow is defined somewhere else for the colour-section?

    I’m now trying to define the avia-shadow specifically for the grids the following way, but that does not work :

    .av-layout-grid-container .avia-shadow
{
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

    (I also tried with #av-layout-grid-1 .avia-shadow)
    any idea how I can set that? (sorry, I know I’m probably missing something obvious)

    • This reply was modified 6 years, 7 months ago by goch.
    April 30, 2018 at 3:39 am #948757
    Guenni007

    the class is directly behind the container so it would be with no space between them
    .av-layout-grid-container.avia-shadow

    but if you like to have different shadows – it might be better to call it a different way: f.e grid-shadow

    .av-layout-grid-container.grid-shadow {
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

    And: it will not work if your grid-cells have a background-color!!!

    April 30, 2018 at 10:55 am #948973
    Guenni007

    that is more or less a good compromise – to have a pseudo class container.
    set the class for the grid-row element to: grid-shadow

    .av-layout-grid-container.grid-shadow::before {
    content: "";
    box-shadow: inset 0 1px 5px -1px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
    April 30, 2018 at 2:35 pm #949092
    goch

    wow! so nice from you to take the time to look at that.
    I now have all I need with those info+example.
    Thank you again Guenni007!

    May 1, 2018 at 6:37 am #949371
    Rikard

    Hi,

    Thanks for helping out @guenni007, please let us know if you should need any further help on the topic @goch.

    Best regards,
    Rikard

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