Txp: Glass

Introduction

Txp:Glass is a template designed for Textpattern. It was designed by Phil Olson in June 2007 for the Textplates '07 competition.

Features

• Transparent glass and shadow effects over any background
• Easily change layout backgrounds and colors and maintain glass effect (see Customization below)
• Easy 1-line css switch between liquid or elastic layout
• Valid XHTML 1.0 Strict & CSS
• Comfortable viewing any resolution (liquid layout mode)

Installation

1. Make a backup

   This template will override the "default" style of your textpattern installation. Make sure you back up all necessary files before continuing.

2. Upload Images

   Using an FTP client, connect to your site and upload all files in the "images" directory into the "images" directory of your textpattern installation. NOTE: If you do not have ftp access, you must use the "images" tab of the textpattern interface to upload each file seperately.

3. Install pages

   All page templates are located in the "pages" folder of the archive.
   Log into textpattern and go to presentation -> pages
   
   

   • Replace the about page with the contents of about.txt
   • Replace the default page with the contents of default.txt
   • Replace the error_default page with the contents of error_default.txt
   • Create a new page called archive_list and replace it with the contents of archive_list.txt

4. Install forms

   All form templates are located in the "forms" folder of the archive.
   Go to presentation -> forms
   
   

   • Replace the comment_form form with the contents of comment_form.txt
   • Replace the comments form with the contents of comments.txt
   • Replace the comments_display form with the contents of comments_display.txt
   • Replace the default form with the contents of default.txt
   • Create a form called extra of type article and replace it with the contents of extra.txt
   • Create a form called footer of type misc and replace it with the contents of footer.txt
   • Create a form called head of type misc and replace it with the contents of head.txt
   • Create a form called header of type misc and replace it with the contents of header.txt
   • Replace the lofi form with the contents of lofi.txt
   • Replace the search_input form with the contents of search_input.txt
   • Replace the search_results form with the contents of search_results.txt
   • Create a form called sidebar of type misc and replace it with the contents of header.txt
   • Replace the single form with the contents of single.txt
   • Replace the plainlinks form with the contents of plainlinks.txt

5. Install files

   There is one file you need to install located in the "files" folder of the archive.
   Go to content -> files
   
   Click Browse... and locate the file called iepngfix.htc and then click the Upload button.

6. Install styles

   All styles are located in the "styles" folder of the archive
   Go to presentation -> style
   
   Create or replace each style with the corresponding file in the archive.

7. Install plugins

   All plugins are located in the "plugins" folder of the archive
   Go to admin -> plugins
   
   Install plugins by pasting the content of each plugin file into the box and clicking Upload. Then activate the plugin by clicking on "No" under the "Active" column to change it to Yes.

8. Edit Sections

   Go to presentation-> sections
   
   Scroll down to the settings for about. Change the settings to match below:
   Section name: about
   Section title: about
   Uses page: about
   Uses style: default
   Click Save.
   
   Scroll down to the settings for article. Change the settings to match below:
   Section name: article
   Section title: archive
   Uses page: archive_list
   Uses style: default
   Click Save.
   

You're all set! Make sure everything works by clicking on the View Site tab.

Customization

The first thing you will want to do is change the text in the small "about me" box on the front page. To do this go to presentation -> forms. Click on "sidebar" and edit the text that says My name is John Doe etc. to whatever your heart desires.

You can easily switch between liquid layout (default) and elastic layout by doing the following:
In the default style, find this line of css:

#wrapper {
margin:0 auto;
max-width:70em;
position:relative;
}

This is set to a liquid layout by default. For an elastic layout, change "max-width" to "width", like so:

#wrapper {
margin:0 auto;
width:70em;
position:relative;
}

To replace the default header background image, find this line of css in default:

#header {
background:url(../images/header_bg.jpg) #4ca8df right repeat-x;
height:190px;
margin:0 auto;
width:100%;
}

Replace "header_bg.jpg" with the filename of your own image.

To replace the striped background, find this line of css in default:

body {
background: url(../images/background_bg2.png) #FFF repeat;
font-family: "Lucida Grande",Helvetica,Geneva,Arial,Verdana,sans-serif;
font-size: 0.8em;
}

Replace "background_bg2.png" with the filename of your own uploaded image.

About PNG Transparency

Txp:Glass features an unusual design that utilizes PNG-24 alpha transparency to acheive its visual effect. This allows for maximum customization, as any background image or color can be substituted without breaking the intended look of the template. This also allows one to use a liquid or elastic layout with glass effects that work over any background image.

PNG Transparency in IE 5.5+ is achieved by using the IE PNG Fix hack by Angus Turnbull (released under the GNU Lesser General Public License) with a few slight modifications to support repeating background images. It requires javascript to run. Previous versions of IE and users without javascript are served a different version of the page with transparency effects removed.