Who’s the Man Blog

I recently just finished a project to convert a marketing website design my organization is using into a fully functional sharepoint site. I think the number one rule I tried to hold myself to was “Don’t Touch the Master Page!”. When I started working with Sharepoint and I wanted to change the look and feel of a site I would just start editing default.master page in Designer. While this is a valid method I have learned much more effective ways without the likelyhood of breaking something.

1) Always begin with a OOTB masterpage that best meets the style you are going for (OK in WSS there is only one but you can download the Master Page pack from Microsoft) I like blueband.

2) Install the developer tools for the browser of your choice: IE, FireFox, and Safari have developer toolbars for this purpose and I personally love Google Chrome OOTB Inspect Element.

3) Create a Style Sheet in Browser or with Designer(I Prefer Designer) and add it to the website under the  Site Settings -> Look and Feel -> Master Page -> Alternate CSS URL

 While some people might opt for adding it as a csslink to the masterpage immediately this doesn’t offer the same flexibilty of changing to another CSS file in browser. 

4) The CSS tag you should get to love is: display:none . In other words start hiding the stuff you dont need. Most likely you will not want to have the text Site Title in the upper left hand corner so just set it to display:none. Always begin with the deveopler toolbar and find where the tag value is coming from. I recommend Heather Solomon’s CSS reference to help, but be warned her CSS list doesn’t include all tags used in the MOSS Master Pages such as BlueBand.master(a personal favorite). 

5) Change the Master Page only after you realize it can’t be changed with CSS alone, also be warned its alot easy to hide a object in CSS and bring it back in a pagelayout with a inline style, then to set it as hidden. The search bar can be the worst alot of time in the publishing site I remove it and add in a custom one also to keep the look and feel I create a custom search results page so te application.master is not seen.

6) Add your style sheets to the Master Page after the last CSSRegistraion

<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/custom.css %>” runat=”server”/>

7) You made your website look great but did you ensure it still prints well? Created a basic CSS file that hides everything but the content. Diplay:none is your friend.
 <link rel=”stylesheet” type=”text/css” href=”/style library/en-US/Core Styles/print.css” media=”print” />

Here is my Print.css I already have the leftnav hidden:

 .authoringRegion, .topArea, .topNavContainer {
display:none;
}
.mainContainer{
 vertical-align:top;
}

Default Web Page before Style Sheet:

Hide Left Nav, Reposition DIV tags float left and right, expand topnav button size,hide logo and site title text increase background image in toparea and set to new image