.Text Skins

I finally have my .Text aggregate page working

Mark H. Wagner — Wed, 29 Sep 2004 15:32:00 GMT

.Text is an excellent application. It is a very useful application. It does not have ~~very good~~ any documentation. The .Text Wiki does not qualify as documentation. It is the result of six people trying to drive the same car at the same time. With all due respect I am not the best when it comes to providing solid documentation. Furthermore, .Text is a free application and I should just shut my trap! :)

Here is what I had to do to get my aggregation page working.

Make sure your blogger configuration entries (in your blog_Config table) have a value of 1. You will have to update these values manually. My original values were null.
Make sure your web.config has the following configuration entries for a multi-blog installation.
<add key="AggregateUrl" value = "http://blogs.DomainNameHere.com" />
<add key="AggregateHost" value = "blogs.DomainNameHere.com" />

I found plenty of information discussing the web.config entries, but only one spars item discussing the database values of 1.

New .Text skin: Illumination

Mark H. Wagner — Mon, 17 May 2004 21:12:00 GMT

I'm testing out my new .Text skin called Illumination. I have formatted this skin so that the border images can be easily changed using new border images. Also, I have pushed all images to be defined in the style.css style sheet. This will allow users to more easily customize the images to their liking.

I hope to have this new skin along with several color schemes available soon. Let me know what you think. I would also appreciate any feedback regarding bugs or display issues.

Thanks!

Created a .Text Skin logo for custom skins...

Mark H. Wagner — Thu, 06 May 2004 22:59:00 GMT

I have created a .Text Skin logo. The idea is to place this logo at the bottom of my custom .Text skins. This would allow users who see a .Text skin they like on another site to easily locate and download the .Text skin. Here is the logo. You can see the logo here as well as how it is implemented at the very bottom of this page.

I hope Scott Watermasysk and the .Text team do not feel as though I am taking unnecessary liberties with their logo. It was my intent to keep the original .Text logo look and feel. I would be more than happy to use any image that Scott and the .Text team suggest. I just wanted to share my idea with the rest of the .Text community.

Cogitation Skin Updated as of May 6, 2004

Mark H. Wagner — Thu, 06 May 2004 22:37:00 GMT

Updates: Go To Download Page

Changed the style (.css) files to use relative font sizes.
Minor border and margin padding changes.
Replaced the “(rss)“ text with the orange “xml“ image in the left links column.
Miscellaneous small changes to easily facilitate additional color schemes (to come soon).
Included the new suggested .Text Skin logo which appears at the bottom of the skinned .Text site.

Very nice new .Text skin by RoudyBob

Mark H. Wagner — Mon, 15 Mar 2004 08:07:00 GMT

RoudyBob has a nice new .Text skin! I do like it! You can check it out at http://roudybob.net/archive/2004/03/14/445.aspx

.Text Skinning 101

Mark H. Wagner — Mon, 23 Feb 2004 22:18:00 GMT

.Text Skinning 101

Mark Wagner
Feb 23, 2004

“Beauty is only skin deep.” We’ve all heard this before, and it is so very true. Placing a nice skin on an application that does little or nothing will quickly become an annoying and unpleasant experience for the user. Sound like anyone you know from high school? Thankfully, the .Text application was not only designed to be easily skinned, it is a very useful and commendable application as well.

Skinning is a great way to get that instant gratification we all sometimes need. It’s a great way to learn and tinker with an application while only staying skin deep, pun intended.

This article is intended to cover only the basics of creating a new .Text skin. You are expected to know C# and ASP.NET (or are learning them). In order to keep this article short, I will not be covering any C# or ASP.NET technical details. I will leave that in your capable hands, and your favorite How To book.

Here is what I will be covering:

Understanding the Skin file structure
Creating your new skin base
Modifying your new skin base
Testing your new skin base
Publishing to your .Text blog site
Note: Publishing your new skin to your .Text site will require that you have access to transfer files to the web folder of your .Text blog site. The good thing is, this is a very simple and non-invasive process.

Here is what you will need.

A text editor such as Notepad; or Visual Studio .NET is even better.
Understanding of HTML or ASP.NET

Understanding the Skin file structure

There are several folders and files within the .Text web application. Most of these files and folders are not important for you to understand. This is the beauty of having a skinnable interface.

Directly under the root of the web project is a folder name Skins. This Skins folder contains all the information you need to create your own skin design. Within the Skins folder you will find several more folders. Some of the folder names you will see are White, Simple, Marvin2, along with others.

Each of these folders is called a skin base or skin layout. Each folder contains the skin particulars such as the screen layout for the various .Text screens. Within each skin folder you will find several common files. In fact, the majority of the file names from one skin to the next will be very similar. Here is a brief list of the files you will be working with.

Controls folder
This is where the different sections of a page are defined. Each page is generated to the end-user from the various controls within this controls folder. For example, the MyLinks.ascx file (control) defines the layout for the My Links section of the page.

Images folder
This contains any custom images for your skin. Most of the default skins do not have any custom images.

PageTemplate.ascx
This control defines the page layout. When you open this file you will notice there are several controls used within this control. This layout is what defines your overall page layout. For example, if you want to change the layout of the My Links section, you will need to change the MyLinks.ascx file in your new controls folder.

Style.css
This is where the majority of your skin definition should be defined. The more you can define your skin using style sheets (this style.css file), the more flixible and manageable your skin will be. Furthermore, creating several color variations of your skin will be much easier to create.

Creating your new skin base

Now we will create the new skin base folder for your custom new skin.

