Responsive – Free SharePoint 2010 Theme
The technique that makes a web design layout respond to any screen size and orientation (landscape or portrait) is called Responsive Design. By using this technique you will be able to display your content correctly to all users by using fluid grids, queries and images to fine-tune the design to accommodate screens of different sizes using CSSbased media queries.
Responsive design so far is the hottest topic of the year amongst web designers, along with the sudden increase of various mobile devices like smart phones, tablets and gadgets which have different screen sizes.
Basically, Responsive design removes the need for mobile versions of your website making your website future-proof for the new types of mobile devices.
The following free Responsive SharePoint theme will introduce you to a world of fluidity that would change your perspective (and stereotype) on what you can do with SharePoint.
This theme is ready to be deployed with minimum effort so you can have a responsive SharePoint-based website ready to go in less than 20 minutes.
At the time this article was posted, there were only few responsive SharePoint-based websites showcased on TopSharePoint.com, that proves how new this technique is in the SharePoint branding community.
We truly hope this free SharePoint theme will help you get started with responsive design and we expect to see some of your customizations popping up all over the place.
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
– Two-columns
– HTML5 & CSS2/CSS3 based
– Two master pages (Main Master Page and Search Master Page)
– Two page layout
– Responsive Slider – Flexslider – jQuery-based Slider (Flexslider)
– Top and left dynamic navigation
– Ideal for any screen resolution (automatically adjusting to different screen resolutions)
– Compatible with modern browsers (tested successfully on Chrome, Safari, Firefox 12, IE9)
– Suitable for small SharePoint 2010 Publishing Sites
Instructions
To enable the Responsive theme for SharePoint 2010 follow these simple steps.
Download the Responsive.zip file and extract the files.
There are three folders in the zip file:
MasterPages folder contains two master pages. responsive.master, the general master page used across the site, and the search master page responsive-search.master. Create new Blank Master Page in SharePoint Designer and Copy&Paste responsive.master code into it. Check the master page in and make sure you publish and approve it.
Page Layouts folder contains two custom page layouts (Responsive-Home.aspx and Responsive-Main.aspx) created for this theme. Responsive-Home.aspx is used for the homepage with the necessary scripts for the slider and Responsive-Main.aspx page layout is used across the site.
Import these two 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.
And finally, the third folder called responsive contains a css folder, images folder, js folder and html folder with the slider and boxes used on the homepage.
Place responsive 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.
Once all the files are placed correctly, it is time to set the responsive.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 responsive.master and click OK.
Go back to the Site Settings and click on “Page layouts and site templates”. Make sure you have the “(Article Page) Responsive-Home” and Responsive-Main on the right side pane for Page Layouts.
Go to your site and edit all the pages to inherit the custom page layout “Responsive-Main”, except for the homepage which should inherit the Responsive-Home page layout.
Now, we need to take care of the homepage.
Navigate to the homepage and edit it: Site Action >> Edit Page. Click in the Page Content area and look for HTML markup button on ribbon. Select Edit HTML source and in the new pop-up window Paste the home.htm code, provided in the package under html folder. Click OK and Submit and Approve the page.
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 responsive-search.master into the “Master Page” for Search site by creating a new Blank Master Page and Copy&Paste responsive-search.master code into it. Right-click on the Responsive-Search.master and pick “Set As Custom Master Page”.
And, you’re done! Enjoy the first usable “out-of-the-box” responsive SharePoint 2010 theme.
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 Responsive Theme for SharePoint 2010 Publishing Sites
Loading ...
Great work Luis on the Responsive theme, it looks great. Looking forward to trying it out.
I tried to implement your solution on my SharePoint Online site. When I navigate to the home page to set the layout, I get a File Not Found error. I am thinking this may have something to do with my site collection is http://URL/sites/responsive/ and it seems you have set the links in your solution to point to a site collection starting at the root (http://URL/)
I updated every link in the master page, layouts, etc. that contained a link to the ‘responsive’ folder containing the images, etc. However, I am still getting the error. Can you suggest another location I can look?
Daniel, we developed and tried the theme for SharePoint 2010 Publishing Sites not SharePoint Online. Anyways, try the page layouts as well. Good luck and keep us posted.
So what’s the trick to getting the FlexSlider to work? I’m not seeing the jQuery working at all and was hoping you might post some more details on what it takes to get it working. All I get is the images stacked on one another. Any idea?
Nevermind… I didn’t have the right page layout set. 😛
Hi there, I am trying to implement your Responsive Theme, but I keep getting an error with corellation ID, the log info from the CID is as follows:
System.IO.FileNotFoundException: The file /_catalogs/masterpage/_controltemplates/Welcome.ascx does not exist
I am running SP2010, I created a simple publishing site to test with. Any ideas whats up?
Jason, it looks like you’re missing a page layout. Welcome Page Layout?
That is abundantly clear. I’ve followed your steps outlined on this page, to rule out any incorrect steps taken, I’ve attempted this on 3 seperate test farms, the result is always the same.
I am not extremely experienced with sharepoint, I have only 1 year of hands on with the product, so I will admit the final step, to me, is fairly vague:
“And finally, the third folder called responsive contains a css folder, images folder, js folder and html folder with the slider and boxes used on the homepage.
Place responsive folder under your site root. Make sure Network and Network Service accounts have read permissions for this folder.”
All of the other steps with the highlight markers etc, to be honest were simple, oddly enough the last step is the only step I would have required a walkthrough with. What would be the most straightfoward method of placing this responsive folder at the root of the site?
Template is great. Just one issue with text colors when accessing some of the admin pages, eg, Site Actions->View All Site Content. Some of the libraries listed used white text instead of blue (not sure why – think they may be the auto-generated libraries). Trouble is, I can’t see them as they are white text on white background.
Also happens when i insert a link – the dialog box that comes up has white text on white background in the left nav bar .
I have set responsive.main as both the site master page and system master page – should I have done that?
I am just now testing out this responsive solution for SharePoint 2010 and I was having the same problem. After opening the page in Firefox and inspecting… the problem looked to be element .ms-vb2.
I changed line 65 in style.css. by removing .ms-vb2 so it wouldn’t get set to white (#fff) and the list is now displaying. Yay!
I’ll continue testing to make sure nothing else broke… 🙂
Jason, your site root is located here: C:/inetpub/wwwroot/wss/VirtualDirectories/80 (or whatever port you’re using for the site) Place the responsive folder there and make sure Network and Network Service accounts have read permissions for this folder.
Peter, do not use the Responsive theme for administration site.
Hey, I have an update here concerning the master pages.
I had to add ~/ to the Register line of: Welcome, MUISelector and DesignModeConsole. Then finally the page worked.
I’m curious as to why I had to take this step, but more curious about exploring the Responsive page and layouts 🙂 thanks for the help.
Cheers
Perfect Jason – Thank you – saved me with this.
Will this work on sharepoint 2007?
bizio, this theme has only been tested on SharePoint 2010 (SharePoint 2010 Publishing Sites)
Thank you very much for sharing this themes! Great Job!
One question here. I just wonder why the current user is not showing up. It would be great if it will still show up in the opposite side of Site Actions.
Ad
Hi,
Thanks for this theme!
However when browsing the site from my iPhone I get redirected to a mobile site, url example: http://mysite/_layouts/mobile/mblists.aspx
How do I turn this off? Possible?!
thanks,
KAM
For anyone else, the solution is to find the client browser entry in the browser cap file and set isMobile to False.
thanks
Any where I can inject this css to hide quick launch?
/*–Hide Quick Launch –*/
#sleftpanel{
display:none
}
.sca{
margin-left:0px
}
any help/suggestion how to would be very much appreciated! 🙂
Ad
Kam, take a look at the latest post: Turn Off Mobile Browsing in SharePoint 2010 https://topsharepoint.com/turn-off-mobile-browsing-in-sharepoint-2010
Ad, just plugg your CSS code into the style.css. Make sure you ad the important! attribute: .sca{margin-left:0px important!}
Great Job Luis Kerr!
THANKS ALOT!
Your beers are on the way 🙂
Ad
Hi Luis,
I’m confused with “/Search/results.aspx” because after I followed the steps on how to change the search I got this error.
HTTP 404 Not found. “The web page cannot be found”
Any idea?
Ad
Ad, it seems like you don’t have the search enabled. Can you even get to the Search site using SharePoint Designer? http://yoursite/Search/
BTW cheers for the beer!
Luis,
My search is enabled.
/_layouts/OSSSearchResults.aspx – default
to
/Search/results.aspx
And page layout not showing up in the ribbon when I’m editing the page. It’s because I’m using Sharepoint 365 P2? “SharePoint Server Publishing Infrastructure – Activated”
Ad
Ad, this theme was only tested on SharePoint 2010 Publishing Sites not SharePoint Online (365)
Any way this can be made or converted to support Sharepoint 2010 Foundation?
Thank you
Hi Lui Kerr,
Great job:) I am trying to implement the theme for an intranet publishing site. May i check with you how to make the ‘I Like It’ and Open Menu – My Site, My Profile, My Settings, Signout drop down at the header?
Thanks
Nick
You need to remove “minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” from the meta viewport of your responsive.master.
You are doing more harm to the community and your users by disabling zooming on touch devices.
If you really practiced and appreciated the main goal of responsive design – making your content accessible to all – you would know that you should not force your own evil, restricting practices like disabling zoom.
Hi there,
Thanks for the responsive theme. What do I change in order to make it fit the entire screen and not be a fixed width?
Regards
Troy
Troy, there is only one class you need to change in the style.css: #wrapper
Hi Luis,
I notice that when I add web parts next to each other, on initial page save, the centering is fine. If I try to edit the page again, all the zones shift to the right, beyond the fixed width. Then the web part editor shows behind the web parts and zones that are beneath it (when expanding sections in editor). Not sure if this is a z-index issue or js. Could you tell me how I might resolve this? I only see this issue with the CQWP and the Summary Links web part.
In addition, I moved the responsive directory from root to the layouts directory and updated all paths, so i could put it in a solution. Everything else seems to work fine.
Thanks,
Aliya
Aliya, it seems like the style for those two web parts are taken over by other styles in the style.css. Use Chrome’s “Inspect element” to see what styles are taking precedence.
Your templates are awesome! Is a Stella Artois a good choice for a beer???
Cheers,
Sara
Thanks Sara. Stella Artois is “The” default choice for a beer…
We are using this theme for our intranet site. It looks great. We have Sharepoint 2013. Do you have different instructions on installing on that site? This is an AWESOME theme and we have really high hopes for it in our organization.
This is a great piece of work, many thanks. It’s a great start for creating a professional looking site. Here are a couple of tweaks that might be useful:
If you don’t want to put files onto the server, in your Inetpub/wwwroot/wss/VirtualDirectories folder, you can also just open the top level site in SharePoint Designer and drag the whole responsive folder (containing CSS, HTML, images, JS) into that root site as a subfolder. The branding files will then become part of the site itself. Probably better still would be to put all those files into a subfolder of “Style Library” but then you would need to update the URL references in the master pages for CSS, Javascript etc.
Also, if you actually like the SharePoint fixed ribbon at the top of the screen then here’s what you do to make the ribbon fixed:
– In the tag in the master page(s), change the scroll attribute to scroll=”no”
– In the style.css file, the section /***** Start SharePoint Fixes *****/, change body.v4master to overflow: hidden
For some reason, the images are not coming over when I load the site. I gave the responsive folder network and network service read permissions. When I try to go to an image to load directly from the browser I get “oops , your link appears to be broken.” Any ideas?
I follwed every step up to the step that had me select the Page Layout on the Home Page, but I do not have the Page Layout Option (sharepoint2010)
Do you have install instructions for a noob? I am able to drag and drop the master files no problem. Then I try to import the pagelayout files and they import into the master pages folder even though I have the pagelayout section selected. I haven’t made it past this yet. HELP!!
Craig, try not to drag/drop the page layouts. Just create a new page layout and Copy/Paste the code in it. It says very clear in the instructions: “Import these two 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.”
Thank you for the advice of not dragging and dropping. I didn’t realize that was an issue.
When I go to create the New Page Layout I am prompted with some drop downs asking about Content type group. I don’t know what to select for this theme. It wants to the the Content Type Group, the Content Type name and also a url. What do I do here?
Craig, for Content Type Group select: Page Layout Content Type. For Content Type Name: Article Page. For URL Name and Title just pick your own name, for example: MyResponsiveLayout or something like that so when you select what page layout to apply you know which is which. Same for both, URL Name and Title.
Hi I’m a newbie,
I am trying to follow procedure but I get stuck at step 2, in my designer I din’t get the Page Layout option.
I activated publishing feature. Please help me.
Thanks in advance.
Make sure you’re running SharePoint 2010 with Publishing Sites enabled.
I tried Publishing Sites enabled, but still i am getting that
I have been playing with this theme for a while now and I must say it really helped me learn a lot about website development. I have ran into one problem that I have yet to find a fix to and was wondering if you might have some advice for me on how to track this down.
When using responsive.master as the master page some of the pop up windows get messed up. As an example when using the Annoucements library and adding a new announcement; After enough information is entered in to the body field to make a scroll bar appear, a second set of scroll bars are added to both the horizontal and vertical axises when entering information into the title field.
This behavior applies to most other pop ups. It appears it is linked to the edit ribbon but I am not 100% on that.
Do you have any suggestions?
The global menus do not work in iphone or ipad, specifically, no dropdowns appear. Have you had this problem and any fixes?
Debby, there are no “dropdowns”. Once you navigate to a sub-site with multiple pages under it you will see them lined up under the green navigation bar. (black text on white background). It is very critical you set up the navigation to display only sub-sites/pages under a particular site.
Hey there.
I have a client that is really interested in using this theme (i found it and recommended it to him)
one thing he would like, is for me to mockup a few pages in advance to show him what it could potentially look like.
to do this, I’d need to see a full size online version…is there somewhere online that this theme is visible? an online demo perhaps? or are there fullsize screengrabs of the basic page-views (ie, home, etc)… I sure would be grateful if you could point me towards anything….
Thanks!
Tyson
If I’m trying to deploy this on a managed server where I don’t have access to the root web folder, can I put the responsive folder/files (css, js, etc) somewhere inside the site itself (e.g. Site Assets library)? If this is possible, what would the proper path modifications be to the master file and home template? Thanks!
Very, very nice responsive html pages for SharePoint. I have had to wait to implement HTML5 and now with mobile devices getting used more than laptops on the road your pages gave me a quick tutorial on what I need to do!
Thanks Again!
PegH.
Luis,
I am successfully using Peter Allen’s custom top navigation for my site collections and my main intranet publishing page of which an example can be found here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx
I am now attempting to modify my intranet page and site collections to using your responsive html5 page with this custom top navigation and have run into one issue. The top navigation will only display if I also have one page that displays (unhidden). Something like an “About” page or “Contact” page.
If everything under Site Actions–>Site Settings — Navigation–>Global Navigation is marked as “hidden” my custom navigation will not display on the main intranet page. If I click on any of the links in the Quick Launch like the “Libraries” or “Lists” links…the custom top navigation displays properly.
Can you give me a hint as to which CSS element I might take a look at that might be causing this issue only on the main intranet page or the main page of a site collection?
Thanks Ahead,
PegH.
Content Editor WebPart is not working correctly with this master.page
Not aplying styles (bold, italyc, etc)
I dont know how to solve it.
Sharepoint 2010 – On Premises – Enterprise Edition
I’m having the same problem. None of my content editor web parts are editable now (can’t see the HTML). However, the Page Content section does show/allow editing of HTML. Help!
Looks like the fix is to simply edit the page with Firefox or Chrome. This activates all the content editing capability on the content inside the CEWP. Still can’t drag/drop CEWPs around to different zones, but that can be done by setting the zone/index values in the CEWP editor panel.
Hi Luis,
To echo the question that Dave asked above (Dec. 17, 2014), can I put the responsive folder/files (css, js, images, etc) somewhere inside the site itself (e.g. Site Assets library)? I unfortunately don’t have access to the root folders on the server. If this is possible, what would the proper path modifications be to the master page template and page layout templates?
Thank you,
Rob
Hi,
i am facing few issues with this theme. First of all flexslider is not working just displaying image one below another in IE. And seems like its not compatible with different browsers, in Chrome doesn’t display the image slider part other than feature columns displaying OK. But in IE featured columns are not displaying properly. Any suggestions what could be the issue?
Works well ! how do you extend the top navigation menu beyond 9 items, including Home, which is the case now. Any pointer ?