A Visual Guide in designing Sharepoint 2010

By | May 21, 2010

In case someone is wondering out there how to change the branding or design in Sharepoint is, well look no further as I will tell you the important thing you need to do. This will guide you to 13 easy steps on how to redesign your Sharepoint 2010 Site.

Step 1 : you should have a ready installed SharePoint 2010 site. If you don’t have one you can download it at Microsoft, the free version is called Microsoft SharePoint Foundation 2010 it is the new version of Microsoft Windows SharePoint Services but this is for Windows Server 2008.

Step 2 : Next thing you need is a Microsoft SharePoint Designer 2010 this is not free and you need a license for it but for those who have MSDN Subscriptions you can find it in your subscriber downloads.

Now open your SharePoint site using the SharePoint Designer 2010 and go to the Navigation Side Bar, choose Master Pages and copy one of the Master Pages already available, you are doing this so that you don’t have to do everything from scratch and just update what you have, the best template to copy is minimal.master or v4.master.

Note you cannot paste it on the side bar, you have to paste it on the content pane

Step 3: Now its available on your side bar and click on it, the content pane now will contain the properties of the copied master page. Now click on the Edit File to edit your new master page.

Step 4 : Once you click on edit you can now edit stuff, now if you are a developer (I am assuming you are) everything will look familiar and you can now make your hands dirty and start typing you codes or modifying what’s in there. It is also like the Visual Studio where you can choose code, design and split view.

Its pretty straight forward as long as you know HTML and CSS.

Note if you want to add images or any form of media you need to add it to library first as you cant upload it here while modifying your codes.

Step 5 : Save your work then set your new master page as your default Master Page by right clicking on your master page on the Side Bar.

Step 6 : Go to your browser and refresh your SharePoint site to view you changes, you might have to repeat Steps 4 and 6 until you are satisfied with your design as the Designer would have lines and labels on it and you wont see the exact rendering on your browser. During this process you not need to repeat Step 5 as it is already set as the default master.

Step 7 : Now you are halfway, and next thing to do is your theme. This will act as you CSS for the whole site. To create a SharePoint 2010 theme either you have to create it from scratch or do the copy and modify strategy. That’s what I did! I choose my favourite theme and copied it. To do that go to Site Actions and choose Site Settings.

Step 8 : In Site Settings click on Site Theme

Step 9 : Now you will be presented with the installed site themes, choose what you like and remember the name. Now click the Theme Gallery.

Step 10 : Now you are in the gallery, next is you download a copy for you to edit. Do that by choosing the theme you want and Send To à then Download a copy.

Step 11 : Now its editing time, as you have noticed the one you download is .thmx file and by default it will open on PowerPoint (you wont be able to edit .thmx file in PowerPoint AFAIK). So you need to download this very handy tool which is free as well, it is called Theme Builder and you can download it here à https://connect.microsoft.com/themebuilder.

It is a good and easy to use tool which do not need further explanation. Open your file and edit the things you need.

Step 12 : Now save your file and upload it back to your SharePoint Site, by going back to the Theme Gallery and choosing add new item.

Step 13 : Once its uploaded you will now see it on the gallery and click apply. That’s it you had customized the look of your SharePoint


One thought on “A Visual Guide in designing Sharepoint 2010

  1. Sally Campton

    Good thing that you’ve provided the whole context with sample tutorial that comprehend us easily, I think this very useful to my project site. What a great idea thanks for it.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.