Since 10 Volt Media created the HTML and CSS for my new skin per my request and nothing else, I’m having to create a new SubText Skin from scratch.  Fear not, this won’t be too hard of a process.  Well, it turns out, it slightly is.

Step 0.)  Have a local copy

I do not suggest doing this on a live copy of your server.  Too much goes wrong too quickly.  Do not do this on a live server.

Step 1.) XML

Head into your Subtext.Web project then to the Admin folder to find Skins.Config.  This is the file that tells the system what skins are what along with how items should be loaded.  I’ll constantly be going back to this file adding files in.

So I’ll add in a new SkinTemplate.

<SkinTemplate Name="Better Than Everyone v2" 
  TemplateFolder="BetterThanEveryone_v2">
</SkinTemplate>

Looking at other skins, you can see items can be loaded based on browser and version along with if it is being printed or is a screen.

Now I have a reference so lets create the folder.  In the SubText.Web project, we’ll go to Skins folder and for me, I’ll add the folder “BetterThanEveryone_v2”.

Step 2.) Base Files

We told the application we have the skin, now we need to get it up and working to a bare minimum.  The files will be within the “BetterThanEveryone_v2” folder.  I suggest cheating and copying from the Naked Skin (day.ascx has postcategorylist.ascx also if you do this)

These are the bare minimum files needed:

• controls/homepage.ascx
• controls/daycollection.ascx
• controls/day.ascx

These are just the bare bones.  We’ll want to create a master page template to get a unified theme across all our pages.  This file will be called the PageTemplate.ascx and lives in the root level of your custom skin folder, not in controls.

Since to make my life easier and I’m borrowing base files from another skin, you’ll see a bunch of the controls that are referenced aren’t referenced yet but that isn’t that big of a deal.  We’ll add them later.  What I am going to do is comment out everything except

<dt:contentregion id="MPMain" runat="server" />

Why?  This will have the page still load.

Now not all functionality will still work.  Things won’t work still like

Step 3.)  Remembering how to code

I’m not being sarcastic here since not everything is very clear.  You’ll need to look in some CS files to know how certain things will act.  I also suggest checking out how the other skins work and look.

This is important as certain base controls work different than one another.  An instance of this is for the PreviousNext control again.  It has an attribute you can use for max text size called TextSizeLimit.  Had I not checked the base control, I would not have realized this handy addition.

Step 4.) Things to watch for

I ran into the following error when I was working with PostComment.ascx.  I used <%= instead of <%# and was given this error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Also verify your search skin has the proper appearance.

Step 5.) For my skin, all needed files … I think.

controls\ArchiveDay.ascx controls\ArchiveMonth.ascx controls\CategoryEntryList.ascx controls\CategoryList.ascx controls\Day.ascx controls\DayCollection.ascx controls\EntryList.ascx controls\Footer.ascx controls\Header.ascx controls\HomePage.ascx

controls\MyLinks.ascx controls\PostCategoryList.ascx controls\PostComment.ascx controls\PreviousNext.ascx controls\ShareThisPost.ascx controls\SingleColumn.ascx controls\SubtextSearch.ascx controls\ViewPost.ascx PageTemplate.ascx

This should be everything, some are extra but like the header and footer.  Certain items are there for base functionality, others are there to make the site usable.

Step N.) Learning SubText to make it easier

It can semi act like WordPress by using the DataBinder expression.  This means you need to know what data is coming back.

In my CategoryList.ascx, I used just this to allow me to dynamically pop in CSS classes.  This bit of code uses regular expressions to strip out non-alphanumeric characters.

<%# Regex.Replace( DataBinder.Eval(Container.DataItem, "Title").ToString().ToLower(), "[\\W]", "") %>

Step N + 1.) The next step?

The one thing I’d like to see is having SubText post back without ASP.NET controls.  This allows me not to know or care about which controls must be on the page for it to work, all I need to know is what my input control needs to be named and what fields are in the data returning.  On a “base skin”, list the data getting returned so one can do the binding rather than all the literals and labels.  Not sure how Phil Haack and company will like what I want to do but I’ll pass by the idea.