One of my most popular blogs is Adding a Banner to your SharePoint but is for SharePoint 2007. Here is how to do it for SharePoint 2010.
Banner Image
You need to create a banner at the top of the page. The image by default is replicated so I have created a large wide image which is 2500px by 100px you won’t see the replication.
Building the CSS
We need to create our own CSS file which will be uploaded with the banner image into the same folder.
On your desktop create a new file and call it newcss.css. Open the file in notepad and add the below code. When your site is loaded, SharePoint will also look at this CSSfile but first we must tell SharePoint to look at this file.
.s4-title {
background:#F9F9F9 url('/SiteAssets/banner.jpg') repeat-x 0px 0px;
margin:0;
min-height:121px;
overflow-x:hidden;
padding:30px 0 0 310px;
word-wrap:break-word;
}
Reference CSS in V4 Master Page
As mentioned above we need to tell SharePoint to load the new CSS file.
Go to Site Actions and Site Settings. Under Galleries you will see Master pages. You will now see a list of different files and search for v4.master. Open this file in SharePoint Designer
We are going to add a line of code that will load the new CSS file. Add the code to line 36 on its own line.
<link rel="stylesheet" href="/siteassets/NewCSS.css" type="text/css" media="screen" />
All we need to do now is upload the CSS file and the banner image.
Down the left hand side of your SharePoint page click on ‘All Site Content’ and open the Site Assets library.
Upload the CSS and banner image into this library.
When you next refresh your page you will be able to see your banner on the page.
Submitted Banners
Big thanks and congratulations to Paul Martin who submitted his banner to me.
