Create New Sharepoint Theme = HELL? ·
Jun 03, 2009So I’ve been working on creating a new sharepoint theme. Sounds easy right? Not. First off, I have limited access to the server that runs this existing MOSS 2007. This means that I have to figure out to not mess up or miss any of the other sites that are already created since there’s a lot of content on these sites. But then there’s the issue of creating a new “core” theme for anyone that’s an administrator to use.
I found this link on MSDN http://msdn.microsoft.com/en-us/library/aa979310.aspx as well as this link on http://www.sharepointblogs.com/tigirry/archive/2007/07/03/custom-site-theme-for-sharepoint-2007-moss-2007-and-wss-3-0.aspx. Both of these say the same thing, that you should be able to create a theme by creating a copy of one of the ones you want to use. I’ve attempted to do this following their instructions, but it’s really not working yet. I think the main issue is the face that Sharepoint makes a copy of skins. So in order to really affect the skin I believe you would have to modify the CORE.CSS file. Using Sharepoint Designer I was able to modify ONE site. But now, every time I try to update the CSS file called mossextension.css or theme.css the site isn’t updating.
I’ll post more when I figure out the proper solution.
— Zeus ::)
Here’s an answer from heather solomon on her blog using a CSS @import to load a file :
http://www.heathersolomon.com/blog/archive/2008/01/30/SharePoint-2007-Design-Tip-Import-your-CSS-for-SharePoint-Themes.aspx
One of the major drawbacks of SharePoint themes is you have to reapply the theme to any site that uses your custom theme in order to see any new changes that you have made. This happens because when you apply a theme to a SharePoint site, a copy of the theme is added for the site in the content database.
Try it out, open a test site in SharePoint Designer and look at the folder structure in the Folder List task pane. If you have already applied a theme to this site, you will see a _theme folder. If you have not applied a theme to this site, then this folder will not appear. Expand the folder and you will see a single sub folder named the same as your theme. Now go and change the theme the site uses through a browser. Return to SharePoint Designer and hit F5 to refresh the Folder List. The _theme folder will appear if you didn’t have a theme applied the first time, and the sub folder under this directory will change to reflect the theme you just applied.
When you make a change to the theme files on the web server, it does not update any copies of the theme that live in the content database. When you apply a new theme in the browser, it replaces the copy in the content database with a new theme. That is why you have to physically reapply a theme when you make changes, you have to replace the theme copy in the content database.
From a development perspective, the theme copy in the content database is rather handy. If you update any of the files in the content database (by changing the CSS files in SharePoint Designer and importing in new images), the changes automatically appear in the browser. Woo-hoo! This just made life easier when it comes to developing themes.
But after you finish up development, you are stuck back with the problem of how to update your theme in the future, especially if it is applied to several sites. This is where this trick comes in.
Import CSS to Create Editable Themes
Create a copy of the final theme.css file and store it in another location on the web server, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\YOURCUSTOMFOLDERHERE
You can even rename the file, it no longer needs to be named theme.css.
Open the original theme.css file in the custom theme folder, delete out all of the contents, and add an import rule for your new CSS file:
@import “/_layouts/1033/styles/YOURCUSTOMFOLDERHERE/theme.css”;
Save the file and deploy your theme (add text to SPTHEMES.xml and reset IIS). Apply your new theme to the site. Now go to the new CSS file in the Styles folder and make a change. Refresh your browser. Your change will appear. That is cool.
By moving around your files and using the import rule you can create a theme that you can update without reapplying the theme to every site that uses it. Be sure to update your image paths in your CSS styles to a location where you can edit the images as well, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\YOURCUSTOMFOLDERHERE
Below are a couple of screen shots for the end result of this method.
— zeus · Jun 3, 12:01 PM · #
blog.zeusdidit.comAnd that solution WORKED magically and beautifully! Though the only issue I saw was that the original documentation on that blog posted the images in a different directory and I’m not sure why this would be done when in Sharepoint the images are all found in the same folder the CSS files is located. This makes life a bit easier as well.
So now I’m implementing the stylesheet on a variety of different Sharepoint Sites since they have blogs, wiki sites, social meeting sites and more. When we updated the Sharepoint MOSS system (I’m not sure what that means except there’s a regular version and an Enterprise version of Sharepoint), well when we updated the system we got all these extra widget type things. So I’m off to zeusify, which means sexify, the styles.
Currently the Sharepoint theme has over 4300 lines of code. SO figuring out what global styles do what is a pain.
Off to design :)
— zeus · Jun 4, 07:50 AM · #
blog.zeusdidit.comwait. i spoke too fast. the actual solution i posted is not working. looking for another work around…again.
— zeus · Jun 4, 08:33 AM · #
blog.zeusdidit.com