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


 

 

 

 

 

 

 

 

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.


 

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

58 thoughts on “Add a banner to SharePoint 2010

  1. Chunk Johnson

    It works, but on all pages except the main Site Welcome page. I was able to get this working once I supplied a fully qualifed name in the v4.master code, i.e. /usareports/Reports/SiteAssets/banner.jpg

  2. Alex

    Great walk through, would I have to change all the v4.master files for every subsite in a site collection?

    I have a new banner for my root site but my subsites remain unaffected.

  3. Alex

    Previous message can be ignored, I activated publishing features and applied the master page to all sub sites under Site Action->Site Settings->Master Page

  4. Ben

    Great walk through, Can this be expanded to put custom URL’s into the banner (hotspots)?

    This could then offer core links to students/Staff/email. This may offer simple navigation for common items.

  5. tony

    first thanks! i’m just having one issue. if i use IE any version is see the layout change but no graphic. I then open Chrome or firefox and the layout with the graphic is there… any ideas?

  6. M

    None of this worked for me. Why not. I literally copied and pasted the css text into notepad and saved it as a CSS file. I creaded a jpeg and since I couldn’t change the pixel to the measurements above, I picked my own. I went to site assets and added a document and uploaded the two files. I refreshed my page and I’m still not seeing anything. What did I do wrong?

  7. Bongiwe

    Firts thank you for sharing your knowledge. I hve same problem as the *M 18/08/11* I have tried everything nothing work. Please assist

    • M and Bongiwe,
      Where are you uploading the css file to? Make sure when you reference the css file in the master page that it is the correct URL to the file and that the images are the correct URL in the CSS file as well.
      Get in touch again if you need more help with a bit more details of where things start going wrong.
      Thanks
      A.

  8. Bongiwe

    Thanx for prompt response

    The fies are saved under all files(site objects)/SiteAssets/banner.jpg and the css is in the same folder as NewCSS.css

    Below is where the line of code is (line 36), c below

    [……

    ……………]

    and the css code I copied as is , only change n changed S and A to capital letters, but even if I change it to small letters there is nothin
    .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;
    }

  9. M

    Hi,

    I have two locations that I saved it:

    1. All Site Content – Site Assets
    *Upload document (banner)
    *Upload document (New CSS)

    2. All Site Content – Site Assets – Site Pages
    *Upload document (banner)
    *Upload document (New CSS)
    I changed the CSS code indicated below with the hopes of making this banner show on my homepage:

    .s4-title {
    background:#F9F9F9 url(‘/Home/banner.jpg’) repeat-x 0px 0px;
    margin:0;
    min-height:121px;
    overflow-x:hidden;
    padding:30px 0 0 310px;
    word-wrap:break-word;
    }

    SIDENOTE/ADDITIONAL QUESTIONS:

    1. I created an adobe mockup for a template to an intranet that I am building in SharePoint 2010. The images that I am uploading are snippets from this file. Could that be the problem?

    2. Is there a way for me to use my Adobe Photoshop file as a template for my new SharePoint 2010 Site?

    3. I’d like to also add a header with the company logo, how do I do this?

    4. How do you create fun shapes as pictures and make the pictures create a hoover over drop down menu effect in SharePoint 2010.

    5. How do you use the my sites tab to populate on the main SharePoint home page. So you can see everyones “My Site Page”

    6. How do you use the IM feature for SharePoint 2010? Does it have to be MSN, Yahoo, AIM, etc. How does that work?

  10. M

    Please excuse the multiple comments, I was trying to get my code to show on the screesn. I’m going to stop now. I hope that’s enough information to help me out. Thanks. M~

  11. M,
    You mentioned that you are putting the CSS code in line 36 – 43. This should not be in the master page it should be in the CSS file – there should only be 1 line of coded added to the masterpage.
    Alex

  12. M

    Alex, Thanks for your assistance. However, I’m still unable to get the image on the main page. I’ve tried every option I could think of. The master CSS was changed so that the background url could be of the image; The image was modified in SharePoint Designer, and now I have outdone myself and still no success. I’m in need of some serious help. Is there a tutorial you can refer me to so that I can read the steps in layman’s terms and follow that?

  13. Great article, branding has been covered extensively for 2007 but it’s good to see that there are articles starting to filter out about 2010. I have seen lots of books and read afew about 2010 but most are feature sets or rehashed 2007 dribble about how to use libraries and views etc. Keep up the good work 🙂

  14. Omega

    A developer set up the CSS page for our site. However, when I change the banner the only page affected is the main/home page. It is not cascading down to the other sites. What do I do?

  15. Hey M. I dont know if you’ve got it fixed yet, but I had the same problem and eventually realised that I needed to put in the full URL linking to the image in the CSS before it found the image.

    .s4-title{
    background:#F9F9F9 url(‘http://site.com.au/SiteAssets/SP2010%20banner1.bmp’) repeat-x 0px 0px;
    margin:0;
    min-height:100px;
    overflow-x:hidden;
    padding:30px 0 0 310px;
    word-wrap:break-word;
    }

  16. Shellie

    I was able to get it to work, but the banner that I am using I guess because of the color is hiding the Site Title and social tags. What can I do to prevent this. I thought I could insert another row in the table and move the title and tags down, but that just caused an error on the page.

  17. Elliott

    Hi Alex,

    Question for you: When I upload the .css file, the line:

    background:#F9F9F9 url(“http://sharepoint/sites/gfscogs/TestSite/siteassets/Banner.jpg”) repeat-x 0px 0px; (My full site)

    Automatically becomes:

    background:#F9F9F9 url(‘/SiteAssets/banner.jpg’) repeat-x 0px 0px;

    When I have the full site in their, the banner works (tried putting it in using the “view source” mode in IE9. But, the CSS file automatically shortens the link everytime I try and upload! Can i prevent the auto-shortening of links?

    THANKS!
    Elliott

  18. Robert

    I’m trying on a Enterprise wiki site, it works but if i apply a theme example Cay the background image on s4-title disappears, if i revert back to “no theme” the image is back.
    I’m not understanding why.

  19. Top advice there as I was trying to brand our IT Team intranet site before it goes out to all domain users.

    I did get the issue mentioned by Tony (4/5/11) – no banner showing. I found the path to my Site Asset library was not as per your example in the CSS, but a quick tweak on the URL sorted that.

    Many thanks, Ellya

  20. FameTheWise

    Oi!

    Let me start by thanking you, I’m still a SP novice and especially in designing SP. But with this blog it made it easy for me to provide a banner.

    Then I wanted to ask you guys a question, because I’m experiencing problems. First I’ve teste this within a test enviorment which all worked out well. Then I’ve implemented it into our production enviorment and it also worked. The only thing I did different is use another name for the CSS file and another name for the Banner, which I both editted in the code in the master and css file. It all looked good but I got feedback from users saying they can’t see the banner. Strange things. I let someone access the banner and css file directly by providing them the

    http:///SiteAssets/CSS_file.css
    http:///SiteAssets/Banner.jpg

    And it worked, even though he had to authenticate a first time he had permission to access both files. He could even download the css file. Because it all works when I try it I was guessing it could maybe be some permission problem so I gave ma collegue Full Access but again he said it doesn’t work. Tried to clear the cache and switched banner file to make sure I’m not loading from cache while it’s actually broken but I’m able to see the changes.

    How come?

  21. FameTheWise

    Thanks for this post, it helped me a lot, although I’m still experiencing some problems. I’ve tested this on my test environment where it all worked out great, after that I’ve implemented it on my PROD. From the template above I’ve changed some values to make it smaller and to get the icon back to the left side.

    Now the problem I’m experiencing is that I (site admin and the user who implemented the changes) can see the banner/changes applied but other users can’t. It’s really strange when I log on from their workstation I can see the banner, so it would seem like some kind of permission error? Can they load the CSS? Can they load the banner? When I gave a direct link to SiteAssets/CSSfile.css and SiteAssets/Banner.png they both show up and it didn’t result in some kind of permission error.

    How come?

  22. Thierry

    Alex,

    Kudos for the post, the tutorial was simple and easy to follow, I did however experience some initial difficulties in getting the banner to display. I experienced success, after tweaking the CSS’s position attributes and specifying each option seperately.

    .s4-title {

    background-image:url(‘Images/Banner.jpg’);
    background-position: 0px 0px;
    background-repeat:no-repeat;
    background-color:#F9F9F9;
    margin:0;
    overflow-x:hidden;
    padding:30px 0 0 310px;
    word-wrap:break-word;
    }

    Ensuing that I continued my experiment to see If I could place a background image in the main window area which was established with the css below.

    I thought that I would share this finding with Alex and the community.

    The Core4v.css element that needs to be overwritten is included below.

    Simply copy and paste this code below and upload a suitable image to your preferred path.

    Thanks and Good Luck

    .ms-rtestate-field TABLE,.ms-rtestate-write TABLE
    {
    border-collapse:collapse;
    background-image:url(‘Images/OfficeBackGround.jpg’);
    background-position: 0px 0px;
    background-repeat:no-repeat;

    }

  23. samo

    Dear Thierry,
    I’m facing the same problem, the banner is not displaying after following the above steps… ur customization need to be more clarified:
    “.ms-rtestate-field TABLE,.ms-rtestate-write TABLE
    {
    border-collapse:collapse;
    background-image:url(‘Images/OfficeBackGround.jpg’);
    background-position: 0px 0px;
    background-repeat:no-repeat;

    }”
    where to place it exactly????

  24. samo

    It’s working now … but 1 more question: with ur banner size you cover all the ribbon server area right??? it won’t be problem if we view the site with screens which have other resolutions????

  25. abdul

    i have a little problem , i got the banner perfectly but when i logged out from my website the banner vanished , its not visible for anonymous user. help!

  26. Gregory

    Hello everyone. Great post. I followed it and was FINALLY able to add a banner to my site. I have had much difficulty in the past and this was very well made.

    Question:
    I log into a network. I am able to view the banner on my computer but when other users open the Sharepoint site they are not able to view the newly added banner. I am assuming It’s a permissions issue but is that permission issue within Sharepoint and can it be adjusted to enable everyone to see the new banner? I have gone into Site Settings–under Look and Feel I chose Master Pages and within that I “checked” the “Reset all subsites” boxes. And this did not work.

    Any suggestions?

    Thanks in advance.

  27. Abdul

    this is awesome …
    how to get fixed Banner?? because when i change the resolution the banner is repeating and its not look gud … when change the resolution the banner should b fixed lenght?? please suggest

  28. Sacha

    Excellent article on sorting a banner! I got this to work no problems! BUT, the banner sits over the top of the breadcrumb/Icon? How do I get them to sit to the side of the banner as shown in your example, i.e. you have Dev > Home to the side of the banner?

  29. Chris

    Great job, you made this much easier that a few other sites I came across. I’m now stuck though with how to have all text in the banner area white since my banner is black in any area where the text would be (I can change the site name white but nothing after that shows in white). Could you lead me in the right direction on that?

    • Chris,
      Thanks for the comments. You want to have a look at a plugin for firefox called firebug. It will show you what the references are within the CSS so you can then change and play in firefox. You can then copy that CSS reference and put it into the existiing CSS you created for the banner.

  30. Robin

    I was able to implement this and it worked great. Now, I would like to link the background to the site url, is there an easy way to do that? – Thanks a bunch!

  31. nazmul

    I’ve got the banner in the master page but it comes twice in the banner area.how do i fix it to get one image in the banner area which is not reapted.

  32. John

    This worked great for me too. And I second Robin’s question, is there a way to make the banner clickable to go to a URL? Thanks!

  33. Juliana

    I got this to work the first time but the banner disappeared after refreshing the page! I tried to implement the code again but it no longer appears. Help!

  34. Jimmy

    Hi, I’ve got the same problem as Gregory , I can see the banner on my computer , but other users couldnt see it at all using their computer. I/ve also checked in the master page . Any solutions for this problem? any help would be much appreciated.

  35. vipit ja pienlainablogi

    Interesting blog! Is your theme custom made
    or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine.
    Please let me know where you got your design. Thank you

  36. PaoPanda

    I copied everything you did however my banner did not load up on IE :C, then I checked the code on line 36 the word link has red squigly lines and an error telling me that in XHTML 1.0 strict the tag cannot contain a tag

  37. subha

    Hi, I am trying add tool tip/alt text on banner background image so it can pass 508 compliance. Any idea will be highly appreciated.

    I am placing the banner image on css file (see below):

    .s4-title {
    background:#F9F9F9 url(‘/sites/something/SiteAssets/something.jpg’) no-repeat;

    margin:0;

    min-height:125px;
    overflow-x:hidden;
    padding:30px 0 0 310px;
    word-wrap:break-word;

    }

  38. Lauren

    Hi Alex, could you post a revised edition of this resolving the issues above? It’s quite difficult to follow the comments, and the original instructions are not working for me either. Thank you.
    Lauren

Leave a Reply

Your email address will not be published. Required fields are marked *