SharePoint 2010 Navigations Logo Theme Customizations

Introduction

In this article, we can see how to create navigation links, logo changing, and other customizations. In the real world we will need to configure these items.

Scenario

Following are the requirements which we are going to accomplish here:

• A company with name XYZ Corporation
• A site collection with two sub sites
• Site names are Home, Reports
• Home site contains Contacts and Tasks list
• Reports site contains Documents library

Following is the tree level view:

Following is the banner of the company to be displayed on the home page:

Following is the logo of the company to be displayed on the Title panel:

Site Collection Creation

You can create a new site collection from Central Administration.

Create a site collection named XYZ Corporation

Now the new site looks like below on entering the URL:

Customizations

Now we can start with the customizations.

Quick Launch

The Quick Launch is the area where the Lists and Libraries are displayed. We need to modify this as the first step.

According to the requirements, the Home page should contain only two lists named Tasks and Contacts. So manually delete an unwanted list or library, create the Contacts and Tasks list as shown below.

(List > List settings > Delete)

You can see that the groups Libraries and Discussions are unwanted.

Navigation Link

In order to delete this, use the Site Actions > Site Settings > Navigation link as shown below:

If you cannot see the above link, you need to activate the following feature from Site Actions > Site Settings > Site Collection Administration > Site collection features.

The feature to be activated is SharePoint Server Publishing Infrastructure, as shown below:

After activating the above feature, you will get the Navigation link enabled. You need to wait for some time for the activation to be completed. Open the Navigation link and you will get the screen below:

You can delete the Libraries and Discussions heading from the box and click the OK button.

(You can even change the order of Tasks and Contacts.)

Now the site home page looks like below:

You can see that the unwanted items from the left side Quick Launch is removed. Our next task is to clear the Announcements item from the central area.

For this, use the Site Actions > Edit Page option, select the webpart, and click the Delete menu item.

You can repeat the same for the other webpart in the right hand side. After removing the webparts, use the Stop Editing button to save the changes and return to home page.

You can also try changing the Title of the home page using Site Actions > Site Settings > Title, description, and icon link.

Logo

Before customizing the logo and banner, we need to place the image files in the _layouts/images folder. Please note that _layouts is a virtual folder and the actual pointing folder is different. To go to the actual folder, open INETMGR from the Run window and open the web application for our site collection.

Select the images folder and click the Explore button from the right pane. In the appearing file explorer window, place the two images under images folder.

Please note that this folder is pointing to the 14 hive folder of SharePoint. In a multi-farm deployment, the images should fall into the web front end server folder.

Note: You should select the images folder under Layouts and click Explore. Otherwise a different folder will be pointed and the image path may not resolve correctly.

Back to the Title, Description, and Icon screen, enter the logo URL as shown below:

Click the OK button to save changes and your site should be ready with a logo.

Banner

Now we need to add the XYZ Banner image into the Home page. You can use the Site Actions > Edit Page option to bring the page in edit mode.

Insert an Image Viewer web part from the Media and Content group as shown below:

Use the Edit Web Part option to bring the Tool Part of the webpart.

In the appearing Tool Part window, set the following properties:

• Image URL
• Image Vertical Alignment
• Image Horizontal Alignment

Click the OK button to save the changes. You can see the Home page as below:

Adding New Site

Now we need to add the new site named Reports. Use Site Actions > New Site option to create a new site from the Blank Site template.

You can see that the newly created site is missing the link to Home page as shown below:

To add the Home Page, you need to enable the Navigation link option. 

For this you need to go to the Home Page, Site Actions > Site Settings > Navigations > Show Sub Site option enable.

Click the OK button and the site looks like below:

Now you are ready with Navigations and Customizations. You should be able to add the remaining document library inside the Reports sub site.

Themes

SharePoint comes with a set of built-in themes. You can access it using the Site Actions > Site Settings > Site theme link as shown below:

You will get the following list of themes:

You can change the theme by selecting one of the above. For more customizations, you can use the color picker associated with each item.

For advanced customizations of layout and CSS changes, we need to use Branding. Usually the internet facing SharePoint sites will be using Branding and it is up to your decision whether to choose branding for intranets too.

References

• Site Navigation Overview
• SharePoint 2010 Branding
• Ten Branded Sites

Summary

In this article we have seen how to create navigation links, quick launch items, and other customizations. I hope you were able to go through the underlying features involved.