Stacking Widgets and Skew Shadows

  • warthogweb

    (@warthogweb)


    10 years, 4 months ago

    I am trying to emulate overlapping faux sidebar PostIt sheets with corner (skew) shadows. I have them on stluciaguesthouse.co.za which is not a WP site but the CSS does not work with WP.

    I can emulate a PostIt sheet easily using any text widget, apply a skew shadow and get another sheet with z-index: -2 (using negative top margin) to sit beneath both it and the skew shadow but I cannot get the second sheet’s skew shadow under it. You can see at http://www.warthog.co.za/primatecare.

    Somehow, WP interferes with the ability to stack multiple text widgets. Has anyone managed this?

    Martin

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 4 months ago

    Can you link to an image outlining the “PostIt sheets” you’re referring to on your page?

    Thread Starter warthogweb

    (@warthogweb)

    10 years, 4 months ago

    Andrew,

    Take a look at the two links in the post.

    The first demonstrates what I have done on a non-WP site.

    The second demonstrates what I have managed to achieve so far in WP.

    This should be doable but I have never seen it anywhere else.

    Thanks,

    Martin

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 4 months ago

    Please use something like this: http://awesomescreenshot.com/06322eig53 – Outlined in red to illustrate what you’re referring to

    Thread Starter warthogweb

    (@warthogweb)

    10 years, 4 months ago

    Hi Andrew,

    This is what I want to achieve:
    http://awesomescreenshot.com/00b22eq193

    This is what I can achieve in WP:
    http://awesomescreenshot.com/08022er17e

    Martin

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 4 months ago

    Looks like you need to increment by one the z-indexes for each widget

    Thread Starter warthogweb

    (@warthogweb)

    10 years, 4 months ago

    I’ve tried this but there’s still a problem.

    What I did before (non WP) was to give the container (#rhscolumn) a z-index. I’ve not tried it but will do so with #sidepanel. It’s a pity I cannot create multiple divs/classes within a text widget because that would probably work.

    It’s an effective piece of iconography that I would like to emulate.

    I’ll repost when I have done a little more experimenting.

    Martin

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Stacking Widgets and Skew Shadows’ is closed to new replies.