Create a new folder under the Skins folder and give it the name of your new skin. I suggest that you don't have any spaces in your skin folder name. Your new skin folder should now be listed among the list of other skin folders, ie. White, Simple, Marvin2, etc.
Copy the folder contents of an existing skin to your new skin folder. For example, copy all files and folders in the “white” skin folder into your new folder.
Add the following line of code to the Skins.config file located in the root of the Admin folder. You will find other entries that look familiar. Be sure to replace the “YourSkinName” with the actual name of your new skin. This should be the same name as your skin folder. Adding this line of code is what causes your new skin name to appear in the list of available skins on the admin screen.

<SkinTemplate SkinID="YourSkinName" Skin="YourSkinName" />

At this point we have not done anything other than create a new skin folder and adding your new skin name to be available in the admin screens. You should now run your .Text application and select your new skin using the admin screens.

You will notice your new skin looks exactly the same as the “white” skin, or whatever skin you copied from. You are now ready to begin modifying your new skin.

Modifying your new skin base

In this section I will have you make just a couple small changes. The rest is up to you and your creative talents. However, before you begin there are a couple VERY IMPORTANT things to keep in mind.

The controls (.ascx) should contain only the basic layout of your page or section. Your controls should not contain any colors, font types, font sizes, or any other definitions that can be defined in the style.css file. Anything you define in the controls will essentially be “hard-coded”. You will soon find out that “hard-coding” your controls will take much more time in the long run. Styles (Cascading Style Sheets or .css files) are your friend so you should get to know your friend well.

Now lets make a couple simple changes. The first change will be a page layout change. The My Links section is listed above the News. We would like to have the News at the top; so lets do it.

Open the PageTemplage.ascx file in your new skin folder.
Reverse the order of the following MyLinks and News controls

change from:

<?xml:namespace prefix = uc1 /> <uc1:MyLinks id=MyLinks1 runat="server"> </uc1:MyLinks> <uc1:News id=News1 runat="server"> </uc1:News> <uc1:ArchiveLinks id=ArchiveLinks1 runat="server"> </uc1:ArchiveLinks>

change to:

<?xml:namespace prefix = uc1 /> <uc1:News id=News1 runat="server"> </uc1:News> <uc1:MyLinks id=MyLinks1 runat="server"> </uc1:MyLinks> <uc1:ArchiveLinks id=ArchiveLinks1 runat="server"> </uc1:ArchiveLinks>

Save the PageTemplage.ascx file and test. The news should now be listed above the My Links section.

Next we will change the color of the link text from green to maroon.

Open the style.css file. In this file you will find a definition (style) for page links that look like the code below.
Change the color from #5C9A3D to Maroon.

Change from:
a:link, a:visited, a:active
{
          font-weight: bold;
          color: #5C9A3D;
          text-decoration: none
}

Change to:
a:link, a:visited, a:active
{
          font-weight: bold;
          color: maroon;
          text-decoration: none
}

Save your style.css file and test. The colors of the links in the main body of your page should now be maroon.

Now the rest of your changes are up to you.

Testing your new skin base in your site

Test, modify, test, modify, test modify… Take baby steps. A point that may save you a bit of time is to run your project in “release” mode. This will remove the additional text that appears in some of the controls making it easier to view your rendered page. Since the style sheet (style.css) and the controls are essentially HTML/CSS, you can make a change, save it, and then simply refresh your page without having to stop and start your project.

Publishing to your .Text blog skin

Publishing your new skin to your .Text site will require that you have access to transfer files to the web folder of your .Text blog site. The good thing is that this is a very simple and non-invasive process should someone else (an administrator) have to do this for you. This process is performed on the server where you intend to use your new skin.

Copy your new skin folder and the entire contents to the Skins folder.
Add the following text to the Skins.config file located in the root of the Admin folder. You will find other entries that look familiar. Be sure to replace the “YourSkinName” with the actual name of your new skin. This should be the same name as your skin folder.

<SkinTemplate SkinID="YourSkinName" Skin="YourSkinName" />

You are now ready to use your new skin.

Good references:

Mark Pilgrim
http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html

I hope this article has been helpful. Please provide any feedback regarding this article so that I can make any corrections it needs. Also, post a message back here with a link to your new skin. I am always happy to see what others have been able to create.

Thank you,
Mark Wagner
Simple Thoughts from a Simple Mind
http://blogs.crsw.com/mark

.Text Skinning Q & A

Mark H. Wagner — Thu, 19 Feb 2004 17:44:00 GMT

I have received a few questions about skinning a .Text weblog over the last couple days. I thought it would be a good idea to put my blog to work. So, I have created this post where .Text bloggers can post questions and answers using the feedback function. This is not exactly a forum format, but it will due. So, feel free to post any questions or answers to questions posted here. I will try to answer any question I can.

Before you post your question(s), you may want quickly read my article .Text Skinning 101. It covers the basics of creating your own skin.

Cogitation Blue skin has been updated

Mark H. Wagner — Tue, 17 Feb 2004 23:00:00 GMT

I have updated the Cogitation Blue skin for .Text. A few minor changes in addition to removing the two ads I use on my site.

Cogitation Skin :: My ToDo List

Mark H. Wagner — Tue, 17 Feb 2004 13:48:00 GMT

I will be posting todo items here via the feedback function. Feel free to post your suggestions here as well. Check back soon as I intend to create several popular colors to choose from.

w.bloggar - A very nice tool for your .Text site

Mark H. Wagner — Tue, 17 Feb 2004 13:06:00 GMT

I've been playing with w.bloggar now for about 20 minutes. Looks to be a very useful tool and so far works well with .Text. Chances are I may begin using it. The preview does a nice job of handling logical paths to images and links, and post to my blog nicely. If you haven't tried it out I suggest you do.

You can find it here: w.bloggar