Creating your first subtext skin Part 1

Introduction

Subtext Reference skin links:

Phil Haack – Mile High Overview Of Subtext Skinning.

Welcome to my first article discussing the creation of a skin within the .NET blogging engine subtext. If you have downloaded and installed subtext you will have noticed that it comes with several pre-defined skins.  While the pre-definedskinsare varied and could easily be used it’s sometimes necessary to create your own.  The initial template will be styled to work in Fire Fox 2.  I will be covering “styling for a specifc” browser in another article.

This is the first article of four of which i would like to cover:

  1. Subtext Project Details
  2. Going from Idea to Implementation
  3. Get Started with a simple base skin
  4. Letting the application know about your skin
  5. Setting up the base page template
    1. The pagetemplate.asc control
    2. Adding in our general style sheet
    3. Implementing the classes to reflect rough design
      1. Changing the header
      2. Hiding the blog stats for now
      3. Placement and format of our navigation
  6. Where we are at

Subtext Project Details

Going from Idea to Implementation

Now first we begin by creating the design for our new theme.  This helps as it’s a lot easier to code the css when you have something to follow.  Like Blue Peter here is one I created earlier. This Screenshot is a hand drawn rough layout so I have something to reference when creating my base template.

Scottish Snowboarder Hand Drawing design

Mozy Back

I know the design isn’t anything fantastic but have you ever heard of programmer who can design?  Anyway, if you can make it out the “site Section” items are placed in a block top left, the navigation block on the left hand side and the content block on the right hand side.  Above the main content I have placed the stats block that displays the amount of posts/comments/trackbacks.  The headers for the blocks on the left hand side i.e. recent posts/categories are made up from a background image that has a little snowboarder to the left and the header on the right.  If this isn’t very clear don’t worry as we progress it will all fall in to place.  The reason I haven’t done a “proper” design in a graphics package is I want to show how easy it is to change the whole page design with a couple lines of css.  Using css gives us the ability to iterate through the colour spectrum to find a colour we’re happy with on the blocks and the page layout.

Get Started with a simple base skin

What I am going to be looking at is the “naked” skin and converting it into Scottish Snowboarding  theme. I am presuming that you have a local development area setup or you have access to an installed version of subtext and ftp access.

Within the skins directory you will see a folder called “naked”, this is going to be our starting block.  Copy this folder and paste it in same skins directory.  Rename the directory to “scottishsnowboard1″ and That’s it. We have a simple base skin that we will be changing however, before we do all this we need to let the application know about this skin.

Letting the application know about your skin

Navigate to the admin directory where we will be creating a new file called “skins.user.config”.  The file will contain the following:

 

<?xml version=”1.0″?> <SkinTemplates xmlns:xsd

=http://www.w3.org/2001/XMLSchemaxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Skins>
<SkinTemplate Name="Scottish Snowboarder 1" TemplateFolder="scottishsnowboard1">
      <Styles>
          <Style href="~/skins/_System/csharp.css" />
          <Style href="~/skins/_System/commonstyle.css" />
          <Style href="~/skins/_System/commonlayout.css" />
      </Styles>
      <Scripts />
  </SkinTemplate>
  </Skins>
</SkinTemplates>

The skin template name attribute is what is displayed in the skin drop down list within the administration area.  The skin template folder is the name of the folder that our skin can be found, in this case “scottishsnowboard1″.  If you’re working locally then you should see the new theme in the dropdown list, if not then you need to upload the scottishsnowboard1 directory into the skins directory and then upload the skins.user.config into your admin folder.

By selecting this new theme and saving your subtext site will be looking identical as if you chose naked.

The above styles that are declared define the basic look of a skin.

The single point of failure in this process is the skins.user.config file.  It is advisable that each node and attribute is checked to ensure all the elements are closed and the attributes are declared properly.

Setting up the base page template

Ok so the application now knows about our skin.  Now it’s time to get our page to start looking like our design.

The pagetemplate.asc control

Within our skin directory there is a file called “PageTemplate.ascx”.  when you open it you’ll see that the page is broken down into divs and then usercontrols. What are we looking for?  First things first is the main page holder which in our pagetemplate.asc file is called the “container” (div), second is out left menu strip which is called “navigation” (div), third our content region “content”(div) and lastly our footer “footer”(div). While we are looking at the template we’re going to make a small change.  Within the “navigation” div we want to cut  <uc1:header id=”Header1″ runat=”server” />   and then paste it within “header” div under the mylinks user control.  You should have the following:

<div id=”container”>
<div id=”header”>
<uc1:mylinks id=”MyLinks1″ runat=”server” />
<uc1:header id=”Header1″ runat=”server” />
</div>
<div id=”navigation”>
<uc1:blogstats id=”BlogStats1″ runat=”server” />
<uc1:news id=”News1″ runat=”server” />
<uc1:RecentComments id=”RecentComments1″ runat=”server” />
<uc1:RecentPosts id=”RecentPosts1″ runat=”server” />
<uc1:singlecolumn id=”SingleColumn1″ runat=”server” />
<uc1:TagCloud ID=”tagCloud” runat=”server” ItemCount=”20″ />
</div>
<div id=”content”>
<dt:contentregion id=”MPMain” runat=”server” />
</div>
<div id=”footer”>
<uc1:footer id=”Footer1″ runat=”server” />
</div>
</div>

