Subtext Skinning Changes

With the Subtext 1.9 release just around the corner, this is probably a good time to highlight some minor, but important, changes to skinning in Subtext.

We made some breaking changes to Skins.config file format to make the naming more consistent with the purpose.  There was a lot of confusion before.  The following is a snippet from a pre-Subtext 1.9 Skins.config file.

<?xml version="1.0"?>
<SkinTemplates xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Skins>
    <SkinTemplate SkinID="RedBook" 
                    Skin="RedBook" 
                    SecondaryCss="Red.css">
      <Scripts>
        <Script Src="~/Admin/Resources/Scripts/niceForms.js" />
      </Scripts>
      <Styles>
        <Style href="niceforms-default.css" />
        <Style href="print.css" media="print" />
      </Styles>
    </SkinTemplate>
  </Skins>
</SkinTemplates>

And here is how that snippet will change in Subtext 1.9.

<?xml version="1.0"?>
<SkinTemplates xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Skins>
    <SkinTemplate Name="RedBook" 
                  TemplateFolder="RedBook" 
                  StyleSheet="Red.css">
      <Scripts>
        <Script Src="~/Admin/Resources/Scripts/niceForms.js" />
      </Scripts>
      <Styles>
        <Style href="niceforms-default.css" />
        <Style href="print.css" media="print" />
      </Styles>
    </SkinTemplate>
  </Skins>
</SkinTemplates>

The key differences are in the SkinTemplate element. The following attributes have been renamed:

  • SkinID was changed to Name
  • Skin was changed to TemplateFolder
  • SecondaryCss was changed to StyleSheet

Another new change is that the Style element now supports a new attribute named conditional. If specified, Subtext will wrap the stylesheet declaration with an IE specific conditional comment. This is commonly used for stylesheets that contain IE specific CSS hacks. For example...

<Style href="IEHacks.css" conditional="if ie" />

Gets rendered as...

<!--[if ie]>
<Style href="IEHacks.css" conditional="if IE" />
<![endif]-->

Thus only IE will see that style declaration.

tags: , , ,

What others have said

Requesting Gravatar... you've been HAACKED Aug 26, 2006 9:15 PM
# Developing Custom Skins
Developing Custom Skins
Requesting Gravatar... Jon Galloway Aug 27, 2006 12:33 AM
# re: Subtext Skinning Changes
That conditional comment thing is brilliant. At first I thought you were only supporting "if ie"; then I re-read and saw you're using a passthrough conditional comment. Really slick.
Requesting Gravatar... StevenHarman.net Dec 28, 2006 9:24 PM
# Rollin' out some New Hotness to my blog
Rollin' out some New Hotness to my blog

What do you have to say?

(will show your gravatar)
Please add 4 and 3 and type the answer here: