SharePoint 2007 Themes (12, it’s the new 60!)

For those of us that have spent out days living out of the “60 Hive” and no I’m not referring to Todd’s Blog, I’m talking about the the filesystem folder we’ve relied on for our SharePoint Customization Work.  As of now the new home would appear to be the “12” folder.  This could potentially change to something like 2007 but as of now 12 is the new 60.

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12

Take a look at my first SharePoint 2007 Theme based on what else, “Vista!”.  I would offer it up but the Beta2 bits are not terribly stable in this department yet.  Not to worry though I already have a bunch in the works which I’ll offer up as a free release later.

26 comments on “SharePoint 2007 Themes (12, it’s the new 60!)

  1. Thomas Rasmussen says:

    Hi Shane.
    Looks like a nice and clean theme you have made.

    Im currently trying to make a SP2007 theme, and im curriouse to how you make your themes.

    For me it is a contantly trial and error process.
    First i copy and existing theme (Simple) and make and entry in the theme xml file. All this works fine, but when I make changes in the theme.css file the dont show up in my portal. Much like the now old SP, I have to iisreset to make the changes work.
    Do you have any easy solution to this problem? I would think MS made it easy in this new version of SP.

  2. shane says:

    Hi Thomas,

    Thanks for the comments.

    As for my methodology for creating themes:

    1) Duplicate the “classic” theme and rename it
    2) Make the XML/INF entrie(s) required
    3) I use the Internet Explorer Developer Toolbar (beta) to find the classes I wish to change.

    The important piece that I suspect is your problem:

    Once you have added your new theme, applied it to a “test site”, and connected to this site via SharePoint Designer 2007 (or other editor), you will want to edit the ********.1011-65001.css (I think thats the right #)file, not the actual theme.css inside the folder.

    The 1011-65001.css file is a merged copy of the theme.css and other css files and is the style sheet applied to your site which is why when editing the theme.css you are not seeing your changes, the 1011-65001 is the one actually applied to the site.

  3. Seth says:

    Hi Shane,

    Nice posting, it seems kinda hard to find any good writings concerning this as of yet.
    I have a couple of questions I hope you or someone here can help me answer:
    – What changes are actually required in the .INF file(s)?
    – Where would I find the ********.1011-65001.css file?

  4. shane says:

    Seth,

    2 Required changes to the .INF:

    1) Change the name of the .INF to whatever you called your folder (theme)
    2) Open it and change the name there as well – it will be obvious as it’s whatever the folder you duplicated was. Change it to your new folder/theme name. That’s it.

    The 100-65001.CSS is located in theme after you apply a theme – this is visible only by connecting via SharePoint Designer/FrontPage.

    Good Luck,

    Shane

  5. Joe says:

    I have been working on a theme and what you say above is all correct. I am however trying to apply a theme that i modified in SP Designer to more than one Site. So I made a copy of the simple theme, modified, uploaded and added it to the server. Then i applied it to my first site. I then opened that site in SP Designer and started editing the proper CSS file for that site and all worked well. But when i want to apply that theme to other sites, the original css file that was uploaded with the theme during installation did not change when I used SP Designer in the method described above. So I copied and pasted for SP Designer into the original Theme.css on the server but still no luck in those changes applying to the other sites i am trying to use the theme with. Does this make sense?

  6. shane says:

    Joe,

    I’m not 100% sure of the issue here but I think this might help.

    If you modify your 100-65001.css file in SharePoint Designer, this does not affect the THEME.CSS file which is applied originally.

    What I think you want to do is this:

    Set up the theme you want to customize on the server.
    Copy and Paste the Content of the 100-65001.CSS file into the THEME.CSS file inside that folder.

    When the theme is applied to a site it uses theme.css. The 100-65001 is an opportunity to personalize that theme on a per-instance basis and what you want is a globally applicable change which has to be the THEME.CSS.

    Clear as mud?

    Good luck,

    Shane

  7. Joe says:

    Yes thanks. I did copy and paste from the 100-65001.css back to the original theme.css on the server in the themes dir. But I did have to restart IIS for it to take effect accross the other sites. And even then it took some time. So it is not so cut and dry but i did Forest Gump my way through it.

    Thanks again,
    Joe

  8. shira says:

    hi Shane.
    i made all the changes but when i try to apply it i get :” a theme with the name “**** 1011″ and version allready exists on the server”.
    where did i go wrong?

  9. shane says:

    Hey Shira,

    Perhaps the .INF file inside the theme folder still has the TITLE= reading as the one you duplicated.

    Or, perhaps the SPTHEMES.XML Files

  10. Mike says:

    Shane,
    I have just been getting into these themes and I have to ask, is there a better way you have found to create these than, all this wandering through windows explorer? I guess what I was hoping for was SharePoint Designer to have an section for applying and creating themes. Would be nice and snazzy and leave less room for clients to royally obliterate their installation (anytime I direct someone to open a windows explorer session in SPS 03 or MOSS 2007 I get nervous)

  11. shane says:

    Mike,

    SharePoint Designer 2007 has quite a bit of built in functionality for working with themes.

    I think you may be able to create them from there as well once you connect to a site.

    In my opinion the most efficient process:

    ITpro (administrator) Role – Theme Setup, responsible for adding the folders and making the configuration modifications for themes to display on the server.

    Designer Role – Theme Customization, responsible for creating sites, applying themes, connecting to the site via SharePoint Designer 2007 and subsequently modifying the theme. You would modify images + the 1011-65001.css file at the personal to the site level and when happy, save it as THEME.CSS, passing it and any images off to the ITpro to setup on the server.

    Some Tips:
    1) Always add comments to the classes you change, also add unique identifiers. Example: Each time I edit a class I add a comment such as /* This class changes the top bar background color – Shane */ — In this case shane is the unique identifier. I do this so that I can go back later and CTRL+F “Shane” – and quickly skip through all changes I made. This is particularly great for having a “base” template from which to create all new themes.

    2) Use the Internet Explorer Developer Toolbar – It’s AWESOME for customizing themes. Once downloaded and installed select – View DOM, Find – Select Element by Click. You can then click any element of a page in your browser to see what class is applied. This speeds up the trial and error of finding classes.

    Good Luck! :)

  12. I want to change the theme of my web application can you telll me the procedure to do this and in how many css files i have to make changes

  13. Tanto says:

    Hi, I have problem that a newly-created theme cannot be re-read back after changing to another theme.

    I made a new theme, say Theme1 and successfully had it (Thanks for Shane for the suggestions), based on a exisiting theme.
    Then I changed to another theme, say Theme2.
    But when I changed back to Theme1, it did not apply.

    I had copied the 1011-65001.css into theme.css, both in my theme folder in Explorer and in “_theme” folder in Sharepoint Designer.
    What else should I do so that Theme1 can be read back.

    So it seems like that when Theme1 is re-selected, the 1011-65001.css is automatically generated, because it is like never been edited.

    Thanks.

  14. Ryan says:

    Have you been able to figure out how to change the “Top link bar” at all.

  15. Robert Biggs says:

    To create a theme in SharePoint is fairly straightforward. The problem is when you try to edit the theme in SharePoint Designer. By default when you edit any files in SharePoint Designer it unghosts it, meaning that it creates a virtual copy of the original file which it then stores in its internal database. When you’re deal with css files, you will notices that SharePoint tags on the 1011.-65001 ending. This is the virtual version of an original file that SharePoint is applying to that particular page. As such, the best strategy for creating a theme that works across sites is to always edit the CSS outside of SharePoint Design. I suggest using Expression Web, or whatever. If you need to make minor adjustments to a theme for a particular page, you are better off creating a separate CSS file in edition to the main theme.css and applying that one to the appropriate pages where need. This will keep your original theme from getting screwed around by SharePoint.

  16. Peter says:

    Hi,

    I was wondering if it is possible to customize the html from the .net controls, like for example: SharePoint:AspMenu. I am building a page in layers, like you should, but the standard controls create tables for a menu instead of an unordered list.

    Thanks!

    Peter.

  17. sadalit says:

    This post & your responses to the comments were a lifesaver today. I was struggling with that “a theme with the name **** 1011 and version allready exists on the server” error, and your advice that it was no big thing, just go back and retrace steps, was so reassuring.
    It seems like possibly an iisreset needs to be done at the right time in order to avoid that error.
    There are some sites out there that talk about about changing the codepage number in the .inf file, but I don’t think that has anything to do with the error.
    Thanks again Shane.

  18. cloudno9 says:

    You mentioned in your post that you will be offering free SPS themes…just wondering when are you going to do that? Plus if this “vista” theme is also included in it?

    this will save me time as i am not a graphic artist at all :)
    TIA

  19. ddeffner says:

    Good day. I have a customized theme that I have applied to many sites in WSS 3.0. Now the powers that be want to change some of the elements. Well no problem, I go into SPD and open up a section make the changes to the 1011-65001.css related file, check it in FF and IE and when pleased, copy that into the the theme.css in that custom theme folder. My question is this. Do I have to manually reapply the theme to all my other sites (which does work, but it is a pain) or is there something I have to do besides restart IIS for these sites to pick up the changes to theme.css so it can re-merge with core.css to create a new 1011-65001.css file?

    Thanks
    Dan

  20. Emy says:

    Hi! About the ““a theme with the name **** 1011 and version allready exists on the server” issue…
    This worked for me: I review the .INF file and the SPTHEMES.XML file (just as Shane adviced), and i found a mistake. But i was still getting the error.
    So, i delete the _themes folder in Sharepoint Designer, and then reset the iis. And finally it worked.

    PS. It isnt a case sensitivity issue ;)

  21. Jason says:

    I’ve just spent all day creating a theme with SharePoint Designer. It works great if I edit what’s in the “_themes” folder (in this case, Lacquer), however, how do I export that theme and set it as a normal theme? I’ve tried copying it using SPD and pasting it elsewhere, renaming the folder, editing the .INF and .XML files, restarting IIS, and then changing to a different theme, but when I choose my new theme, I get the Write error on file “_themes/THEME_NAME”. error! I’ve used a couple of custom images (gradients and what-not), I’ve copied the 1011-65001.css content to the theme.css file and then deleted the 1011-65001.css file before restarting IIS.

    Quite frankly, I’m stumped and frustrated! Anyone got any ideas/help/suggestions at all?

  22. Jason says:

    I figured out the problem!!!! When I created my theme, I replaced some of the images in it. When doing so, I copied the original images before replacing them. I deleted the copied images and voila! Works like a charm in existing sites, including MySites!!

    Now, if there was only an easy way to apply the them to ALL sites at once and ALL new sites!

  23. Clarance Driver says:

    The error “a theme with the name **** 1011 and version allready exists on the server” is because of the codepage section in the myCustomTheme.inf file. So to fix the issue, open the myTheme.inf and change the codepage number to soemthing else and the error should go away.

  24. shiva says:

    Hi all
    i am working on the themes and i have done it right(with SP Designer) ….the issue i am having is that when i make the changes to the 1011-65001.css file i am able to see the changes and then i copy that info in to the themes.cc of that Theme .After performing recycle of the web application from the iis the the code is getting replicated what i mnean to say is.
    on the main page we have ms-pagetitle after changing the color and the image i am able to see the changes but after REFRESHING THE APPLICATION POOL OF THE WEB APPLICATION after applying the theme MS-PAGETITLE tag in 1011-65001.css is getting displayed 2 times with the default color and image aeven after changing it for the second ,third and fourth time the code is getting increased with the MS-PAGETITLE with default color and image please help my email is shivamoss@gmail.com

  25. UU says:

    I applied the customized theme successfully by doing below steps:

    In SharePoint Designer:
    1, copied “classic” theme and renamed it to “CLASSIC2″
    2, Changed CLASSIC.INF to CLASSIC2.INF and changed CLASSIC to CLASSIC2 in .INF file
    3, Customized ***1011-65001.css and copied it to theme.css

    Open SPTHEMES.XML which locates under C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033
    add below code:

    CLASSIC2
    CLASSIC2
    Classic has a white background with blue control areas and orange highlights.
    images/thclassic.gif
    images/thclassic.gif

    Then go to “Site Actions” -> “Site Settings” -> “Site Theme” in SharePoint site collection and chose CLASSIC2 and applied.
    Refreshed the site and can see all the changes.

    But I just wonder how can I replace an image if want? Since I can’t find CLASSIC2 folder under C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES?

    Any help is appreciated.

  26. UU says:

    I think I can delete the image first, then import the custom image.

    Another question, can I open SPTHEMES.XML in SharePoint Designer?

Leave a Reply