SharePoint 2010: Site Title and Icon - Change the Font Size, Face or Hide It

 

Customizing the site title is a bit harder in 2010 than in 2007 as the site title is part of a larger navigation area that includes the title, a "crumb trail" and the View menu. In this article we will look at using CSS to change the font, color or size of the text. Also see here to change how the whole navigation and crumb trail area works.

 

Here's the home page of a site. "Demo Site" is the name of the site.

 

 

The following shows the title, crumb trail and view menu for a library. "Demo Site" is the title, "Shared Documents" is a library and "All Documents" is both the current view and the view dropdown menu button.

 

 

Here's a similar site with the view menu clicked:

 

 

So as you can see, there a lot of pieces to change to customize the title area in 2010. Now lets take a look at what is required to make the changes for a sample like this one by just using CSS:

 

 

You would most likely want to make this kind of change for an entire site rather than a single page by using a master page edit. If you want to make these changes for a single page just add a text file with the CSS to a library, add a Content Editor Web Part and then link to the text file.  You could also just edit this page in SharePoint Designer and add the CSS to the page.

 

To make your changes available for all pages in your site, add them to the site's master page.

 

Steps:

1. Open your site in SharePoint Designer 2010 (see Chapter 6)
2. In the "Navigation - Site Objects" pane click Master Pages
3. Right-click your site's master page (typically v4.master) and select "Edit in Advanced Mode"
4. Search for "</head>" and insert your style block before the </head> tag

           

 

Here are some of the CSS tags to experiment with:

Changing fonts and colors using CSS

Each part of the page can be hidden or changed by using a CSS style. Here are the styles and the parts:

.s4-titlelogo
#s4-titlerow	The entire title row including "I Like It" and "Tags & Notes"
.s4-titletext h1 a	The site title text
.ms-WikiPageNameEditor-Display	Title of any wiki-style page (home page of a Team Site or a page added with "Site Actions, New page"
.s4-titletext h2 a	List/Library name
.s4-titletext h2	Folder name
#zz17_ListTitleViewSelectorMenu_t	Current view and view selector
#onetidPageTitleSeparator	The triangles between the items ""

Note: "." indicates a class while "#" indicates an ID

 

To hide everything after the title:

<style>

.s4-titletext h2 <!-- everything after the site title -->
{
display:none;
}

#onetidPageTitleSeparator <!-- The triangles between the items -->
{
display:none
}

</style>

 

Here's a set of sample styles to change the Site Title, the List Name and the View Selector:

<style>

.s4-titletext h1 a <!-- The site title text -->
{
color:Blue;
font-size:24pt;
}

.s4-titletext h2 a <!-- list / library name -->
{
color:red;
font-size:18pt;
}

#zz17_ListTitleViewSelectorMenu_t <!-- current view and menu -->
{
color:green;
font-size:12pt;
}

</style>

And here's the page using the above styles:

 

.