Add a banner to SharePoint 2010

Standard

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.

image

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.

Banner

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.

image

.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

image

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" />

 

image

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.

image

When you next refresh your page you will be able to see your banner on the page.

image

Submitted Banners

Big thanks and congratulations to Paul Martin who submitted his banner to me.

moreton

Add a banner to SharePoint 2010

Standard

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.

image

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.

Banner

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.

image

.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

image

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" />

 

image

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.

image

When you next refresh your page you will be able to see your banner on the page.

image

Submitted Banners

Big thanks and congratulations to Paul Martin who submitted his banner to me.

moreton

Add a Banner to your SharePoint Site

Standard

There are several ways to add a banner to the top of your SharePoint site like below.

 

The banner sits in your global breadcrumb so you need to think about your design of your image.

I create my images in Adobe Photoshop and this is the only additional tool used in this how to.

Open up your image editor (Photoshop) and start with a blank canvas that is width of 2200px and height of 100px.

When your SharePoint page loads it will load this image from the left hand side so any images like a logo need to be aligned to the left.  If a computer screen is at 1024 x 800 it will only show the first 1000px.

So add a logo, a bit of text and anything else you want to add.

We need to create our own custom css file, so on your computer create a new text file and rename it to custom.css.  Dont forget to change the file extension as well so its not .txt at the end.

In the file you want to add the css reference which is below

.ms-globalbreadcrumb{
font-size:8pt;
text-align:right;
background-color:#ebf3ff;
padding:2px 10px 2px 5px;
}

This is the same as the default CSS’s used in SharePoint so we need to edit it so an image appears instead of a colour and the padding.

So as a new line we will add

background-image:url(“/_layouts/images/banner.jpg”);

And change the padding to

padding:2px 10px 79px 5px;

Save the file and open your top level SharePoint site.

Create a new document library and hide it from your Quick View Panel.

Upload the banner file and the custom.css file

We now know the URL of the banner and we need to add this to the custom.css file so it can load the correct file.

Right click on the banner image and click on Copy Shortcut.  Open the custom.css file and change the background-image URL to the location of the new banner.

Now right click on the custom.css file and click on Copy Shortcut.

Now go to Site Actions – Site Settings and click on Master Page.

Here you can specify your own css file – scroll down to the bottom of the page and select; Specify a CSS file to be used….and paste the URL of the custom.css file.

If you want to have this css file for all your subsites click on the button below

When you’ve set all these click on OK and you will see your site with a nice new banner

Technorati Tags: ,