Jump to content

Archived

This topic is now archived and is closed to further replies.

jankowalski

box shadow

Recommended Posts

jankowalski

Hi, i spent quite a lot of time in tying to add box shaddow efect to widget, but didn t get results.

The code is:

 

 
.widget-pad
{
  position: relative;
}
.widget-pad:before, .widget-pad:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.widget-pad:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
 
something is blocking it. in different templates, it works perfectly.

 

Share this post


Link to post
Share on other sites
batman

Hi jankowalski

Please you can post your site's url so we can properly troubleshoot the issue for you.

Thanks !


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
jankowalski

batman it is on localhost. but under my name you will find adress of another wordpress instalation. please reffer to this web.

Share this post


Link to post
Share on other sites
batman

HI jankowalski

Sorry, I´m not a moderator and I can not see your WP installation, this is private for a member like me.

You wait a moderator reply, Thanks!

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
jankowalski

batman i ve sent you link in private message!

Share this post


Link to post
Share on other sites
Danny

What is this supposed to do/look like ?

Also what do you mean something is blocking it in different templates. I have just added this code quickly to a test site of mine and it appears to add a white background to all widgets at an angle ?

 

Therefore, I have no issue with the code. If you're unable to to get this code to work on certain pages or templates, then the issue is related to something else such as other CSS you may have added and/or a plugin or script that is on that page.

 

Please be aware that this is your custom code and therefore, we are unable to provide support to issues related to your custom code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jankowalski

should look like this http://zenzeng.net/test/

dont worry taht box backround is black on this site,

just tell me how ti add this shaddow to widget-pad

 

Share this post


Link to post
Share on other sites
Danny

As far as I can tell your CSS works, the only thing you need to do is remove the background color from your CSS as it isn't needed as far as I can tell. Then you're going to need to add a background color to your all your widgets, you can do this individually or to all of them. You will also, need to add a margin bottom or top of each of widgets.

 

https://cloudup.com/cycvnXEfpsK


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jankowalski

Danny indeed, #page .page-canvas was covering shadows. thanks!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×