Create stretching rounded corners background for web part titles in Sharepoint using CSS2

You most probably know that with CSS3 it became easy to crate nice-looking rectangle areas (e.g. for buttons) with rounded corners and gradient. However in Sharepoint development we are often limited to enterprise requirements which makes impossible using of CSS3 (hopefully during last several years I didn’t have IE6 compatibility requirements, but IE7 is still often mentioned). In this post I will show how to create stretching rounded corners background for web part titles in Sharepoint 2010. In the end of article I will also show how to use it for Sharepoint 2007.

Without CSS3 we have to use images with rounded corners. For this example I used online http://css-tricks.com/examples/ButtonMaker for generating of the nice-looking button and then made images from screenshot. We will need 2 images of the same height:

left:

and right:

Note that left image should be wider (for this example I trimmed it to fit into blog layout) – it will be used when user stretches browser window horizontally.

After that put the following selectors into your alternate css file:

   1: tr.ms-WPHeader > td { height: 46px; }

   2: tr.ms-WPHeader td.ms-WPHeaderTd { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td.ms-WPHeaderTd + td { background: url(right.png) no-repeat right top; }

   4: .ms-WPHeader td.ms-WPHeaderTd span { color: white; }

(you may need to fix urls to the images – according to the location of css file it may be e.g. Style library). After you will save changes your web parts will look like this:

And the same in edit mode:

In Sharepoint 2007 css will be slightly different, but idea remains the same. There is no “ms-WPHeaderTd” class so we need to use first-child pseudo element:

   1: tr.ms-WPHeader > td { height: 46px; 

   2: tr.ms-WPHeader td:first-child { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td:first-child + td { background: url(right.png) no-repeat right top; }

   4: tr.ms-WPHeader span { color: white; }

Using this technique you will be able to decorate your web parts titles with CSS3-style rounded corners background.

Fix dotless for IIS 7 with integrated pipeline mode

Recently I installed ASP.Net MVC site with dotless on production server. Site worked well under Visual Studio built-in web server but after installation on IIS css styles were not applied. In our project we use file with .less.css extension in order to keep intellisense, syntax highlighting and in order to avoid problems with non-standard file extensions on web server. As documentation says we need to register dotless handler for such files in web.config:

   1: <configSections>

   2:     ....

   3:     <section name="dotless"

   4:         type="dotless.Core.configuration.DotlessConfigurationSectionHandler,

   5:             dotless.Core, Version=1.0.0.1, Culture=neutral"/>

   6: </configSections>

   7: <system.web>

   8:     <httpHandlers>

   9:         ...

  10:         <add type="dotless.Core.LessCssHttpHandler,dotless.Core"

  11:             validate="false" path="*.less.css" verb="*"/>

  12:     </httpHandlers>

  13: </system.web>

  14: ...

  15: <dotless minifyCss="false" cacheEnabled="false"/>

And as I said it worked for built-in web server. But when I entered URL http://example.com/css/styles.less.css on production – I get original file without any modifications. I.e. all dotless artifacts like variables (@foo), mixins, etc. were not expanded to valid css.

The problem is that for integrated pipeline mode we need to add one more record into <system.webServer> section in web.config file:

   1: <system.webServer>

   2:     ...

   3:     <handlers>

   4:         ...

   5:         <add name="dotless"

   6:             type="dotless.Core.LessCssHttpHandler,dotless.Core"

   7:             path="*.less.css" verb="*"/>

   8:     </handlers>

   9: </system.webServer>

After this dotless file was successfully transformed into valid css.

Update 2010-05-08: jamesfoster notified that he updated http://www.dotlesscss.org with it