Customizing the Look and Feel of Microsoft Office SharePoint Server (MOSS) 2007 - Custom Chrome / Branding

Comments (56) | Share

Microsoft Office SharePoint Server 2007 – Custom Chrome / Branding

PREFACE

If the graphics snapshots do not paste over in this document (to the blog) please feel free to email me, including an email address for yourself, and I will send you this final draft, in MS Word format, including all graphics/screenshots.

REVIEW

After deploying MOSS and my first site collection, obviously the first thing I want to know is how can I customize the look and feel?

Thus begins my journey down Chrome Lane and my first of a multi-part series on customizing the look and feel of WSS v3 / MOSS 2007 sites (v3 bits / sites).

As you have no doubt read and heard several times, v3 sites leverage the .Net 2.x Framework and implement master / content pages. Whether you are new to, or seasoned with this approach, I hope the following provides some insight into the ways you can customize your v3 sites.

Foremost, this approach is a simplified example of customizing and the approach is 1 of many you can take. This approach is not exhaustive and certainly not applicable to all v3 deployments. Please allow me to explain…

MOSS provides many feature-rich templates for each optional site collection you can deploy under a web application (a web application is an IIS web application, and previously referred to as a virtual server in v2 days). If you deploy a Team Site, or Internet Presence Site, each of these provides the developer a set of templates that can be used / customized further for that site collection. It is important to note here that the actual templates provided are different from 1 site collection to another. Why is this important? For this presentation, the customization that we are going to do will be specific to the master page provided for the template of the site type. More specifically, if you deploy a Blank Site or a Internet Presence Site, the templates for the master pages will be different, and you will have to understand these differences to apply this approach to each of the different sites. Let’s get started and you will see what I mean.

CHROME LANE

We are going to deploy a web application and 1 site collection for that web application. Here we will work with the My Company Site, and the site collection is an Internet Presence Web Site template-base.

As we proceed I will reveal the out-of-the-box templates and setup derived from publishing this site template.

I could proceed on the predicate that you can create a web application and the site collection for that web application – but I’ll walk through this piece by piece. Please forgive the lengthy posting and the many screen shots – I simply want to try and be as thorough as possible.

ASSUMPTIONS

