How to apply right and bottom drop shadow to webpart in SharePoint 2010 page right zone

Question

Hi,

I have two webparts in Sharepoint 2010 site page in right zone. However I am unable to apply each webpart with right and bottom drop shadow. Can anyone help me.

Regards,

Somnath Matere

Answer 1

Hi,

 

Thank you for your question.

 

I am trying to involve someone familiar with this topic to further look at this issue.

Answer 2

Hi, 

Have you tried modifying styles for .s4-wpcell-plain:

 

.s4-wpcell-plain{
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
filter : progid:DXImageTransform.Microsoft.Shadow(color='#000000', direction='145', strength='3'); /* IE 5.5+ */
}

 

the only issue this will apply shadows to ALL webparts on the site, to limit this style only to a particular webpart you can:

1. isolate webpart by its ID td#MSOZoneCell_WebPartWPQ2.s4-wpcell-plain - now this will fall apart if the webpart is changed 

2. in the page layout create div  and place webpart zone in that div now you can call on that webpart by div ID.

hope this helps.

here is a link to CSS3 Generator http://css3generator.com/

Evgenia

Answer 3

Hello Somnath Matere,

 

Thank you for your post. I've read over it and the response that has been posted already.

 

If you go with the response that has already been posted you'll want to create a div for the web part zone that you're creating to call for the CSS. If you use the CSS as provided you will have the results of the web part alternating shadowing and not shadowed. It is shadowing based on the TR in the web part if you use it without creating the div.

 

For more filter progids feel free to visit http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx

---

Regards,
Manas Biswas
Microsoft Online Community Support


Please remember to click 'Mark as Answer' on the post that helps you or click 'Unmark as Answer' if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

Answer 4

Hello, 

well this problem is easily solved by adding bottom margin to the mix and display:block to css. The shadow is there it is just covered by the webpart below. 

Firefox and Chrome (image and css):

.s4-wpcell-plain{
border:1px solid #cccccc;
margin-bottom:15px;
padding:10px;
background-color:white;
display:block;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
box-shadow: 5px 5px 5px grey;}

the bigger issue is - IE it does not want to play nice with gradients; below is an image from IE8 and css used

.s4-wpcell-plain td{
border-left-width:1px;
border-top-width:2px;
border-right-width:1px;
border-bottom-width:1px;
border-left-color:#cccccc;
border-top-color:#cccccc;
border-right-color:#cccccc;
border-bottom-color:#cccccc;
border-left-style:solid;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
zoom:1;
margin-bottom:15px!important;
padding:10px;
position:relative;
background-color:white;
display:block;
}

.s4-wpcell-plain td{
filter : progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', direction='145', strength='5'); /* IE */
}
.s4-wpcell-plain .ms-WPHeader td{
border-left-width:0px;
border-top-width:0px;
border-left-color:transparent;
border-top-color:transparent;
position:relative;
zoom:1;
filter : none;
padding:0px;
margin:0px;
}

it will need more work to make it compatible with ie7.

Evgenia

Answer 5

Hello Evgenia Fisher,

when I apply this css to s4-wpcell-plain it is apply to all webparts in the page and site. However i am having two webpart in right zone i want to apply it to only those webpart.

Regards,

Somnath

 

 

Answer 6

Hi Somnath, 

that is correct,  to apply those styles only to the right webpart zone:

in your page layout wrap the webpart zone in a div tag i.e. <div id="rightWebPartZone">code for the webpart zone goes here</div>

now you can apply styles only to the webparts inside that div:  #rightWebPartZone .sp-wpcell-plain {css lines} 

the css I've suggested is a rough draft, it does not work for IE7 and you will need 2 css files one for IE and the other for the rest of the browsers, it can be improved. 

Evgenia

Answer 7

Hello Evgenia,

body #rightWebPartZone .sp-wpcell-plain  td{
filter : progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', direction='145', strength='5'); /* IE */
}

The above css work fine for IE. however it not visible in firefox. Can you please help me to resolve it.

Regards,

Somnath 

Answer 8

 

Hi Somnath, 

you will need to add a separate css style for all other browser (td needs to be removed otherwise every single table cell will have shadow applied) wiht box-shadow property to make it visible in Firefox and add -webkit-box-shadow so the shadow is displayed in Safari and Chrome so your code will look like this:

body #rightWebPartZone .sp-wpcell-plain {
display:block;
-moz-box-shadow: 5px 5px 5px #cccccc; /* Firefox 4.0 and earlier*/
-webkit-box-shadow: 5px 5px 5px #cccccc;/* Safari and Chrome*/
box-shadow: 5px 5px 5px #cccccc; /* All Browsers CSS3 property*/}

Answer 9

Thanks Evgenia.

Answer 10

There is also a class "s4-wpcell", this may have something to do with the 'chrome' setting in the web part properties. There should be a way to toggle your borders/shadows off/on by targetting specific classes.

I used something similar to Evgenia -

.s4-wpcell > table.s4-wpTopTable{ 
border: 1px solid #EEEEEE; 
margin-bottom:15px; 
padding:10px;
background-color:white; 
display:block; 
}
 .s4-wpcell > table.s4-wpTopTable{ 
filter : progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', direction='145', strength='5'); /* IE */ 
}

You probably still need to add browser specific attributes to get complete cross-browser support ['-moz-box-shadow', '-webkit-box-shadow', or the CSS 3 version 'box-shadow']

Answer 11

hm, i cannot apply box-shadow in ie 8-9. how to use it?

my css is:

-webkit-box-shadow:inset  1px 0px 7px 3px #009ee3;

-moz-box-shadow: inset 1px 0px 7px 3px #009ee3;

box-shadow:inset  1px 0px 7px 3px #009ee3

above codes work in any browser except for IE.

Answer 12

HI Evgenia,

i tried your css for IE filter : progid:DXImageTransform.Microsoft.Shadow(color='#000000', direction='145', strength='3'); /* IE 5.5+ */

it works well. But some of the webpart content has shadow too. 

do you know how to appy shadow only for a div. i prefer the div id= mso_contentdiv has shadow only.

my css codes work fine for chrome or firefox except for IE. could you please tell me how.