Friday, February 11, 2011

SharePoint 2010 Ribbon Tab Cutting off Text IE Issue

If you are experiencing problems with SharePoint 2010 Ribbon tab menu on a Library page such as a Document Library in a IE browsers. Please see example of issue below:



This could be due to size of window being previewed, please see image below in the bottom red square where you see 125% which need to be changed to 100%



The Fix




Go to your toolbar and click View > Zoom > 100%

Thursday, January 27, 2011

Changing the Search Icon to a custom images in SharePoint 2010 search bar

How to change the original magnify glass icon in the search bar like the the image below to a custom image:


The Fix:
Add the following below to the to your CSS:

/*this hide the original magnify glass image*/ 
.ms-sbgo img{
display:none;   
}



/*this adds the new custom image */ 
.ms-sbgo a {
    background: url("/_layouts/images/customfolder/btn-search.jpg") no-repeat;
    width:70px;
    height:21px;
    display:block;
}

The Result:

Thursday, January 20, 2011

SharePoint 2010 Print Friendly pages

When you require print friendly pages in SharePoint 2010 you can simply use the following format in your stylesheet:

Example:
@media print{
.className {  display:none; visibility:hidden }
}
Please Note: this example will remove the elements in the page in your print preview

What this does is the @media print element changes the styles when you print the page, if you find certain elements cut off on the pages add the following attributes below to the particular style cutting off on the page:

Example:
@media print{
.className {  display:block; visibility:visible; overflow:visible; position:absolute; }
}

How to remove custom styles from modal pop up windows in SharePoint 2010

When you create a custom masterpage and add new elements, it adds the new elements to the pop up window i.e. add new page pop up window

When the pop up window looks like the image below after you have created a custom master pages and want to remove all the custom styles as this can conflict with all your dialog boxes.


The Fix:

How you remove this custom banner with simple class called: .s4-notdlg

Example:
<div class="s4-notdlg customClass">Here is my custom header</div>

The Results: