ShareBoot for SharePoint 2010

1

Following many requests to convert our most popular responsive SharePoint 2013theme to SharePoint 2010, I decided to spend a little bit of time to accommodate the unfortunate people stuck with SharePoint 2010 servers. Which BTW, based on the poll we’ve run for some time “What version of SharePoint are you running?”, SharePoint 2010 is still leading the way with about 41% of the deployments.

ShareBoot theme, is a very clean and sleek responsive SharePoint 2010 theme powered by the most popular front-end toolkit for rapidly developing web applications, Bootstrap.

ShareBoot theme is designed to help you kick-start the development of a proper responsive SharePoint 2010 theme and to help you discover the workaround of a modern, intuitive, and powerful mobile first front-end framework. ShareBoot theme is not a “ready to go live” theme. More branding customization is required from you.

You can use the theme for free and without any restrictions. However, it is forbidden to sell or redistribute the theme without TopSharePoint.com permission. You may modify the theme as you wish at your own risk.

This work is licensed Creative Commons Attribution-Share Alike 3.0 License.

Theme Features:
– Fluid & Responsive Web Design
– HTML5 & CSS2/CSS3 based
– Bootstrap 3 Framework
– Two master pages (Main Master Page and Search Master Page)
– Three page layouts
– Responsive Slider
– Top dynamic navigation
– Ideal for any screen resolution (automatically adjusting to different screen resolutions)
– Compatible with modern browsers (tested successfully on Chrome, Safari, Firefox, IE9/10/11)
– Suitable for small SharePoint 2010 Publishing Sites

Installation
Download the ShareBoot-2010.zip file and extract the files.

There are four folders in the zip file: MasterPages, PageLayouts, ShareBoot and html

MasterPages folder contains two master pages. ShareBoot10.master, the general master page used across the site, and the search master page ShareBoot10-Search.master.

Create new Blank Master Page in SharePoint Designer and Copy&Paste ShareBoot10.master code into it. Check the master page in and make sure you publish and approve it.

ShareBoot-SharePoint-2010-1

PageLayouts folder contains three custom page layouts (ShareBoot10-Home.aspx, ShareBoot10-Main.aspx and ShareBoot10-Contact.aspx) created for this theme. ShareBoot10-Home.aspx is used for the homepage with the necessary scripts for the slider. ShareBoot10-Main.aspx page layout is used across the site and ShareBoot10-Contact.aspx is used for the contact page and it has an embedded map.

Import these three custom page layouts into “Page Layouts” site objects in SharePoint Designer by creating New Page Layouts and Copy&Paste the code into each page layout.

ShareBoot-SharePoint-2010-2

The third folder called ShareBoot contains a css folder, images folder, js folder and fonts folder.
Place ShareBoot folder under your site root. Your site root is located here: C:/inetpub/wwwroot/wss/VirtualDirectories/80 (or whatever port you’re using for the site). Make sure Network and Network Service accounts have read permissions for this folder. Try to create the folders instead of just Copy&Paste them.

Once all the files are placed correctly, it is time to set the ShareBoot10.master as the default master page.
Go to your site homepage and click on Site Actions >> Site Settings.
Under “Look and Feel” click on “Master page” and under Site Master Page select ShareBoot10.master and click OK.

ShareBoot-SharePoint-2010-3

Go back to the Site Settings and click on “Page layouts and site templates”. Make sure you have the ShareBoot10-Home, ShareBoot10-Main and ShareBoot10-Contact on the right side pane for Page Layouts.

ShareBoot-SharePoint-2010-4

Go to your site and edit all the pages to inherit the new custom page layout “ShareBoot10-Main”, except for the homepage which should inherit the ShareBoot10-Home page layout and ShareBoot10-Contact for contact page.

ShareBoot-SharePoint-2010-5

ShareBoot-SharePoint-2010-6

On the homepage you will notice two custom Rich Html Field editors: Extra Content 1 and Extra Content 2. To create these two custom editors on the homepage go to Site Settings >> Galleries >> Site columns >> hit Create. Call the first one MyPubContent1and select option “Full HTML content with formatting and constraints for publishing”. Put this site column into “Page Layouts Columns” group. Do the same for the second oneMyPubContent2.

ShareBoot-SharePoint-2010-7

Now, go back to Site Settings >> Galleries and click on “Site content types”. Go all the way down to “Page Layout Content Types” section and click on Article Page. Under Columns click on “Add from existing site columns” and select MyPubContent1 andMyPubContent2 for the “Columns to add:” and hit OK.

ShareBoot-SharePoint-2010-8

And finally let’s take care of the Search page.
We need to change the search results page first. On the homepage go to Site Actions >> Site Settings and under “Site Collection Administration” click on “Search settings”. Under “Site Collection Search Results Page” change the default setting to “/Search/results.aspx” and click OK. In order to see the “Site Collection Administration” option you need to be a site administrator.

Next, go to SharePoint Designer and Open Site (http://yourdomain.com/Search). Under “Site Objects” click on Master Pages and import ShareBoot10-Search.master into the “Master Page” for Search site by creating a new Blank Master Page and Copy&Paste ShareBoot10-Search.master code into it. Right-click on the ShareBoot10-Search.master and pick “Set As Custom Master Page”.

ShareBoot-SharePoint-2010-9

To modify home page dummy content you need to play with the ShareBoot10-Home.aspx page layout. As I mentioned before, ShareBoot theme is designed to help you get started with SharePoint 2010 branding. If you want to polish this theme you need to spend a bit more time on it.

Also included in the ShareBoot-2010.zip package an optional “html” folder where you will find the HTML code used as dummy content for the mock-up pages. If you want to see what I used for testing the theme and play with some Bootstrap features, just copy the HTML code and paste it in to the necessary content editor web part.

If you like the theme don’t forget to leave a comment or maybe you would like to show your appreciation and buy me a beer! Thank you and stay tuned for more!

Download ShareBoot Theme for SharePoint 2010 Publishing Sites

ShareBoot for SharePoint 2010 was ported from the previous SharePoint 2013 theme. The functionality is the same. See this demo.

(935 Posts)