MOSS 2007 is installed and configured on your server. Further, you have configured the services that should be running on this server. If you are not familiar with these, please review the following screenshot and ensure that you have at least these services running (you get to this screen by opening the Central Administrator and clicking the server name under Farm Topology.

Ensure that your services are started – as indicated in the above figure.

Finally, we are going to customize our site by placing a banner object in the titleArea (we’ll get into this when we open the SharePoint Designer and begin to customize the template), and we are going to customize the toolbar. To do these things we have created custom graphics – 1 for the banner display, and 1 for the toolbar – which is a small GIF image, 40px high that we’ll repeat-x across the toolbar space – basically overriding the default out-of-the-box GIF used by SharePoint.

We will begin by creating our web application on a specified port on this server.

THE FUN BEGINS!

Launch the SharePoint Central Administrator. Click on Application Management.

Under SharePoint Web Application Management choose the first option Create or extend Web application.

On the next screen click Create a new Web Application.

In the IIS Web Site section, fill in the Description field with My Company Site, and for the Port set it to 10000.

In the Security Configuration section, set the Allow Anonymous: to Yes.

In the Application Pool section, set the Create new Application Pool / Application Pool Name to MyCompanySite.

Under Select a security account for this application pool, select Configurable and enter the User name and password fields appropriately. I used the Administrator account.

You can accept the rest of the default properties, scroll the page to the bottom, and click OK. This may take up to several minutes to create the web application.

When the web application is created, you will see a screen similar to the following:

We want to click the first link Create a new Windows SharePoint Service web collection.

The Web Application will be on the machineName:Port we created it on.

For the Title and Description enter My Company Site.

Under Web Site Address change the radio button from the default of Create site under this URL: (URL Name) to the 2^nd option Create site at this URL: (URL path:) and leave the (root) path. (I will go into this in more detail in another post.)

For this exercise, under Primary and Secondary Site Collection Administrator enter the Administrator account.

Under Template Selection select Internet Presence Web Site and click OK.

It may take several minutes for the site collection to be created. Once it is complete let’s browse to our new site root. We do this by browsing to http://machineName:10000 – where machineName is the name of the server you have installed MOSS on. If all went well and you have browsed to the new site, your screen should be similar to the following:

If you select the top-right Site Actions drop-down, and select Edit Page you will see a template that provides a Page Image and two Summary Links content panes, as well as three webpart zones. This page is derived from the WelcomeSplash.aspx. I can confirm this by selecting Site ActionsàManage Content and Structure and then selecting Pages in the left treeview. On the right I’ll see a default.aspx and to the far-right, you’ll see the template it derived from. We are not going to get into modifying templates in this posting, but I wanted to help you understand some of the out-of-the-box aspects and how your template was created by default.

I want to review one more thing before we begin. SharePoint also uses a default master page and set of style sheets for this site. To see what the default master page is, select Site ActionsàSite SettingsàModify All Site Settings.

Under Look and Feel click Site Master Page Settings.

Under Site Master Page notice that our master page is TopNavFlyOuts.master. We will do some customization here to implement our custom look and feel. Scroll this page down and notice under Alternate CSS URL there is a style sheet referenced called Blue.css. We are going to be replacing this as well.

Out-of-the-box, the Blue.css is an empty file that we can edit and use to override some of the classes that drive the master page TopNavFlyouts.master (Top Nav). Top Nav has a style sheet called TopNavFlyouts.css that is used when the master page is rendered.

For now, select Site ActionsàManage Content and Structure. In the left treeview, expand Style Library, then en-us, finally, select Core Styles. Your screen should look similar to the following:

Notice that we have some out-of-the-box style sheets, and one of these is TopNavFlyouts. What is important to understand is that we have to create a new style sheet, in this Core Styles library so we can override some of the classes in the Top Nav style sheet.

We do not want to edit the Top Nav style sheet directly, but rather, create our own style sheet and override the classes that we’ll need to implement our customizations. Also, we’ll create a couple new classes in our style sheet that will handle the banner and default background images / colors.

For this exercise, I created a my.css text file with the following in it:

This has my color for the main background, and my banner properties. The three graphics that I will be using are for the banner, toolbar, and the toolbar hover/selected images.

We’ll include a custom footer in this setup and that’s why I have the my–spacerX and my–footer classes included.

My banner is 785px by 200px, and my toolbar images are 4px by 40px each. These are shown below:

 my-toolbar.gif

my-toolbar-hoverselected.gif

Each of these graphics and my my.css style sheet need to be uploaded to SharePoint before we can begin to customize our Top Nav master page.

To do this, back in SharePoint under Site Content and Structure with Core Styles still selected on the left, in the right pane, click NewàItem to upload our style sheet.

On the Upload Document: Style Library page, click Browse to browse to where you saved your my.css object. Once you have selected your file, click OK and you should see a screen similar to the following:

Here we enter a Title for our style sheet, and click Check In. You will be returned to the Core Styles and you’ll notice our new style sheet in the library.

Notice in the above image, under Style Library there is an Images folder. There is also one under the en-us folder. We want to select the one that’s actually under Style Library, not en-us. Once selected, we need to select NewàItem and here we are going to upload multiple items – our banner and two toolbar objects.

When you get to the Upload Document: Style Library screen, below the Name textbox for the image, you’ll see a link for Upload Multiple Files… - click this to browse for the banner and toolbar objects.

Once these are selected, click OK to begin the upload process. You will be prompted to confirm the upload and you will want to click Continue.

Once the upload is completed you will be returned to the Site Content and StructureàStyle LibraryàImages view. You want to scroll down and find our three new images, and click the box to the left of each image to select them. Once selected, select Actions from the menu, and select Check In (be sure to select Publish Major Version as well).

When prompted for comments about the check-in, enter My Company SIte Images and click OK.

Once this is done, in the upper-left area of your screen click My Company Site to return to the root site.

We are now ready to being our customization of the master page and override the classes from the Top Nav style sheet.

To perform these next steps you will need the SharePoint Designer 2007 installed.

Launch SharePoint Designer (SPD) and select FileàOpen Site, then type in the URL for our new site (http://:10000).

You should see a screen similar to the following once you are connected to the site with SPD:

In SPD, under Folder list expand _catalogs, then masterpage, and locate and double-click on TopNavFlyouts.aspx. When prompted to Check Out the object, click Yes and continue.

If this is the first time you have worked on this site with SPD you will be restricted from editing code at first. Do the following to resolve this:

From the menu bar select SiteàContributor Settings and you will see a dialog like the following:

In the upper Manage Contributor Groups region, select Content Authors (Default) and click Modify.

You should see a screen like the following:

From here click / enable Allow unrestricted use of SharePoint Designer and click OK. Click OK again to return to SPD with full editing capabilities.

When you return the SPD the Web Site tab is rendered. Click on the TopNavFlyouts.aspx tab to render that page. In the lower region of your designer form you’ll see Design Split Code. Click on Split and you should see something similar to the following:

We want to load our custom my.css style sheet, and the TopNavFlyouts style sheet now too. In the Folder list browse down to Style Libraryàen-us (Style Library)àCore Styles (Style Library). Double-Click our my.css object. When prompted to check-out the item, click Yes. Now double-click the TopNavFlyouts.css, but when prompted to check-out, click No.

OVERRIDING STYLES

The TopNavFlyouts.css library is used for the TopNavFlyouts.aspx master page – which you have probably already assumed. For this example, we will want to override some of the classes in this style sheet. And to do this, we copy and paste those classes into our my.css object. Yes, we can certainly get more involved and complex in our chroming / customization – but for this walk-through I am trying to keep this pretty simple / straight-forward. Soon you will see where our my.css object gets configured in SharePoint and you will understand why I took this approach.

Remember, our image is 200px high by 785px wide. By default, the Top Nav area renders by percentage, and at 100%. We will need to change this so that our screen aligns with our banner. Again, this is for this customization only – and you can play with this in a number of different ways, depending on your customization and whether or not you are introducing custom graphics or navigation.

For now, locate, and copy / paste the following classes from TopNavFlyouts.css to our my.css:

.body

.master

.search td

.search

.topNavContainer

.topNavItem

.topNavItem a

.topNavSelected a

.topNavHover a

.topNavFlyouts

.topNavFlyOutsItem

.topNavFlyOutsItem a

.topNavFlyOutsHover

You should now have a my.css object that contains the following – before any customizations have been implemented:

.my-mainbackground

{

   background-color: #B4BC97;

   background-image: url(../images/blog-background.jpg);

}

.my-mainbanner

{

   background-image: url(../images/blog-header.jpg);

   background-color: #768365;

   height: 200px;

   border: 0px;

}

.my-spacer5

{ 

   height: 5px;

}

.my-spacer10

{  

   height: 10px;

}

.my-footer

{

   background-color: #B4BC97;

   height: 15px;

   border: 0px;

   text-align: center;

   font-family: Verdana;

   font-size: 11px;

   font-style: italic;

   font-weight: normal;

   color: #ffffff;

}

.body

{

background-color:#596E9E;

height:100%;

margin:0px;

}

.master

{

width:950px;

margin-left:auto;

margin-right:auto;

height:100%;

background-color:#FFFFFF;

}

.search td

{

font-family:tahoma;

font-size: 8pt;

color: #3A4663;

}

.topNavContainer

{

background-image:url("../../images/bl_Navbar_Gd_Default.jpg");

background-repeat:repeat-x;

height:40px;

}

.topNav

{

    *position:relative;

    *top:-1px;

}

.topNavItem

{

background-image: url('../../Images/bl_Navbar_Splitter.jpg');

background-repeat:no-repeat;

background-position:top right;

font-family: tahoma; 

font-size: 8pt;

color: #294C7A;

}

.topNavItem a

{

display:block;

padding:8px 5px 0px 5px;

height:32px;

}

.topNavSelected a

{

background-image: url('../../Images/bl_Navbar_Gd_Hover.jpg');

background-repeat:repeat-x;

background-position:top right;

color: #EFF4FA;

}

.topNavHover a

{

color:#FFFFFF;

background-image: url('../../Images/bl_Navbar_Gd_Hover.jpg');

background-repeat:repeat-x;

background-position:top right;

}

SHOW ME THE CHROME!!!

Now the fun begins!

We’ll step through the change for each class, and then we’ll modify a few things in our master page and step back and see how things render.

1)      .body, and .master – Change color to #B4BC97

2)      .search td – change Color to #3A4663.

