GreenShade – Free SharePoint 2010 Theme
We are glad to release our first free SharePoint 2010 theme. GreenShade theme has 2 columns of fixed width and its main purpose is to help you get started with SharePoint branding.
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.
Please link to this article if you would like to spread the word.
Features:
– Two-columns
– Fixed-width
– CSS based
– Two master pages and one page layout provided
– Slider powered by jQuery on homepage
– Top and left dynamic navigation
– Ideal for 1024×768 screen resolution
– Suitable for small SharePoint 2010 Publishing Sites
Instructions
To enable the GreenShade theme for SharePoint 2010 follow these simple steps.
Download the GreenShade.zip file and extract the files.
There are three folders in the zip file:
MasterPages folder contains two mastrepages. Homepage master page greenshade-home.master and the general master page used across the site greenshade.master. Import these two master pages into “Master Page” site objects in SharePoint Designer.
PageLayout folder contains a custom page layout created for this theme. This page layout allows you to display the left navigation and other custom functions. Import this custom page layout into “Page Layouts” site objects in SharePoint Designer.
And finally, the third folder called greenshade contains a css folder, images folder and scripts folder.
Place the greenshade folder under your site root. Make sure Network and Network Service accounts have read permissions on this folder.
Once all the files are put into place it is time to set the greenshade.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 greenshade.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) Green Shade” on the right side pane for Page Layouts.
Go to your site and edit all the pages to inherit the custom page layout “Green Shade”.
Now, we need to take care of the homepage.
On your SharePoint Designer, under Master Pages, right click on the greenshade-home.master and select “Set as Custom Master Page”. This will make the greenshade-home.master as your default homepage layout.
Navigate to the homepage and you will notice the three small content boxes are missing. Edit the hompage, Site Action >> Edit Page. Click on the “Main Content” area and under the Ribbon click on HTML >> Edit HTML Source.
Open homepage-boxes.htm (included in the GreenShade.zip file) with Notepad and Copy&Paste the content in the HTML Source and click OK. Publish the page and you’re done.
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!
Loading ...
Modern, elegant and simple to apply. I just wish I could change the color scheme easier. But hey, it is a free template! Thank you!
This theme is awesome!
This is basics to the core. Are there any better ones which are free to use?
Excellent! Free :O that’s great thanking you!
Hi,
I saw your theme, its too good so i want to use it in my SP 2010.
I have added 3 folders at respective location but when i goes to Site setting->look and feel->master page then it was not allowing me to select the radio button for “Inherit site master page from parent of this site”.
what should i do. is their to activate ay service or something.
help me on this.
Make sure you are under main site in order to apply the theme across all site.
Just excellent mate!
Worked fine for me! Thanks!
I followed the instructions for my 2010 Foundation site, but after applying the masterpages in SharePoint Designer 2010, the site won’t load. I get the error “Could not load file or aseembly ‘Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c’ or one of its dependencies. The system cannot find the file specified.”
I’ve tried three times so far without any luck. Not sure what I’m doing wrong.
Jacob, the theme was designed for SharePoint 2010 Publishing Sites not for SharePoint Foundation 2010.
I installed the theme and it is very beautiful. I only have a problem that I cannot see the left column with the lists and stuff!! Can you help on where I make the mistake?
Did you apply the custom page? “PageLayout folder contains a custom page layout created for this theme. This page layout allows you to display the left navigation and other custom functions. Import this custom page layout into “Page Layouts” site objects in SharePoint Designer.”
I recently applied this theme to our website. It’s a great theme. But I’ve run into a problem that I haven’t seemed to be able to fix.
Whenever I create a new page, I get an error in Design stating there was an Error Creating Control – asp:panel, Unknown server tag’Sharepoint:DelegateControl’.
Any suggestions on the cause and fix for the error?
Hi! Great job, many thanks!
Actually I have the same problem as Nishigandha (…master page then it was not allowing me to select the radio button for “Inherit site master page from parent of this site”.).
I can’t have the page layout from your 2d shotscreen (without the slider). What’s wrong any idea?
Thx!
I am stuck. Really.
Everything is fine until I take care of the home page.
I right click on the greenshade-home.master and select “Set as Custom Master Page”. “This will make the greenshade-home.master as your default homepage layout.” the problem is that it affects not only the home page, but also ALL the pages of the website. As as result, I have the slider on everypages. Could anyone help! Or maybe that would have been great to have 2 differents layouts in the kits: 1 homepage layout (linked to the greenshade-home.master, and another one for the the pages)…I really need help! -cheers
I used iFrame webpart to have the slider show on homepage. This way I didn’t need 2 masterpages.
Bill thx for the reply. So I suspect that you are using the greenshade as the master page for everywhere, and then you have included the slider in an Iframe of the page layout of the homepage right? Anychance to receive your masterpage and home page? Maybe I am asking too much but I am under heavy pressure…(olivier.salgado(at)gmail.com)…
Olivier, I used GreenShade masterpage across all site no modifications. I just created a html page, plugged the slider in and call it in the iFrame webpart. Very simple.
Thx Bill I will try that although my skills are still limited yet but I’m sure this will help some others here…
The imported master pages are invisible in the “Master Page” list box. I can see them under “All Items”, but unable to change their “UI Version” to 4 (some people say this is the reason why they are invisible). Anybody help? Thanks a lot!
Olivier go back to Site Settings >> Master page and make sure greenshade.master is set as the “Site Master”. After that go back to SharePoint Designer and right-click on greenshade-home.master and pick “Set as Custom Master Page”.
Hi,
Thanks for this theme. Unfortnately i could not complete the installation, I could not find the ‘page layout site object’ in sharepoint designer. I am using sp 2010, not the foundation. where is the page layout site object?
Thanks for youur help
This is really a nice and informative post for the sharepoint 2007 developer as well as SP2010 developer
Great Page and cool themes!
If you want to create you own custom css file and theme comfortable by using an online SharePoint Designer for branding, you have to try out this genial tool:
http://www.nextflow.at/designer/designer.aspx
Great theme, thank you.
Is it possible to use this theme for all sites, not just publishing sites. The left nav does not show up for me in a non publishing site.
Thanks,
Jack
I really like the themes!
Hi,
Thanks for creating a great theme we can use for our School Intranet.
We would like to change the theme to a “blueshade” theme. We’ve been able to customise most of the page via the sharepoint master page…but we are stuck on the following…
Can you tell us where we can change:
1.) The green gradients at the top and bottom of the pages.
2.) The green background for the navigation links.
3.) The green background to new web parts created on the page.
Thanks for any clues!
Matt, the green shades images are included in the image folder. You can change edit the images using a graphic editor like Photoshop of Gimp.
Hi Luis,
Thanks for the reply. I’ve managed to change virtually every part I’ve needed by both changing the images and also modifying the style colour on the master page in Sharepoint designer. The only part I simply cannot find is the background green colour that appears around the navigation links on the left hand side…ie. the colour green that appears behind “Libraries”, “Lists”, “Discussions” etc. Any ideas where this colour style is hiding?
Matt, look for “.leftNavHolder li > .menu-item” in the greenshade.css – Also, if you just want to change the color do a replace of #91CA15 to whatever color you want to change.
Thanks Luis…much appreciated! Trying to find which bit does what is a bit like looking for a needle in a haystack across css pages, master pages etc…..I am incredibly impressed with the way you guys actually create themes like this and can figure out where to put what bit. Great job!
hi having same problem as basheer….anyone please help us?
Basheer says:
Hi,
Thanks for this theme. Unfortnately i could not complete the installation, I could not find the ‘page layout site object’ in sharepoint designer. I am using sp 2010, not the foundation. where is the page layout site object?
Thanks
Whats the gray bit behind the navigation links?
I’ve changed the whole background which worked, but I also want to change the bit of gray that fades from #adafaa (the dark gray line)
Cannot find it as an image and my CSS knowlage is limited.
Thanks for any replies.
“Hi,
Thanks for this theme. Unfortnately i could not complete the installation, I could not find the ‘page layout site object’ in sharepoint designer. I am using sp 2010, not the foundation. where is the page layout site object?
Thanks”
I had the same problem as this….it just wasn’t there…but then I discovered you must turn on the Publishing features of Sharepoint in the Site collection you are working on. You can do this via Site Collection features. When I did this it then appeared. See the following for instructions…
http://stackoverflow.com/questions/2374578/enabling-publishing-infrastructure-feature-in-sharepoint-2010
Just noticed the green gradient at the top and the gray one below it is the same image, my bad. ^^
Only other problem i’m having is after applying this theme to my sharepoint site I’m getting a Correlation error when I try to upload files to any libraries and when I try to change permissions in the browser.
This template didn’t work for me at all. I installed it (imported master page, imported page layout, copied greenshade folder to the 80 folder) but it doesn’t seem to be loading properly at all. How frustrating that I can’t get any template to work!
Can this work for SPF 2010?
Sorry MOssie, this theme was intended for SP2010 Publishing sites.
Hi, got some problems with the left menu. There is nothing, but shoud be. Have you any ideas? Where is the problem?
Thanks a lot!!
Michael
Great theme, I love it, but i am having a problem, the quick launch bar is not showing. And yes I know its because I did not import the page layout and that is because I cannot find page layout under site objects within sharepoint designer. So can someone help me please!!!!
Hi Luis,
Great theme – I love it! Have just applied to my blog – see here – http://www.debbiesblog.co.nz – will let everyone know 🙂 Thank you!
Gracias por la MASTER de Sharepoint,
Hi Luis,
Really impressed with this theme. We are planning a new project website, and this worked really, really well.
Unfortunatly, I found a compatability issue with IE 7 where it looses the vertical scrollbars on both master pages. (Some sites suggested a result of the security trimming, but I found this not to be true).
Any suggestions?
Still can not find the page layout location? Publishing is turned on. Any help would be great thanks..
Alexander, change the scroll=”yes” in the body tag. Right now is set to scroll=”no”
Jeremiah, this theme is designed for SharePoint 2010 Publishing Sites. If you don’t have a PageLayout folder then your site is not a SharePoint 2010 Publishing Site.
Nice theme, How Can I edit the permission page ‘look’
I’ve hidden the left nav on all pages but it shows on top of text when I click site actions>Permissions
I think it’s coming from;
http://svrname/sites/sitename/_layouts/user.aspx
Hi. I have some problems
In those steps you mentioned I guess there is a gap in your definition after the “(Article page) green shade” page layout and “go to your site and edit all the pages to inherit the custom page layout green shade”.
Where can I find those pages to edit? i don’t see the green page of green shade anywhere. i click on the homepage-boxes.htm and it starts to download it! how can i edit these pages? please help
I have set this the masterpage as my site master page, can the master page also be used as a system master page?
thanks
Excellent Theme!
I liked it, thanks!
Thank you for this. It is really useful starting point for those of use new to styling in the SharePoint 2010 way 🙂
Just to give some ideas…I have used that site, and after many headaches here is what I have achieved http://www.unmikonline.org
ps: I am not a webdesigner…
Thank you again!
Hi, great works and thanks for this. Just a quick question though. With this this Step:
“And finally, the third folder called greenshade contains a css folder, images folder and scripts folder. Place the greenshade folder under your site root. Make sure Network and Network Service accounts have read permissions on this folder”.
I havent got access to the site root folder in the environment that I work in. Are there any alternatives instead via SD2010?
You can place the Greenshade Folder anywhere on the site, you just need to change the file-paths in Greenshade.css and Greenshade.master to the location of the Greenshade folder.
Cheers, many thanks for getting back to me.
Hi, I love the theme, it looks very sleek.
Did any one make it work with a Team site instead of a publishing site?
I’m new to SP and have been playing around with a team site for our company. I want to make it look nice but don’t know if using a Publishing Portal would be the right choice.
How do you enable to left navigation on the default master page? I tried to unhide the element but no avail.
Thanks for a great theme!
Wes, please read the documentation carefully. It looks like you skipped the part where you enable or inherit the page layout: Go to your site and edit all the pages to inherit the custom page layout “Green Shade”.
Hi, I am learning SharePoint 2010 and our Marketing Designer would like to use this as the Master Page. I have followed the instructions but have several issues.
When I try to add (Article Page) Green Shades to the Page Layout as the instructions say, it shows as (Page) Green Shades. I don’t know if that is why I am not seeing the Quick Launch or top part of the site.
This page started as a Team site and I activated the publishing features in the Site Collection Features and the Manage Site Features.
I don’t know how to access the file needed to display the quick launch. Also in this step it says to make sure Network and Network Services are set to Read. I don’t know where I do that? Is that my problem? Can anyone help me?
i’ve successfully loaded the master page, which is an awesome product, however the ribbon isn’t showing and i can’t open the site in Designer
please help.
Hello there,
I’m an avid fan of your theme, however I find myself banging my head against a wall in my attempt to implement it.
Firstly, for some unexplainable reason under the step listed below, I cannot select the option to – “Inherit site master page from parent of this site” – via radio button; the radio button is greyed out:
——————————————-
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 greenshade.master and click OK
—————————————–
Secondly, under the step listed below, I cannot select the option to set – “Pages inherit preferred layouts from parent site” – – via radio button; the radio button is greyed out:
Go back to the Site Settings and click on “Page layouts and site templates”. Make sure you have the “(Article Page) Green Shade” on the right side pane for Page Layouts.
——————————————
Lastly, upon attempting to finally publish the page I noticed that the ‘Publish’ option was disabled in the ribbon, even though I suspect that this last issue is connected with the above issues I have discerned.
Moreover, I have tried to implement the greenshade theme on 2 separate unconnected Farm installations, in 2 completely distinctive environments and have had the same results.
Any help regarding these errors would be greatly appreciated.
Kind regards and thanks in advance.
I have some problems in the Search Option, the search page is not loading… anyone have some ideas? The Search in all sites option shows error…
Hi, nice template. I’ve installed it and can access all the pages. Can you tell me how to move the content over to the left, as I don’t want a quick menu and only want to use the top drop-down style menu.
Hello,
This is a great templates.But i still cannot implement into my existing SharePoint 2010 Enterprise. I was stuck at master page import, while i use SharePoint designer 2010 and select master files categories, then choose import download files to import, after completed , it cannot shown on master page, it show on Page layout, how to change it to a master page content type? anyone was successfully implement? please share the details steps to me, thanks.
Davidtam, try to create a blank Master page and then copy&paste the code into it.
Burner, very simple. Just don’t use the page layout provided.
Been working with the template but visitors cannot see the left nav while contributors can. Odd permission thing going on. Any suggestions to remedy? Thanks for this awesome resource!
You can find a SharePoint Foundation-compatible and packaged version (WSP) of this master page at http://www.riolinx.com/en/blog/Lists/Posts/Post.aspx?ID=25
Hi, amazing theme, is going to look great on a new version of our intranet.
One thing though, i’m trying to get it so that the left nav will show on pages other than the homepage and i just can’t get the code right. Is there a quick way to fix this in the master pages or CSS?
Many thanks
Dan
This theme looks great. I followed the above steps but the site can not find the images.
I did modify the permissions to the greenshade folder that was moved to c:\inetpub\wwwroot\wss\virtual directories\80
I have given network and Network Services read access, yet the site can not find the images.
Any ideas?
Lou, it looks like you still have issues with your IIS security on folders. Make sure your Greenshade folder has read access for Everyone as well.
Strange, I didn’t make any changes but its now working.
Hi,
I’m using sharepoint online and I can’t seem to find the “page layout” folder 🙁 and I don’t have access to the server. any suggestions for this? Many thanks!
This is a really good template. Just one question how do I expand and collapse the left navigation
How can I edit slider.js to change the display time for the images?
I cannot find it anywhere from within SharePoint Designer.
…ALSO…after implementing attempting to add new permissions no longer works. I get the “xsd” error referenced here:
http://social.msdn.microsoft.com/Forums/pl-PL/sharepoint2010general/thread/8c83010e-d3548ba-bd1e-1ffb0641ec03
…anyone else have this ???
Peg, don’t use the SharePoint Designer for that. Just navigate to your “scripts” folder under wwwroot
Thanks Gerhard,
I did try that first but then the slider doesn’t work and the menu and the slider are misaligned on the page.
Any thoughts?
Thanks,
Peg
Gerhard,
Nope, that didn’t work.
Peg H, to change the slide speed, navigate to the slider.js (c:\inetpub\wwwroot\wss\VirtualDirectories\{your port #}\greenshade\scripts), open it with Notepad and adjust the speed attribute. Now is set to 3000 milliseconds (speed : 3000). The lower the number the faster the slider speed. Make sense?
—————————————————————————————————
I am sorry, I should have disclosed this from the beginning, but basic HTML knowledge is seriously required for ALL our themes. I hope is not much to ask…
—————————————————————————————————
Luis,
No problem. I understand HTML experience is required and I did navigate to c:\inetpub\wwwroot\wss\VirtualDirectories\{your port #}\greenshade\scripts and modified it with Notepad and changed the value to 8000.
Unfortunately, this rendered the slider useless and the formatting was skewd. This is why I thought maybe it should have been edited in SP Designer. (I am new to SP 2010)
I am still hoping to use your master pages which I think are super. Reading Kathy Hughes book (SP Designer 2010 Unleashed) hoping to find a solution. It looks to be an IE9 issue.
Thanks for your reply,
Peg
Found the solution to the slider issue.
From the client (IE8), I needed to go to tools then “Compatibility View Settings” and add the SP Website.
Closed the browser and once reopened slider works, and all controls are in the correct position.
However, adding “Site Permissions” is still a problem:
Error
An unexpected error has occurred.
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: bb77f7bc-33de-a3ea-f2552e4b453d
Date and Time: 5/4/2012 9:57:32 AM
I just implemented Matt Olson’s entityeditor.ie9fix.js work-around from link:
http://social.msdn.microsoft.com/Forums/en-SG/sharepoint2010general/thread/8c83010e-d3548ba-bd1e-1ffb0641ec03
…and now my permissions work perfectly!
Back to Visual Studio.. 🙂
Peg H., make sure you don’t use the Greenshade theme for your “System Master Page”. Leave the default v4.master to handle the administration site.
To check your “Site Master Page Settings”, go to Site Settings >> Under “Look and Feel” click on “Master page”.
how do i customize the images to my own text, was this done in layers ?
This is awesome. Thank you.
Hello, first of all great theme and free :), but I have a question, I need that the ribbon is always visible even with anonymous users, ¿Can I do that?.
I made all intructions till “Go back to the Site Settings and click on “Page layouts and site templates”. Make sure you have the “(Article Page) Green Shade” on the right side pane for Page Layouts” but these two page templates are not on the right side. After that all steps don’t allow to install this template. Also there is some mistake with logo, other purctures.
Taking into an account my Russian site the updated site looks like a little bit mixing of different languages.
I am also having trouble getting the left nav to display on this theme. Can you offer any relevant advice?
Daniel, did you apply the custom “Green Shade” page? “PageLayout folder contains a custom page layout created for this theme. This page layout allows you to display the left navigation and other custom functions. Import this custom page layout into “Page Layouts” site objects in SharePoint Designer.”
Andrey, instead of importing the page layout into the Page Layouts try to create a new page layout and paste the content of “Green Shade” page there.
Thanks for this wonderful theme, I just have one question. How do I make the left nav available on all my pages?
Thanks
Is it possible for me to apply these theme only in one of my subsite?
izzat, yes it is possible. Go to Site Actions >> Site Settings >> under “Look and Feel” click on “Master page” >> change the “Site Master Page” to “Specify a master page to be used by this site and all sites that inherit from it:” and select the theme.
The current navigation is not showing in the sub website.
I am not able to change page layout in the sub pages
Please help
I was able to load this theme without issue but my slider is not working at all. When I opened the master page in SPD all the images were loaded and in IE only first image is shown without any navigation. IE loads with an error saying “‘jquery’ is undefined in slider.js line:1 and Char:1.
Any help is appreciated.
Thanks.
Neptune
Neptune, it looks like JavaScript is blocked on your browser.
I’m having trouble getting the left navigation bar to display.
Instead of “(Article Page) Green Shade” on the right side pane for Page Layouts, what I see is “(Page) Green Shade”.
Help, please? Thanks!
Luis, when you say place the greenshade folder under the root, are you talking about the server side? I have Site Collection Admin rights but only on client side.
Thank you,
Scott
Scott, on your IIS. See the screenshot in documentation.
Here is the path using Windows Explorer: \\yourServer\c$\inetpub\wwwroot\wss\VirtualDirectories\ and pick your port
Wonderful design and looks promising to customize further and use in any situation. I am going to create new intranet for my company. Can’t thank you enough guys for making this and give out for free. Thank you!!!!!
Hi! Any idea if this template can be used or modified t work on SharePoint Online and how?
Alexander, Microsoft dropped the Public Website feature from SharePoint Online as of January 2015. Don’t waste your time.
hi there. please i successfully installed that great them but i cant see the top and right navigation manu , im already apply the green shade page layout but nothing apper . please help