Tuesday, October 18, 2011

SharePoint 2010 branding: webpart

A really nice article on rounding corners for the webpart:
https://www.nothingbutsharepoint.com/sites/eusp/Pages/web-part-style-in-sharepoint-2010.aspx

SharePoint 2010 branding: keep title area visible

To keep the title area visible when clicking on the ribbon commands, modify #s4-titlerow in the css to:

#s4-titlerow { 
    display: block !important
}

Monday, October 17, 2011

SharePoint 2010 branding: left nav accordion, highlight location

Collapse/expandable left nav:
$(document).ready(function() {
 $("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #eaeaea");

 $("div.s4-ql div.menu-vertical > ul.root > li.static >a").each(function()
   {    
    // Does this have children UL elements
     if($(this).parent().children("ul").size() > 0){

   //initial load hide
   $(">ul", $(this).parent()).hide();
    $($(this).parent()).addClass("cssClosed");
  
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().parent().addClass("cssOpen");
  
    //add toggle
    $(this).toggle(function() {
    $(">ul", $(this).parent()).show("slow");
    $($(this).parent()).removeClass("cssClosed");
    $($(this).parent()).addClass("cssOpen");

     },
     function() {
    $(">ul", $(this).parent()).hide("slow");
    $($(this).parent()).removeClass("cssOpen");
    $($(this).parent()).addClass("cssClosed");
     }
   );
        
  }      
  });

});

The css:
.cssClosed {
 background:url('/_layouts/images/Menu-right.gif') no-repeat 160px 7px;
}
.cssOpen{
 background:url('/_layouts/images/Menu2.gif') no-repeat 150px 7px;
}

The result (closed):




The result (opened):


Result selected:



SharePoint 2010 branding: left nav 2

From:

to:

Css modification:
Modify:
.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}

to:.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 5px 0px; /*space between recycle bin and lists*/
padding:0px;
}

SharePoint branding: left nav

To minimize the space between the left nav headings and the below links, update this style:

.s4-ql ul.root ul{
margin:0px 0px 20px 0px;
padding-left:0px;
}

to

.s4-ql ul.root ul{
margin:0px 0px 0px 0px;
padding-left:0px;
}

Page will change from:

to

Wednesday, October 12, 2011

SharePoint 2010 customization: trouble getting rid of right border

After the page is being centered, it leaves a right border at 100% width on this element:
div id="s4-bodyContainer"

After much digging and somehow removing this style:
body #s4-workspace{
overflow-y:scroll;
overflow-x:auto;
position:relative;
left:0px;
}

html inspector will show:
div class="s4-pr s4-notdlg s4-titlerowhidetitle ms-titlerowborder" id="s4-titlerow" style="width: 1595px;"

note: the ms-titlerowborder was not showing before.

go to ms-titlerowborder in the stylesheet, remove the right border and viola! No more right border hanging by itself!

Wednesday, October 5, 2011

changes in the masterpage didn't show

Site owner reported that she was not able to get rid of the site title. She doesn't see the title, but others are still seeing it.

Solution: It happened that the default.master page was also keeping minor versions. Go to the master page gallery and publish a major version so the changes will show for all users.