Friday, December 24, 2010
This master page was largely based on previous versions I've created so it was really perplexing. The only difference from this and the previous master pages I created was I repositioned the ribbon back up to the top (as it is normally out of the box), where I normally move it under the navigation. I had then put the SiteActions control below the SPRibbon next to the Additional Page Links, where I normally have it next to the Global Navigation. So typically the SiteActions sits above the Ribbon is all previous cases.
If I put the SiteActions Control after the SPRibbon control the Page layout button control is disabled. Putting Site Actions inside of the Ribbon and before the ribbon tabs restores the Page Layouts Button. The key is making sure SiteActions is placed before the Ribbon Tabs. This is a sad contraint, and I can't see a reason for the limitation so I'll chalk this up to a flaw. I have yet to find a workaround so make sure your designs have these considerations.
Friday, April 10, 2009
Work smarter, not harder. Conveniently, Microsoft has done some of the dirty work for us. Since the existing themes already manipulate the styling for a large portion of SharePoint elements you would want to brand (like content pages, application pages, and lists in SharePoint) we can leverage their hard work and re-purpose it for ourselves.
What is a Theme made up of. If you open up any of the provided theme folders you will see most themes contain similar elements: 50 or so images, an *.INF file named appropriately by the name of the theme, and two CSS file files (theme.css and mossExtension.css). I believe the mossExtention.css was added there to control MOSS 2007 specific classes that may not be needed in WSS. Theme.inf simply defines the title of the theme for all of the different language-variations that may be applied to a site’s language setting. Theme.css is a style sheet file that defines the usual CSS class and ID elements of a site to be branded. And of course, you’ll need images if you want your site not to look like SharePoint OOTB. Those image files will be referenced in the CSS.
Let's get started. Here are the steps to creating a custom site theme named "MyTheme". We’re assuming for this exercise you have access to the file system of your SharePoint server.
1. Open up a Windows Explorer window and browse to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder.
2. Copy any theme folder in and paste with its name replaced with "MyTheme". In this example, I chose to work with the OBSIDIAN folder. You may want to choose a theme that is closest in styling to the finished result you are looking for so you’ll have less work later.
3. In MyTheme folder, rename OBSIDIAN.INF file to MYTHEME.INF in upper case.
4. Open MYTHEME.INF file with notepad to edit it.
5. Change the value of title under [Info] to MyTheme.
6. Change the value to codepage to something unique. All of the default SharePoint themes use some variation of 6#### so I typically use numerical variations that begin with 7.
7. Leave the values for version, format, readonly, and refcount alone.
8. Everywhere that is says Obsidian under [titles] replace it with MyTheme.
When you are done your INF file should look something like this:
Note: each of the 4-digit codes under [titles] represents a locale identifier (or language variation) and if you wish to have different display name for your theme on different variation sites then this is where you set that. Language-specific resource files are separated into different directories to eliminate conflicts with other corresponding resources in other language.
For more information, see my blog post here:
9. Now open up and copy the classes from mossExtension.css that are missing from the theme.css over to the bottom of the theme.css file. Some classes may be repeated so now would be a good time to do a little clean-up and remove/merge any set of classes that were duplicated inside of the mossExtension.css file.
10. Once you are done merging the classes, delete the mossExtension.css file so there aren't any confusions later on. You are only going to need the theme.css file.
Set yourself up to succeed. Now we don’t want to activate our theme and apply it just yet. Before we make it available for selection you should redefine the styles the way you want. The reason for doing this is because once you activate a theme and select it for use on a site all of the theme files (CSS and images) will get cached in IIS, making editing and tweaking your theme’s styling a nightmare. In order to see your changes you’d need to reset IIS in order to see the alterations. Even worse, if a theme is set on any of your sites an instance of the theme gets stored in the content database of SharePoint. But there is a way to avoid all of this for development purposes.
11. We’ll proceed by moving the entire MyTheme folder to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\" folder on our server.
12. Go back to your SharePoint site in the browser, go to Site Actions > Site Settings > Modify All Site Settings, and click on the Master Page link under the Look and Feel heading.
13. Scroll all the way down to the Styling section, select "Specify a CSS file to be used by this publishing site and all sites that inherit from it", check off "Reset all subsites to inherit this alternate CSS URL" and click OK. “/_layouts/1033/STYLES/MyTheme/theme.css” and click OK.
You’re probably wondering why I reset all subsites to inherit the alternate CSS file I set. It’s because I have built out my dev environment to include all of the OOTB SharePoint Site Templates in use so I can see all of the different ways SharePoint is styled. Being able to see how elements like the datepicker, calendar, and different web parts render and tweak their styling gives me a more practical view as to how my theme will behave in the end when I’m finished.
Note: Publishing Features are not available in WSS.
Time to Customize. When you browse back to the home page of your site you will see the look and feel has been changed. Now we can begin editing the CSS and images to reflect how you want your site to look. In the effort to keep this post moving along I will cover branding different elements of SharePoint in other posts. So when you are finished styling your site you may move on to the next steps.
Add a matched preview. Now that your site looks the way you want we’ll want to create a preview image so that when a user wishes to set the theme in the browser they will have a visual reference as to what it will look like when set. By default, MOSS 2007 and WSS 3.0 have those image files for the OOTB Themes and you’ll need to create one yourself if you want to provide a complete solution. I personally cringe when i go into others environments and see that someone cut a corner and skipped creating a preview. Short-sighted if you ask me.
14. Take a screenshot of your home page (Alt + Prnt Scrn).
15. Open the image editing program of your choice (I used Adobe PhotoShop).
16. Create a new file (which should be the size of your browser window by default).
17. Paste the screenshot from your clipboard.
18. Crop out the surrounding browser window to only how the page contents.
19. Resize the image to be approximately 375 x 231 pixels (the size of the other OOTB SharePoint theme preview images).
20. Export the image as thMyTheme.gif and save it in “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\”.
I should mention that you don't have to do this all from scratch. I have gone ahead and created a Photoshop PSD file that contains all of the OOTB SharePoint theme preview images on separate layers. It also has some of the elements from the default previews (like the search box, navigatioin, web part titles, etc.) seperated on different layers so you can do color shifting and move elements to match your theme as necessary. Here you go:
Theme Preview Image PSD
Restore the default styling. In your browser go back to the top level of your SharePoint site where you set your theme.css.
21. Go to Site Actions > Site Settings > Modify All Site Settings, and click on the Master Page link again under the Look and Feel heading.
22. Scroll all the way down to the Styling section, select "Use Windows SharePoint Services default styles", check off "Reset all subsites to inherit this alternate CSS URL" and click OK.
Make your theme available. It’s time to see the fruits of your labor at work.
23. Move your entire MyTheme folder from "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\" back to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder.
24. Open "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML" file with notepad.
25. Add the following lines underneath the
Note: For this lesson we’re dealing with the 1033 folder. As mentioned above, 1033 is the locale identifier for "English (United States)" which was installed with my copy of SharePoint. If you are working in another locale with another language in SharePoint there will be other folders with 4-digit numeric codes for each of the languages installed in your environment. There will be a SPTHEMES.XML file under each of the LCID directories and you’ll need to add
26. Reset iisrest by opening up a Command prompt (Start > Run > cmd) on the server, type in “iisreset /noforce” and hit enter. You should now see it say that IIS is stoping, then restarting. Once it’s finished close the window. We do this in order for the server to recognize the new theme and make them available for selection because the SPTHEMES.XML file is also cached in IIS.
Check out your theme. In your browser go back to the top level of your SharePoint site one more time, go to Site Actions > Site Settings > Modify All Site Settings, and click on the Theme Settings link under the Look and Feel heading. You should now see MyTheme available for selection in the themes list. Clicking on MyTheme should show your preview that you created earlier. Click OK and go check out your site.
Pretty simple, huh? Enjoy!
Internet Explorer Developer Toolbar.
Allows IE6 and IE7 users to visually see and inspect the DOM while viewing the page, revealing the layers HTML objects with their classes and IDs in a tree view, and the properties of each. If you have IE8 then use the new development tools built in.
A layerred Photoshop PSD file that contains all of the OOTB SharePoint theme preview images on separate layers. It also has some of the elements from the default previews (like the search box, navigatioin, web part titles, etc.) seperated on different layers so you can do color shifting and move elements to match your theme as necessary.
Servé Hermans's Sharepoint 2007 theme generator
Wednesday, April 8, 2009
The following table lists Locale IDs (LCID).
- Decimal Value
- Locale Description
- German - Germany
- French - France
- Italian - Italy
- Spanish (International Sort)
- Dutch - Netherlands
- Portuguese - Brazil
- Swedish - Sweden
- Norwegian - Bokml
- Chinese - Taiwan
- Chinese - China
- Portuguese - Portugal
- Arabic - Saudi Arabia
- Short String
If you are interested in the complete list of LCIDs used through out the Microsoft suite of applications, check them out on MSDN at:
Friday, April 3, 2009
Also noted is that future releases of Expression Web will become an excellent choice for page customization of SharePoint sites. I'm not exactly sure why this was not the case to begin with but it makes perfect sense. Lets look at the history of Microsoft's SharePoint customization tools to understand why.
With SharePoint 2003, designers and developers used Microsoft FrontPage 2003 with the SharePoint extensions. In the 2007 release of SharePoint, FrontPage was phased out (or shall we say rebranded) and SharePoint Designer emerged. Expressions Web also became the new face for FrontPage, but there wasn't and support for customizing SharePoint. You could say Microsoft is going back to it's initial position by providing Expression Web (er FrontPage) with SharePoint support once again. The real question here is, why have two applications at all if they will essential do the same thing? The interfaces are almost exactly the same, and now the tools will be the same... or will they be? Hmm. Is Microsoft going to be spinning SharePoint Designer into a trimmed Expression Web? And if so, what will be lost in the traslation?
You can read about some of this and more in Microsoft's Letter to SharePoint Design Customers and Q&A on SharePoint Designer 2007 Licensing Changes published on Monday 3/30/2009. There is also an FAQ video in the "Related Resources" section to learn more about details and the future direction of SPD.
To learn more about SharePoint Designer, visit the Home Page for SharePoint Designer 2007.
Monday, March 30, 2009
title="Normal (centered, fixed)"
Alternative Styles can be offered by adding the following:
<link rel="alternate stylesheet"
<link rel="alternate stylesheet"
<link rel="alternate stylesheet"
If you notice, the default is set because the rel="stylesheet" and the alternates are rel="alternate stylesheet". The number of alternates is infinite and you simply by adding more elements with the appropriate REL and TITLE attributes in the header. Also note, groups of links with the same TITLE are automatically combined into one style sheet.
So how does the end-user choose alternate styling? Simple: it's available in the menu. Here is a look at IE8's menu.
Here is Firefox's functionality.
You're probably wondering why would this be useful in SharePoint? Whether it is a internet, intranet, or extranet, this gives organizations a way to support their user's to have personal experiences. This may not make sense for every situation, and not every company is going to be willing to put in the effort, but it does make a statement about an organizations support for it's culture to enjoy individuality.
A business case has been proven to have alternative style sheets, now you may be wondering how we would implement it in SharePoint? Simply adding the links to the head can have mixed results depending on how the styling has been approached. For instance, if your CSS is only reference in the master page, then you run the risk of a theme or other alternate CSS set in the UI (Site Actions > Site Settings > [Look and Feel] to override your styling. So decisions need to be made as to what is going to be the dominating stylesheet. If you do not have anything set for the Alternate CSS URL and only reference your CSS in the master page, then your application pages (.../_layouts/...) will not be styled. So you'll want to at least do that. That CSS file is rendered right after the core.css as expected.
But what if you are working with themes? Well, what happens is a theme will override your alternate CSS URL set in the UI. So now what? How do you make client-side alternative stylesheets available? Simple, you break the rules. I have found that if I add CSS links after the opening body and before the form tag, I am able to override any CSS SharePoint will render.
So in the end, you'll want to link to a standard Alternate CSS URL in the UI, apply any themes to override it where ever you desire, and add the rel="alternate stylesheet" links in the body to for the final control.
Well, I hope this has helped. Have fun!
Friday, March 27, 2009
If you've named your top-level site something other than Home then that name is what appears.
Ta-da. That is it.
As it turns out, the zz1_TopNavigationMenun0 ID is unique to the TD containing the Home link. See here... this is the DOM as seen in the IE Dev Toolbar.
Adding my CSS above to an alternate CSS file has worked every time. Enjoy. ;-)
Thursday, March 26, 2009
The default file will be named owssvr.iqy which is an internet query file. Clicking Open will launch Microsoft Excel. Depending on your security settings you will likely get a security warning about opening query data. Yeah, no problem because you trust the source. So you click Open. Wah waaaah... you get an error: Cannot get the list schema column property from the SharePoint list.
This is most likely because there are columns in the list that are not supported by Excel, such as HTML. Hopefully this will atleast help you figure out why you get the error, but unfortunately I don't know of a work-around for this other than to remove the column.If you have any ideas, please feel free to comment.