Thursday, June 14, 2012

Alignment issue in Picture library slide show webpart (sharepoint 2010)

Solution 1

I got the solution guys…
The picture library webpart uses the css classes in corev4.css in sharepoint 2010. The web part uses “.ms-WPBody” css class for styling. I over wrote this class in my custom style sheet as “.ms-WPBody.noindex” and gave my custom settings in the properties.

And thats it, my webpart aligned to the center of the page with my custom settings.
  • Marked As Answer byP6520Tuesday, August 10, 2010 11:24 PM
You can find “.ms-WPBody” class in corev4.css. When I look into the webpart through the developer tools in internet explorer, O came to know that, the webpart style is based on “.ms-WPBody.noindex” css class. So, I wrote my custom css using this class name as follows:

font-family:"Segoe UI" !important;

.ms-WPBody.noindex table{
width:100% !important;
height:100% !important;


.ms-WPBody.noindex td{
font-family:"Segoe UI" !important;
width:100% !important;
height:200px !important;
margin-left:auto !important;margin-right:auto !important;
/* text-align:center !important;*/

.ms-WPBody.noindex td div{
height:auto !important;
width:100% !important;
text-align:center !important;
display:block !important;;

.ms-WPBody.noindex td div span{
width:100% !important;

.ms-WPBody.noindex td img{
height:100% !important;
width:100% !important;

Also, I am attaching the document with the images before and after applying css classes.

I hope this clears the confusion. If I am wrong, please correct me.

Solution 2


$(document).ready(function() {
var divList = $("div[id^='MSOPictureLibrarySlideshowWebPart']");
var currImage= $("img[id$='curr']");

No comments:

Post a Comment