Created a .Text Skin logo for custom skins…

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.

 DotTextSkinLogo

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 Blue skin for .Text version 0.95 – Updated as of 2004.05.06

Cogitation Blue skin for .Text 0.95

Download the Cogitation skin for .Text.  This has been written for .Text version 0.95.  Please report any problems or suggestions.  Your feedback is appreciated.

Download: .Text Cogitation Blue Skin (Updated as of May 6, 2004)
Note: you will need to rename the file extension from .png to .zip.

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

Installation:

  1. Extract the zip file into the “/DotTextWeb/Skins/Cogitation” folder.
  2. Add the following line of code to the “/DotTextWeb/Admin/Skins.config” file.
    <SkinTemplate SkinID="Cogitation" Skin="Cogitation" />
  3. Copy the “/Skins/Cogitation/Images/xmlsmall.gif” file to the root of your .Text web site folder.
  4. Finally, be sure to post back and let me know if and where you use it.  Thanks!

.Text Skin Question & Answer

Question:
I’m an end user at a .Text site, not an admin… can I take the style.css or some other part of your custom skins and make them work, or is it required that the admin add it to the server?
I have experimented with this but haven’t been able to get it to work (trying bases of simple, blue, white, marvin3, anothereon01, etc)… but I’m no css expert.

Answer:
When you say you are an end user and not an admin, I am interpreting this to mean you have your own .Text blog but do not have access to administer the .Text server application. If my understanding is correct then the following is true.

In order to use a new skin (one not already available to you), someone with admin access will have to install it. However, installing .Text skins could not be much easier than it already is.

Another option:

If there is an existing skin on your .Text server that provides the layout but not the colors or fonts you want, you can override those with your own colors and/or fonts.

As a .Text blogger you will have the password to administer YOUR .Text site. Once you have gained access to your admin site you can click on "Options" and then click on "Configure". At the bottom of this screen you will find a "Custom CSS Selectors" section. In this section you can specify css (style) attributes for your .Text site. One important note, the skin you choose cannot have a color associated (i.e. select Marvin2, not Marvin2-Blue).

For example, select the Marvin2 (no color) skin and also copy the following css code into your Custom CSS Selectors section. Save and display your .Text site and the categories should now have a background color of orange.

H3
{
   background-color: orange;
}

.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.

  1. 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.

  2. 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.

  3. 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.

  1. Open the PageTemplage.ascx file in your new skin folder.
  2. 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.

  1. Open the style.css file. In this file you will find a definition (style) for page links that look like the code below.
  2. 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.

  1. Copy your new skin folder and the entire contents to the Skins folder.
  2. 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