3)      .search – Remove top:-2px; altogether.

4)      .topNavContainer – change background-image: to ‘../../my-toolbar.gif’

5)      .topNavItem a – Change padding to 12px 5px 0px 5px, and change the height to 40px.

6)      .topNavSelected a – Change the background-image URL to ../../Images/my-toolbar-hoverselected.gif'.

7)      .topNavHover a – Change the background-image URL to ../../Images/my-toolbar-hoverselected.gif'.

APPLY THE STYLE SHEET

Before we proceed, let’s apply our custom style sheet to the site collection so we can see our progress thus far.

To do this, select Site ActionsàSite SettingsàModify All Site Settings.

Under Look and Feel select Site Master Page Settings.

Scroll down to Alternate CSS URL and ensure that the following is entered:

/Style Library/en-us/Core Styles/my.css

Click OK to apply the setting.

MASTER PAGE CUSTOMIZATION

We are now ready to do the final modifications to our master page.

Locate the line just below the beginning of the tag that looks like

Save the TopNavFlyOuts.master page. Once this is saved, right-click on the master page in the Folder List in Designer, and select Check-In.

When the check in dialog appears, be sure to select Publish Major Version. You should see something similar to the following:

Click OK to check-in and publish a major version (otherwise you will not see your changes immediately).