We will only be touching on the styles for the above divs we don’t need to change much. Most of the styling will be applied to elements within the individual usercontrols.  I hope that this quick overview of the pagetemplate.asc control sets off a couple of ideas on the basis of not being limited to the divs/usercontrols that already exist in this file

Adding in our general style sheet

Ok lets add in our own general style sheet that will determine the basics of our skin.  Within our skin directory we’re going to create a folder called styles and within styles a file called myskin-general.css.  Once this directory and file have been created we’re going to amend the Skins.User.Config file again to reflect our new addition.  Within the admin directory open up our Skins.User.Config file and add the following line highlighted in yellow

 

<?xml version=”1.0″?> <SkinTemplates xmlns:xsd

=http://www.w3.org/2001/XMLSchema/a>xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Skins>
<SkinTemplate Name="Scottish Snowboarder 1" TemplateFolder="scottishsnowboard1">
      <Styles>
          <Style href="~/skins/_System/csharp.css" />
          <Style href="~/skins/_System/commonstyle.css" />
          <Style href="~/skins/_System/commonlayout.css" />

<Style href=”Styles/siphilp-general.css” media=”all” /> </Styles> <Scripts /> </SkinTemplate> </Skins> </SkinTemplates>

Check that the xml is valid and then save.  If your working local run your application and view source you will see the new style sheet you have added is where it should be.  If you are working from your web host then upload the new styles directory, the style sheet and the Users.Skin.Config file to the relevant directories.

Implementing the classes to reflect rough design

When we look at our site it should look something like the following:

Scottish Snowboard 1 subtext - the beginning

Changing the header

We’re going to centre our “container” div and then format the header elements.  All the changes are going to be made in the general css file sheet.

body{margin:0px;}
div#container{width:800px;margin: 0 auto 0 auto;border:2px solid #ccc;min-height:100%;overflow:auto;}
div#header{padding:10px;}

div#BoarderBanner{width:575px;background-color:#8FAEFF;height:150px;float:right;}

div#myLinks{height:150px;width:190px;float:left;background-color:#8FAEFF;}
div#myLinks .title{display:none;}
div#myLinks .links ul{ list-style-type:square;}
div#myLinks ul li{width:80%}
div#myLinks a{text-decoration:none;color:black;padding:4 0 4 0;}

Hiding the blog stats for now

.BlogStats{display:none;}

Placement and format of our navigation

div#navigation{float:left;min-height:100%;width:190px;padding:10px;}
div#navigation .links{border:1px solid #8FAEFF;margin-top:10px;}
div#navigation .title{background-color:#8FAEFF;}

Placement of the main content(post)

.post{float:right;width:575px;}

Where we are at

Full siphilp-general.css listing

body{margin:0px;}
div#container{width:800px;margin: 0 auto 0 auto;border:2px solid #ccc;min-height:100%;overflow:auto;}
div#header{padding:10px;}
div#myLinks{height:150px;width:190px;float:left;background-color:#8FAEFF;}
div#BoarderBanner{width:575px;background-color:#8FAEFF;height:150px;float:right;}

div#myLinks .title{display:none;}
div#myLinks .links ul{ list-style-type:square;}
div#myLinks ul li{width:80%}
div#myLinks a{text-decoration:none;color:black;padding:4 0 4 0;}

.BlogStats{display:none;}

div#navigation{float:left;min-height:100%;width:190px;padding:10px;}
div#navigation .links{border:1px solid #8FAEFF;margin-top:10px;}
div#navigation .title{background-color:#8FAEFF;}

.post{float:right;width:575px;}

From this what our skin looks like

Skin so far

As you can see from 15 lines of straight forward css we can change the way it looks quite easily.  We have accomplished the basic layout of our skin.

In the next article we will be taking another step closer to our final design by adding images to our header and our navigation elements.

  5Comments

  1. Simone   •  

    The new mockup looks great… keep going on this

  2. conannb   •  

    nice article!

  3. Cotters   •  

    Hi Simon

    Any news in the follow up articles for creating SubText Skins??

  4. Simon Philp   •  

    Things have been hectic. I am going to be putting together new articles soon really waiting on the new version of subtext to be released as i don’t know how much is changing on the skinning side as yet. Are you having problems or stuck with a certain area i can maybe help you out with?

  5. Cotters   •  

    No major issues, I am not too hot on css so I was interested to see a few more examples and obviously understand the skinning environment in more depth. What version of SubText are you waiting for? 2.0?

    Great article by the way, many thanks

    Paul

Comments are closed.