Archives

Archives / 2010 / February
  • Creating custom themable CSS files for SharePoint 2010

    Tags: Web Parts, SharePoint 2010

    SharePoint 2010 has a completely rebuilt theme engine. Instead of having to modify .inf files, create folders and copy and pasting CSS files and images in the SharePoint root we can now create a theme in PowerPoint and upload it to the server. The default SharePoint CSS files are tagged with comments that tells SharePoint to substitute colors and images with the values from the theme. When you switch theme SharePoint generates a new set of CSS files and images with the result of this substation.

    What if you have the need to create a custom CSS for you solution or Web Part? How can you use this theme? It's actually quite easy!

    Let's take a look at a sample Visual Web Part that is going to have a custom CSS file.

    Create the Visual Web Part

    First of all we need to start the new awesome/fantastic/productive new Visual Studio 2010 and create a Visual Web Part Project. Add a simple button to the user control and attach a custom CSS class to it.

    Button with custom CSS

    Add the CSS

    Once we have this button with the CSS class we need to create the CSS file and define the class. This is done by adding the SharePoint "Layouts" Mapped Folder to the Project. This will also add a folder with your project name under the Layouts folder - remove that one. Then add a folder structure like this 1033/Styles/Themable to the Layouts folder.

    To the Styles folder you then need to add the CSS file with your class. It should look something like this:

    .MyCustomClass {
    /* [ReplaceColor(themeColor:"Light2-Lightest")] */ border:solid 1px #d9dde1;
    /* [ReplaceColor(themeColor:"Light2")] */ background-color:#f5f6f7;
    }

    The ReplaceColor tag in the CSS comment will replace the colors in the CSS styles using the named color of the theme. For full reference check out corev4.css in the SharePointRoot.

    Then copy this file so it has a duplicate in the Themable CSS folder, your solution should look like this:

    The solution!

    SharePoint will use the CustomStyle.css in the Styles folder, when no theme is activated, so this is your default CSS. When you activate a theme it will take the CustomStyle.css from the Themable folder and substitute the colors as you wrote in the CSS file. Note that if you already have a theme enabled you have to re-enable it or if you make changes to the CSS you also need to re-enable the theme.

    Register the CSS

    We have one more thing to do to get this thing going - and that is to tell the Visual Web Part to use this CSS. This is done using the CssRegistration control which we add to the Visual Web Part user control like this:

    CssRegistration control

    You need to specify the Name attribute, which is the name of your CSS file. The EnableCssTheming attribute is not necessary since the default value is true. If it's set to false the CSS in the Styles folder will always be used. If you leave it out or set it to true and provide no CSS in the Themable folder then your CSS will not be loaded.

    Try it out!

    Now deploy your Visual Web Part and then add it to a page. Then go to Site Settings and change between themes. Isn't it beautiful!

    No theme Bittersweet theme Vantage theme

    To get some more details - make sure to get my book once it hits the streets!

  • Local SharePoint 2010 development on Windows 7 - awesome experience

    Tags: Visual Studio, SQL Server, Windows Vista, Windows 7, SharePoint 2010

    I thought I should share my experience on working with SharePoint 2010 development on Windows 7. My previous posts on installing SharePoint 2007 on Vista and Windows 7 are posts that are quite popular. The downside with the “old” SharePoint version is that it was not officially supported to install it on a client machine, but SharePoint 2010 is supported for installation on Windows 7 and Windows Vista SP1 for development purposes.

    There are many opinions on having SharePoint 2010 installed on your client OS. Some thinks it is despicable, but I think it is great and I’ve used local installations for years now. It’s perfect for rapid development, testing and demos. In seconds you can spin up a site and show some basic stuff for a client. Of course I use virtualization when testing my final bits etc.

    Benefits and drawbacks

    Having a local installation have several benefits:

    • You are running on the metal – i.e. no virtualization layer
    • Speed!
    • If you don’t have more than 4GB RAM then virtualization will be really slow
    • Visual Studio 2010 heavily uses WPF which requires a lot of your GPU. The virtualization layer will degrade the WPF performance
    • You don’t need to spin up and shut down VMs
    • Saves you a lot of disk space – one VM requires at least 20GB

    Of course there are drawbacks. I would never go from developing on a local installation to production. Always test your code on a server OS!

    SharePoint Foundation 2010 on Windows 7

    I have installed SharePoint Foundation 2010 on my Windows 7 machine. I did not go for a full SharePoint Server installation. Most of the development can be done towards SPF and it makes a minimal impact on my client OS. But perhaps I go for a full SPS 2010 install once we have the final bits of it in June.

    MSDN contains instructions on how to install SharePoint 2010 on a client OS, you need to extract the setup files and make some changes to the setup configuration file. With SQL Server Development Edition installed on my machine I installed a Server Farm, i.e. not the Standalone configuration. I also used domain accounts when I installed it, which required me to be connected to the domain during installation.

    After the installation I’ve changed all SharePoint Services and SQL Services to be manually started to save some boot time. Emmanuel Bergerat has a great post on how to create Stop and Go scripts with PowerShell so that you quickly can start and stop all services. Starting these services and warming up my sites takes about 2-3 seconds on my machine equipped with an SSD (best gadget buy of 2010!)

    Visual Studio 2010 RC and Team Foundation 2010 Basic

    I use Visual Studio 2010 in combination with a Team Foundation Server 2010 Basic installation on my local machine. Using a local install of TFS is something I really recommend – never loose any of your local projects or files.

    Visual Studio uses the GPU a lot so you will certainly have a better experience running without a virtualization layer. F5 debugging is no pain, it just takes a second to compile, package, deploy and start Internet Explorer.

    Summary

    If you have not tried to install SharePoint Foundation 2010 on your Windows 7 then stop reading right now and do it! It will increase your productivity immediately. The experience is awesome and together with RC of Visual Studio 2010 it’s just amazing.

  • SharePoint 2010 Wiki Pages displays the wrong content when passing Query String parameters

    Tags: Web Parts, SharePoint 2010

    While I was testing building some mashups using SharePoint 2010, Web Parts and SharePoint Designer I found an interesting bug.

    Initial problem

    Here’s what I did; I set up a Wiki Content Page (the new kind of Web Part Pages) in SharePoint 2010 that was supposed to be called with Query String parameter named ID which should be used by a Web Part. Another page contained items linking to this page using different integer values for the ID query string parameter like this:

    http://server/SitePages/Item.aspx?ID=nn

    My wiki pages was located in the Site Pages library within a Team site and when I clicked on one of the items I did not end up on my landing page ( Item.aspx in the sample above). Instead I ended up on random other pages in the library or received an SPException that the item did not exist. It took me a minute before I realized what really happened.

    I was redirected to the item (page) in the library that had the Id of passed query string parameter. Strange! I did the same test but used a standard Web Part Page and then it worked as intended.

    Actual problem

    So I did a new test by creating a new Team Site. On the home page of the site /SitePages/Home.aspx I added a Web Part displaying just the Shared Documents library. This page has the Id=1. A second page is automatically created when you create the site, the How to use this library page, with an Id=2.

    If I pass this request /SitePages/Home.aspx?ID=2 then I get the content of page 2 and vice versa. The strange is though if I call /SitePages/How%20To%20Use%20This%20Library.aspx?ID=1 I expected to see the contents of Home.aspx including the Web Part I added, which I did except for that the Web Part on that page was not present.

    Developer Dashboard I opened up the Developer Dashboard which verified what I saw. When I called the /SitePages/Home.aspx?ID=2 I saw the contents of page #2 but It loaded the Web Parts from page #1. The image to the right proves that it added the Web Part to the page.

    When passing the ID as a query string the Wiki Pages uses the Wiki content from the page with that ID provided in the Query String but uses the Web Parts from the page in the URL.

    This certainly must be a bug…

  • SharePoint 2010 tools in Visual Studio 2010 violates basic naming conventions

    Tags: Visual Studio, Web Parts, SharePoint 2010

    The SharePoint 2010 Development Tools for Visual Studio 2010 is great and I really like the way that the project is built using the different artifacts. One thing really annoys me though and that is the way that the code is generated and named when you add items. For example if you create a project and then add a Web Part item to that project then Visual Studio will create a Web Part class with a namespace and class name like this:

    namespace Wictor.CodeAnalysis.WebPart1 {
        public class WebPart1 : WebPart {
            // ---
    }

    As you can see the namespace and the name of the Web Part has the same name. This is a violation of one of the basic naming guideline rules (CA1724 if you run the code analysis in Visual Studio 2010). Although it works it will make your generated assembly having many different namespaces which makes it quite hard to work with. For each new item you will get a sub-namespace.

    With tools like WSPBuilder I normally placed Web Parts within one namespace, controls in one and event receivers in another. This made the experience when working with the assembly easy.

    If you now decide to change the namespace to something mode naming-convention-compliant such as below, then you need to update your Web Parts Control Description file (.webpart) and the SafeControl entry in the Package manifest.

    namespace Wictor.CodeAnalysis.WebParts {
        public class WebPart1 : WebPart {
            // ---
    }

    Making all these manual corrections will likely make your project break at some time. So I guess we have to put up with this…but it is not good looking (so if you guys there in Redmond have a few nights over until VS2010 RTM, please fix this).

  • A request to the Microsoft SharePoint Product Team

    Tags: Web Parts, SharePoint 2010

    SharePoint is an amazing product and there are some fantastic opportunities to make awesome applications. It also has a great API which has had improved further in the upcoming SharePoint 2010 release. But there are several features available in the platform/API that just isn’t available to all of us, unless we sit in Redmond and are building the actual product.

    There are so many classes or methods that are marked internal or sealed, that I really would like to use. I’m not going to nag about the search Web Parts this time, but instead focus on some classes that I really would like to be changed from internal to public.

    When working with Web Parts and especially Editor Parts, where you can create your own interface for fiddling with the Web Part properties and its configuration. I really would like to be able, without writing numerous lines of styling code, to create neat looking Editor Parts that align with the rest of the Web Part tool pane. In particular I’m thinking about the BuilderButton class which is used to create the little ellipsis button, which you get a popup to edit the text in. Why on earth is that class sealed?

    Dear SharePoint Product Team, you still have a few months until RTM of SharePoint 2010. Please make the BuilderButton public. And while you are there please go through the PropertySheetRow and Utlity classes and expose some of the methods or put them in a Tool Pane Utility class. Pure and simple…

    Meanwhile I continue to use Reflector…

About Wictor...

Wictor Wilén is a Director and SharePoint Architect working at Connecta AB. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for four consecutive years.

And a word from our sponsors...

SharePoint 2010 Web Parts in Action