Monday, March 7, 2011

Sharepoint Branding With CSS and Javascript Part 1

Okay, so after a few years of working with SharePoint and WSS 3 I decided to see what I could do to make my site look a lot less like Sharepoint and more like a traditonal site. I looked at all the angles that I could think of and came up with what I thought would be some key points I wanted to include and some things that might be a challenge to correct but possibly worth it in the end. One of my requirements is to create my sites as .WSP solutions so that they can be sent to other areas. With this as a major requirement I created a site definition solution in Visual Studio 2008. However, most of what I cover here does not require that you do this. Here is the list:
  • Most functionality should work from a document libray
  • Allow for different screen "resolutions"
  • Keep it fairly simple but allow for easy updating

There are more points but these are some of the major ones. Here are a few screenshots of what it looks like so far. There are some things I have not yet changed:



So there are the screenshots. Let's get to the meat of it all shall we??

My full solution is actually built as a full .WSP solution in Visual Studio, but basically what I have done is the following:
  1. Modified the Master Page for the layout I wanted.
  2. Created several stylesheets representing different screen sizes.
  3. Added the style css files to the master page gallery including a subfolder for images.
  4. Created a javascript file to change the stylesheet based on screen size.
  5. Created a "Scripts" document library for the javascript files.
  6. Uploaded all the files to the libraries
