Our College originally had a staff intranet that was written in an outdated ColdFusion. Its content was static and its presentation was not the greatest. Our department decided to invest in SharePoint 2010 and as its base use, our Staff Intranet. One of my first tasks in my role was to design and create a theme for 2010.
I decided to write this post about what I chose to change and how. Now, I'm not sure I am really a web designer, I know how to do what needs doing, but I am probably not the greatest on designs. This series of posts contains the final image and along with it some of the design iterations I went through with the help of some of my colleagues. The final theme isn't exactly award winning, and doesn't change a great deal of the out of the box master files, but its a start.
Changing the Master Page.
The master page is the file that SharePoint 2010 uses as its basis to configure and set up all the other pages in the site collection. Creating a new master page (or altering a pre-existing one) will allow you to specify some custom CSS, or, better yet, some external css files.
At the root of the site collection click on 'Site Actions' -> 'Site settings'. Under 'Look and Feel' click on 'Master Page'. This is where we will later be specifying our 'system master page' which will allow us to set a file that will help configure the entire site collection. We can also specify our 'site master page' which lets us specify a file to help configure this site.
Back at the page above ('Site Actions' -> 'Site settings') under Galleries click on 'Master Pages and Page Layouts'. Here we find all of our master pages. Probably not a lot at this stage.
Ok, so we want a new master page:
'Site Actions' -> 'Edit in SharePoint Designer'. This will open SharePoint Designer and from here we can gain access to 'Master Pages'. In this page right click on 'default.master' (or one that you want to base your master page from) and then click copy. Then paste it back into the same folder. Rename it, check it out, check it in and then publish it.
Back under 'Master Page' in 'Look and Feel' now set either a site or site collection master page to be this new one you have created.
Linking to external style sheet in the Master Page
Ok, so we need to have somewhere to store our CSS files. We store ours in 'Style Library' (Site Actions -> View all Site Content -> Style Library) where we have created a new folder. In here we have uploaded/edited an external css file.
Click on the Master Page we have just created and edit it. We need to put a link in here pointing to our CSS files.
As the last element of the 'head' section of the master page add the following line:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/[FolderName]/[cssFile].css %>" After="corev4.css" runat="server"/>
Where the FolderName is the folder we created in Style Library and cssFile is the name of the css file we uploaded/created. (Can be created in SharePoint Designer).
In a future post I will explain/show some of the things I did, such as:
- Rounded Tabs
- Rounded Left Menu
- Headers
- Flyout menus.
No comments:
Post a Comment