When working with your beautiful custom branded SharePoint site you still need to maintain the power of SharePoint's publishing console. It would be nice to keep all of this functionality without creating too much of an eye sore on your design. In this post I will discuss how to use SharePoint Designer to markup and style the login and console components so as to fit in seamlessly with your custom master page.
Turn this…
Into this…
The key to holding power over your SharePoint components is wrapping everything in a custom <div> cell. This allows you to set custom styles and positioning without encroaching on fundamental SharePoint functionality. This post will concern itself with three main sections; the design mode console, the login area, and the authoring controls. These are implemented with the following SharePoint controls:
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
<PublishingSiteAction:SiteActionMenu runat="server"/>
<SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/>
<SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/>
<wssuc:Welcome id="explitLogout" runat="server"/>
Open up your custom master page in SharePoint Designer and implement a series of custom <div> cells such as this to contain the required SharePoint controls.
<div id="sharepointtools">
<div id="design_mode_console">
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</div>
<div id="login">
<div class="login_cell">
<PublishingSiteAction:SiteActionMenu runat="server"/>
</div>
<div class="login_cell">
<SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/>
</div>
<div class="login_cell">
<SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/>
</div>
<div class="login_cell">
<wssuc:Welcome id="explitLogout" runat="server"/>
</div>
</div>
<%-- this is only visable when logged in and editing the page --%>
<div id="console">
<PublishingWebControls:AuthoringContainer id="authoringcontrols" runat="server"><PublishingConsole:Console runat="server"/></PublishingWebControls:AuthoringContainer>
</div>
</div>
Note that everything is contained within a <div> of id "sharepointtools" and we have ids set for "design_mode_console", "login", and "console" as well as a class for "login_cell". Using a class rather than an id allows us to use the same style multiple times in a page.
Now that your SharePoint controls are wrapped in well formed markup you need to style and position your elements with your custom CSS. Here is the CSS used to create the example shown above.
#sharepointtools {
background-image:url('/images/sp_bg.png');
background-repeat:repeat;
width: 100%;
min-width: 100%;
text-align: left;
display: block;
}
#login {
float: right;
text-align: right;
clear: both;
min-height: 20px;
height: 20px;
}
#login a:link {
color: #FFFFFF;
text-decoration: none;
margin-bottom: 2px;
}
#login a:visited {
color: #FFFFFF;
text-decoration: none;
margin-bottom: 2px;
}
#login a:hover {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dotted #FFFFFF;
}
.login_cell {
float: right;
clear: none;
font-size: 12px;
}
#console {
clear: both;
}
Note that each new <div> cell on a new line utilizes a
clear: both
. This prevents the <div>s from floating next to each other. Also the link colors for the login components are specifically styled to overwrite the default SharePoint colors, which may not work with your custom color scheme. The
#sharepointtools
style id controls the container that houses all of these components so be sure to style it appropriately for the rest of your layout.
These examples should give you the basic tools to get started customizing your own SharePoint controls to fit your custom design.