Supporters of End User
Web

Hack SharePoint Master Pages: Part 2 - How to include CSS files

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:SharePoint Designer; Javascript and jQuery; CSS; Branding; Site Manager/Power User; MOSS; WSS; 2010

You may also be interested in: SharePoint Search and List Previews by Vizit

 

Editor's note: Contributor Marc-André Bilodeau Lamontagne is a .NET developer at Group GSoft. Follow him @forumma

In the two first articles, we learned what a master page is and how they are used inside SharePoint. There is one more step to be ready to start editing the master page and improving the look and feel of your site. In this article, we are going to see how to include custom CSS and JavaScript files in the master page.

In this article, we are going to edit the v4.master, a master page coming out-of-the-box with SharePoint 2010. The best practice is to never edit an out-of-the-box master page for several reasons. The principal reason is if you want to return to the original master page, you will only need to change the default and the custom master page to the unedited v4.master and you will be back to the out-of-the-box layout. So, the right way to edit the v4.master, is to make a copy and work on the copy. You can use SharePoint Designer 2010, to make a copy of your master page. Don’t forget to set your copy as the default master page of your site to use it.

To set your copy of as the default master page, you need to be in SharePoint Designer in the list where your page is stored. You can select your master page and in the ribbon, in the Actions section, click on “Set as Default” or “Set as Custom”. You can also right click the file and in the context menu, click on “Set as Default Master Page” or “Set as Custom Master Page”

2012-05-17-HackMasterPages-Part02-01.jpg

Including CSS file into the master page

First of all, you need to know what a CSS is. It’s within the Cascading Style Sheet (CSS) that you set the style to display HTML elements on your page. This is not the topic of this series, but you can see Benjamin Niaulin’s series to learn more about CSS.

The best practice is to put all your CSS code in CSS files. Another way to add style to your page is to write the CSS code inline into your page. However, this makes the code impossible to reuse. You will need to copy the code into each page where you want the style and if you change a property, you will need to edit every page. If you put all your CSS code into files, you will be able to reuse it and it will be easier to maintain.

We now need to create a CSS file for this exercise. We will use an example given by Benjamin Niaulin in part 2 of his series. To create a CSS file, you need to open a text editor, like notepad, copy/paste the following code and save the file as: style.css.


DIV #s4-topheader2  {
     background-image: none; 
     background-color: #323232; 
     padding-top: 4px;
     padding-bottom: 2px;
}

Once your CSS file is created, to be able to use it in the master page we need to first upload the files to the server. To upload your files, you need to open SharePoint Designer 2010, connect to the Site Collection and go into the “All Files” section. You will now have the entire files list; you need to open the “Style Library”. There is the place to put all your “style” files. I suggest you create a folder inside the “Style Library” to regroup all your files together. For this article, let’s create a “Theme” folder with a “style.css” file inside. In fact, you can put your file wherever, as long as your code maps to that location.

2012-05-17-HackMasterPages-Part02-02.jpg

The next step is to edit the master page to link it to your CSS file. I have already explained in part 1 how to edit a master page, so you can refer to this article if you don’t remember. In the code, you need to find the “</head>” HTML tag and put the following code just before.

Download: CSS for Master Page

There are a lot of different ways to link your CSS and your master page. But I've found that this is the best way to be sure your master page is using the files you upload in the “Style Library” of your site collection, no matter if you are in a subsite or not. This approach works even on a SharePoint Server site and a SharePoint Foundation site, which is not the case for every other methods.

You now can see in your page, the “home” in the global navigation is another color, so that is proof your CSS is being used by the master page.

2012-05-17-HackMasterPages-Part02-03.jpg

Including JavaScript file into master page

To brand your site, you will probably need some JavaScript. With JavaScript you will, for example, be able to use nice JQuery control, as explained by Maxime Soucy in his series of articles. I will not go deeper into the subject because this isn’t the main topic of this article. For now we will learn how to include a JavaScript file into a master page.

It’s really similar to the CSS. There are a lot of ways to do this, I will explain the best one I've found for the same reason I’ve already explained in the CSS section. This code also needs to be placed before the “</head>” HTML tag into your master page.

Download: JavaScript for Master Page

For this example, I assume you have a script.js file in the following folder: "/Style Library/Theme/Scripts/script.js”.

We are now able to use external files in our master page. In the next article, we will look at the major areas of a SharePoint interface and look at how the master page is affecting these areas. After this, we will be ready to start improving the look and feel of our SharePoint site.

Comments

Scott

Master pages

When I modify master pages, I get nothing but errors.

Posted 18-May-2012 by Scott
Benjamin Gournay

Good one !

Very useful article !
Marc-Andre you are a sharepoint killer now :-)

Posted 19-May-2012 by Benjamin Gournay
Chris

Great

Fastest way to show people that SharePoint 2010 is cool is to change the design - start with the master page:-)

Posted 19-May-2012 by Chris
Natasha Felshman

Download Scripts

We've added links to download the scripts. 
 
Thanks,
Natasha

Posted 20-May-2012 by Natasha Felshman
Marc-André Bilodeau Lamontagne

Try the new code

@Scott : Try with the new code added by Natasha. In the previous version, there was an error with the "HTML number". Keep me up if you still have problems.

Posted 22-May-2012 by Marc-André Bilodeau Lamontagne
Jordan

Thank you!

Thanks Marc-Andre!  Your solution for adding JavaScript to a master page has been the only method that works for me.  Simple <script> tags somehow don't do the same thing--quite puzzling. 

Now I have jQuery accessible on my SharePoint site - MERCI BEAUCOUP!

Posted 05-Mar-2013 by Jordan
Bisi

Where is the script.js or what is the code for script.js

Where is the code that is supposed to be inside script.js.
 
 

Posted 15-Mar-2013 by Bisi

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: