OPTIMUS

SharePoint 2010
TIPS
branding
& design
01.
Applying Custom Master Pages
One FANTASTIC feature in SharePoint 2010 is the ability to apply
custom master pages to your _layouts or Application pages
Make sure you have some critical content
placeholders in your masterpage
AND
You are actually using them, not just
hiding them in a hidden panel
02.
Custom Master Pages and Dialog Boxes
So you have a nice custom master page and you are applying it all
over your new SharePoint 2010 site, What happens when one of
the new dialog boxes is loaded on the page (like when you click to
edit a list item)?
Your branded master page with logo and footer and
everything will also apply to the much smaller modal dialog
box that SharePoint pops up
Add a CSS class s4-notdlg to the HTML elements
that you don’t want to show in the dialog boxes

<div class="customFooter">

<div class="customFooter s4-notdlg”>

03.
Getting your CSS to be the last to load
In SharePoint 2010, Microsoft has provided a property in
<SharePoint:CssRegistration> called “After” to load
your custom CSS after the corev4.css
<!-- loads the ootb core CSS –>

<SharePoint:CssLink runat="server" Version="4"/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/>

ol, eh?
Pretty co
What if you have more than one CSS
to load after corev4.css?
You can list more than one CssRegistration with the
After=”corev4.css" but they actually get added beneath corev4.css in
reverse order.
So if you wanted the CSS to go in this order corev4.css, custom1.css,
custom2.css you would list them like this:

<!-- loads the ootb core CSS –>

<SharePoint:CssLink runat="server" Version="4"/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name="custom2.css" After="corev4.css" runat="server"/>

<SharePoint:CssRegistration name="custom1.css" After="corev4.css" runat="server"/>
04.
Easily show a Favicon in SharePoint 2010
Favicon: The little icon that appears in the corner of the address
bar of your browser and along with your bookmarks
 Its really a minor thing,

but it makes a surprisingly big impact on a branded page

 HTML tag
SharePoint 2007 Typical
<link rel="shortcut icon" href="/Style Library/sp911/favicon.ico" />

SharePoint 2010 New!

<SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/sp911/favicon.ico"/>
05.
Handling unsupported browsers
SharePoint 2010 will support many major browsers including
IE7, IE8, FF3.5 and Safari4, but there is one browser that will not
be supported by the out of the box SharePoint 2010 experience:
Internet Explorer 6!
How to tell the users that IE6 isn't supported?

<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>
Want to do something more...?
Check out this easy to use JavaScript file for displaying
a nice graphical menu for selecting browser alternatives:
http://code.google.com/p/ie6-upgrade-warning/
06.
Using Simple Rendering in SharePoint Navigation

Want to render the SharePoint navigation menu in a cleaner

unorderd HTML list?
Apply UseSimpleRendering to the <SharePoint:AspMenu>
UseSimpleRendering=”false”

<table id="zz1_TopNavigationMenuV4" class="menu zz1_TopNavigationMenuV4_2"

cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)" id="zz1_TopNavigationMenuV4n0">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
<a class="zz1_TopNavigationMenuV4_1" href="/" accesskey="1">Home</a>
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)" id="zz1_TopNavigationMenuV4n1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
<a class="zz1_TopNavigationMenuV4_1" href="/about-us/Pages/default.aspx">About us</a>
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
</tr>
</table>

Looks same as SharePoint 2007 output?

UseSimpleRendering=”true”

<div id="zz15_TopNavigationMenuV4" class="menu">

<div class="menu horizontal menu-horizontal">
<ul class="root static">
<li class="static">
<a class="static menu-item" href="/" accesskey="1">
<span class="additional-background">
<span class="menu-item-text">Home</span>
</span>
</a>
</li>
<li class="static selected">
<a class="static selected menu-item" href="/about-us/Pages/default.aspx">
<span class="additional-background">
<span class="menu-item-text">About us</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
</li>
</ul>
</div>
</div>

Much cleaner, Eh?

Looking for more tips?
http://blog.drisgill.com/

Thanks to Randy Drisgill

 Compiled by
OPTIMUS Rajesh Kuttyadan