So the first thing I want to go over is the Master Page. Here is the code for the master page:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <%@ Master Language="C#" Debug="true" %>
  3. <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  4. <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  5. <%@ Import Namespace="Microsoft.SharePoint" %>
  6. <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
  7. <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  8. <%@ Register TagPrefix="wssuc" TagName="Welcome" Src="~/_controltemplates/Welcome.ascx" %>
  9. <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" Src="~/_controltemplates/DesignModeConsole.ascx" %>
  10. <%@ Register TagPrefix="asp" Namespace="System.Web.UI.DataVisualization.Charting" Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
  11. <%@ Import Namespace="System.Web.UI.DataVisualization.Charting" %>
  12. <html dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office">
  13. <head runat="server">
  14.     <meta name="GENERATOR" content="Microsoft SharePoint"/>
  15.     <meta name="progid" content="SharePoint.WebPartPage.Document"/>
  16.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  17.     <meta http-equiv="Expires" content="0"/>
  18.     <SharePoint:RobotsMetaTag ID="RobotsMetaTag1" runat="server" />
  19.     <title id="onetidTitle">
  20.         <asp:ContentPlaceHolder ID="PlaceHolderPageTitle" runat="server" />
  21.     </title>
  22.     <SharePoint:CssLink runat="server" />
  23.     <SharePoint:Theme runat="server" />
  24.     <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server" />
  25.     <SharePoint:CustomJSUrl runat="server"/>
  26.     <SharePoint:SoapDiscoveryLink runat="server" />
  27.     <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
  28.     <asp:ContentPlaceHolder ID="PlaceHolderAdditionalPageHead" runat="server"></asp:ContentPlaceHolder>
  29.     <link rel="stylesheet" type="text/css" title="default" href="mcurves.css" />
  30.     <link rel="alternate stylesheet" type="text/css" title="mcurves1024" href="mcurves1024.css" />
  31.     <link rel="alternate stylesheet" type="text/css" title="mcurves1200" href="mcurves1200.css" />
  32.     <link rel="alternate stylesheet" type="text/css" title="mcurves1440" href="mcurves1440.css" />
  33.     <link rel="alternate stylesheet" type="text/css" title="mcurves1600" href="mcurves1600.css" />
  34. </head>
  35. <body onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" >
  36.     <form id="Form1" runat="server" onsubmit="return _spFormOnSubmitWrapper();">
  37.     <WebPartPages:SPWebPartManager ID="m" runat="Server" />
  38.     <div id="search">
  39.         <table>
  40.             <tr>
  41.                 <td>
  42.                     <input type="text" name="s" id="search-text" value="" />
  43.                 </td>
  44.                 <td>
  45.                     <a target='_self' href='javascript:' onClick="javascript:SearchIt();javascript:return false;" title="Go Search" ID=onetIDGoSearch><img border='0' src="/_layouts/images/gosearch.gif" alt="Go Search"></a>
  46.                 </td>
  47.             </tr>
  48.         </table>
  49.     </div>
  50.     <div id="wrapper">
  51.     <div id="header">
  52.         <div id="logo">
  53.             <h1><a href="javascript:loadpage('/default.aspx');">MCurves</a></h1>
  54.             <p> design by Daniel Walker</a></p>
  55.         </div>
  56.     </div>
  57.     <!-- end #header -->
  58.     <div id="menu" class="menu">
  59.        
  60.     </div>
  61.     <!-- end #menu -->
  62.     <div id="page">
  63.     <div id="page-bgtop">
  64.     <div id="page-bgbtm">
  65.         <div id="content">         
  66.             <asp:ContentPlaceHolder id="PlaceHolderScriptTop" runat="server">
  67.                 <script language="javascript" type="text/javascript" src="http://wss_sa/tools/mcurves/Scripts/mcurves_script.js"></script>
  68.             </asp:ContentPlaceHolder>
  69.             <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>                              
  70.         <div style="clear: both;">&nbsp;</div>
  71.         </div>
  72.         <!-- end #content -->
  73.         <div id="sidebar">
  74.             <div id="welcome">
  75.                 <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>
  76.             </div>
  77.             <div id="sidemenu">
  78.                
  79.             </div>
  80.         </div>
  81.         <!-- end #sidebar -->
  82.         <div style="clear: both;">&nbsp;</div>
  83.     </div>
  84.     </div>
  85.     </div>
  86.     <!-- end #page -->
  87. </div>
  88. <div id="footer">
  89.     <p>FOR OFFICIAL USE ONLY.</p>
  90. </div>  
  91. <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
  92.     <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server" />
  93. </asp:ContentPlaceHolder>
  94. <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
  95. <SharePoint:DelegateControl ID="DelegateControl2" runat="server" ControlId="PublishingConsole"
  96.    PrefixHtml="&lt;tr&gt;&lt;td colspan=&quot;4&quot; id=&quot;mpdmconsole&quot; class=&quot;ms-consolemptablerow&quot;&gt;"
  97.    SuffixHtml="&lt;/td&gt;&lt;/tr&gt;"
  98.    >
  99. </SharePoint:DelegateControl>
  100. </asp:ContentPlaceHolder>
  101. <div id='printalert' style='width: 100%; height: 100%; border: #99ccff 2px solid;font: bold 8pt tahoma; display:none;'>
  102.     <table style='width: 100%; height: 100%;' border="0" cellpadding="0" cellspacing="0">
  103.         <tr><td align='center'>This display is not formatted for printing and your prints may not look as expected.</td></tr>
  104.         <tr><td align='center'>If you need to print, you should use Snagit to capture what you need.</td></tr>  
  105.     </table>
  106. </div>
  107. <div style="display:none">
  108. <SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
  109.     PrefixHtml="&lt;div&gt;&lt;div&gt;"
  110.     SuffixHtml="&lt;/div&gt;&lt;/div&gt;"
  111.     MenuNotVisibleHtml="&amp;nbsp;">
  112.     <CustomTemplate>
  113.     <SharePoint:FeatureMenuTemplate ID="FeatureMenuTemplate1" runat="server"
  114.         FeatureScope="Site"
  115.         Location="Microsoft.SharePoint.StandardMenu"
  116.         GroupId="SiteActions"
  117.         UseShortId="true"
  118.         >
  119.         <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
  120.             Text="<%$Resources:wss,viewlsts_pagetitle_create%>"
  121.             Description="<%$Resources:wss,siteactions_createdescription%>"
  122.             ImageUrl="/_layouts/images/Actionscreate.gif"
  123.             MenuGroupId="100"
  124.             Sequence="100"
  125.             UseShortId="true"
  126.             ClientOnClickNavigateUrl="~site/_layouts/create.aspx"
  127.             PermissionsString="ManageLists, ManageSubwebs"
  128.             PermissionMode="Any" />
  129.         <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
  130.             Text="<%$Resources:wss,siteactions_editpage%>"
  131.             Description="<%$Resources:wss,siteactions_editpagedescription%>"
  132.             ImageUrl="/_layouts/images/ActionsEditPage.gif"
  133.             MenuGroupId="100"
  134.             Sequence="200"
  135.             ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);"
  136.             />
  137.         <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
  138.             Text="<%$Resources:wss,settings_pagetitle%>"
  139.             Description="<%$Resources:wss,siteactions_sitesettingsdescription%>"
  140.             ImageUrl="/_layouts/images/ActionsSettings.gif"
  141.             MenuGroupId="100"
  142.             Sequence="300"
  143.             UseShortId="true"
  144.             ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
  145.             PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
  146.             PermissionMode="Any" />
  147.         <SharePoint:MenuItemTemplate runat="server" id="MenuItem_AllContent"
  148.             Text="All Site Content"
  149.             Description="All Site Content"
  150.             ImageUrl="/_layouts/images/ActionsSettings.gif"
  151.             MenuGroupId="100"
  152.             Sequence="400"
  153.             UseShortId="true"
  154.             ClientOnClickNavigateUrl="~site/_layouts/viewlsts.aspx"
  155.             PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
  156.             PermissionMode="All" />
  157.     </SharePoint:FeatureMenuTemplate>
  158.     </CustomTemplate>
  159. </SharePoint:SiteActions>
  160. </div>
  161. <asp:ContentPlaceHolder ID="PlaceHolderFormDigest" runat="server">
  162.     <SharePoint:FormDigest ID="FormDigest1" runat="server" />
  163. </asp:ContentPlaceHolder>
  164. <input type="text" name="__spDummyText1" style="display: none;" size="1" />
  165. <input type="text" name="__spDummyText2" style="display: none;" size="1" />
  166. </form>
  167. <!--- --- ---  Leave the following placeholders beneath all page content --- --- --->
  168. <asp:Panel ID="Panel1" visible="false" runat="server">
  169. <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
  170. <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server"/>
  171. <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />
  172. <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server"/>
  173. <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>
  174. <asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server"/>
  175. <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/>
  176. <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>
  177. <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
  178. <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/>
  179. <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server"/>
  180. <asp:ContentPlaceHolder ID="PlaceHolderHorizontalNav" runat="server"/>
  181. <asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server"/>
  182. <asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server"/>
  183. <asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server"/>
  184. <asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server"><IMG SRC="/_layouts/images/blank.gif" width=138 height=1 alt=""></asp:ContentPlaceholder>
  185. <asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server"></asp:ContentPlaceHolder>
  186. <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server"/>
  187. <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server"/>
  188. <asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server" />
  189. <asp:ContentPlaceHolder ID="PlaceHolderTitleBreadcrumb" runat="server"/>            
  190. <asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" />
  191. <asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server" />
  192. <asp:ContentPlaceHolder ID="PlaceHolderSiteName" runat="server"/>
  193. </asp:Panel>
  194. <!--- --- ---  End of Hidden Placeholders --- --- --->
  195. </body>
  196. </html>

So there is the Master Page. It is very different than a standard WSS master page, but it does work! In my next post, I will go over the stylesheet code used to make this.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)