Next you should see a dialog like the following:

Click YES to proceed.

You will get to the Master Page Gallery (MPG) for your site, and see a screen similar to the following:

Hover over the Top Nav page that is in Pending status, and select Approve/reject. When you get to the approval page, you will want to ensure you click Approve before submitting. You should have a screen similar to the following:

Click OK to finalize this process.

If all has gone well, your home page should be similar to the following:

This concludes a basic chroming / customization approach. Yes, there are certainly more robust things that can be done – and hopefully this opens the door for some ideas!

NOTES

If something is not rendering properly, it is usually because something is not checked in and published fully. This will become a nuance you’ll get used to quickly J.

I am pasting the following graphics and complete source code to help you just in case you need them. The graphics are our images (4 total) that we used for the main banner, toolbar, toolbar-hoverselected, and finally, the background.

The source is the my.css first, followed by the complete topnavflyouts.master XSL code-behind (if such a thing is a valid way to state it).

GRAPHICS

Main Banner

Background

Toolbar

Toolbar – hoverselected

MY.CSS

.my-background

{

   background-color: #B4BC97;

   background-image: url(../images/my-background.jpg);

}

.my-header

{

   background-image: url(../../images/my-header.jpg);

   background-color: #768365;

   height: 200px;

   border: 0px;

}

.my-topmenu

{

background-image: url('../../images/my-toolbar.gif');

background-color: #f9da5d;

height: 40px;

boarder: 0px;

text-align: left;

vertical-align: top;

padding-top: 10px;

padding-bottom: 5px;

padding-left: 10px;

padding-right: 10px;

font-family: Verdana;

font-size: 11px;

font-style: normal;

font-weight: bold;

text-decoration: none;

color: #ffffff;

}

.my-spacer5

{ 

   height: 5px;

}

.my-spacer10

{  

   height: 10px;

}

.my-footer

{

   background-color: #B4BC97;

   height: 15px;

   border: 0px;

   text-align: center;

   font-family: Verdana;

   font-size: 11px;

   font-style: italic;

   font-weight: normal;

   color: #ffffff;

}

.body

{

background-color:#B4BC97;

height:100%;

margin:0px;

}

.master

{

width:950px;

margin-left:auto;

margin-right:auto;

height:100%;

background-color:#B4BC97;

}

.search td

{

font-family:tahoma;

font-size: 8pt;

color: #3A4663;

}

.search

{

float:right;

font-size: 8pt;

margin-left:5px;

margin-right: 0px;

position:relative;

}

.topNavContainer

{

background-image:url("../../images/my-toolbar.gif");

background-repeat:repeat-x;

height:40px;

}

.topNav

{

    *position:relative;

    *top:-1px;

}

.topNavItem

{

background-image: url('../../Images/bl_Navbar_Splitter.jpg');

background-repeat:no-repeat;

background-position:top right;

font-family: tahoma; 

font-size: 8pt;

color: #294C7A;

}

.topNavItem a

{

display:block;

padding:12px 5px 0px 5px;

height:40px;

}

.topNavSelected a

{

background-image: url('../../Images/my-toolbar-hoverselected.gif');

background-repeat:repeat-x;

background-position:top right;

color: #EFF4FA;

}

.topNavHover a

{

color:#FFFFFF;

background-image: url('../../Images/my-toolbar-hoverselected.gif');

background-repeat:repeat-x;

background-position:top right;

}

TOPNAVFLYOUTS.master

]]>

]]>

]]>

]]>

]]>

]]>

]]>

]]>

]]>

]]>

]]>

        StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="1" ItemWrap="true" AccessKey="3" CssClass="leftNav" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>">

        SiteMapProvider="CurrentNavSiteMapProvider" EnableViewState="true"

        StartFromCurrentNode="true" StartingNodeOffset="0" TrimNonCurrentHeadings="true" ShowStartingNode="false">