Pixelpost Forum - Tutorial: making templates

Since I'm not qualified to start new topics in the Pixelpost 101 ;) I'm posting it here... Guess this is only the first in a line of tutorials on making templates from me :)

This tutorial was made with the aim of helping you folks in the forum creating your own templates from scratch… I’ll be explaining it through a step-by-step list of things I do from the beginning till the end.. You’ll also find some explaining pictures… Lets get started!

First of all, you’ll need an editor. Wordpad and notepad will do, but if you’ve got dreamweaver or some other html-editor with color coding that’s the best…

As you probably know, the templates of Pixelpost is divided into folders, and that each and every folder contains some files… The standard files are:

• about_template.html
• browse_template.html
• comment_template.html
• image_template.html
• referrer_template.html

The template file used for the main page (where your image is showed) is named image_template.html, and we’ll start with creating that one…

The “basecode” for a HTML document looks like this:

Code:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>

&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type">

&lt;title>Untitled Document&lt;/title>

&lt;/head>

&lt;body>

&lt;/body>

&lt;/html>

That code will give you a blank page without any content at all… And since this tutorial aims on learning you how to create templates not HTML, I won’t explain the basic code… But one can say it’s the basics and tells the browser it’s reading a HTML document…

To make this code look a bit more like a template we’ll add some tags, every tag is described in this post: http://pixelpost.org/forum/viewtopic.php?t=844, so I won’t describe it… It might be a good thing to print it so you have it at hand when you need it.

Step 1 – Create the document and your first <div> tag
The first thing we’ll do is to create simple grey line at the very top of the page to hold some information like visitors and stuff. To do that, we’ll use the HTML tag <div> and give it color and stuff in CSS (Cascading Style Sheets).

Now, take the code above and copy it into your editor. When you’ve done that, we’ll add another line to the code. The things written between <body> and </body> is the things that will appear on the page, just felt OK to mention it so you know why it’s written between those… The code you’re supposed to add between the body tags are:

Code:

<div class=”top-line”>This is just some dummy text to show the top line</div>

If you’ve done it right, your code should look like this:

Code:

 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>

&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type">

&lt;title>Untitled Document&lt;/title>

&lt;/head>

&lt;body>

&lt;div class="top-line">This is just some dummy text to show the top line&lt;/div>

&lt;/body>

&lt;/html>

You might try to save it now as image_template.html and open it in your browser.. You will find that you only have plain line of text at the very top of your page, which is not to exiting…

Step 2 – Link the CSS file to the template document
The whole point of the div tag is that we’ll give it class in CSS to style it. So you could actually make a <div> tag look like whatever you like 

We’re about to make a CSS document to hold the classes for styling the template, but first of all we have to make a link from the template to the CSS document so that the template document is able to find it and style the divs. The code for the link is quite simple, just like this:

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

NOTE! This code is supposed to be written between the <head> and </head> and your code should now look like this:

Code:

 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>

&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type">

&lt;link href="style.css" rel="stylesheet" type="text/css" />

&lt;title>Untitled Document&lt;/title>

&lt;/head>

&lt;body>

&lt;div class="top-line">This is just some dummy text to show the top line&lt;/div>

&lt;/body>

&lt;/html>

Now the template document will look for the file style.css when loading, and everything is ready for us to start styling the top-line div.

Step 3 – Make your first classes and style the top-line

Now, first of all, open a blank document for the CSS classes. This document is separate from the template file, but will be loaded simultaneous..

Every class written will be in this form:

Code:

classname {

somevariable: value; 

anothervariable: anothervalue;

}

We’ll start by styling the body tag, which is in fact the whole page. In this way we can define the same font, fontsize and other variables for the entire document in only a few lines, smart or what?

We’ll write this as a start:

Code:

body {

margin:0px; 

padding:0px; 

background-color:#CCCCCC; 

font-family:"Times New Roman", Times, serif; 

font-size:14px;

}

If you save the CSS document now as style.css in the same folder as the image_template.html file, you’ll se that the font is smaller and that the whole page have got a grey background.

The color “#CCCCCC” is the code for grey in the hexademical system, which is the system used to define colors in both CSS and HTML. A list of colors here: http://www.techbomb.com/websafe/.

Now the time has come to style the top-line… We want to make the line in a darker shade of grey and with white text… We also want the content of the top-line to be left aligned. To do that, we’ll make another class like the one for the body apart from the small detail that this class will be named with a dot (.) before the name, that’s what we do for classes for div’s and other similar ones. The code will be like this:

Code:

.top-line {

background-color:#333333; 

text-align:left; 

padding-top:3px; 

padding-bottom:3px; 

margin:0px; 

width:100%; 

color:#FFFFFF;

}

If you save it now and take a look, you’ll notice quite a difference. It’s now a bit more pleasant to look at, but still far from finished, we’ve just started :)

Hopefully your template doc now looks about the same as the picture below in your browser:

http://doffer.net/tutorial1.jpg

Step 4 – Let’s get the picture into the template!

This is where the fun begins! We’re going to put the picture tag and some more styling into the document. The picture is quite essential in a photoblog, so I’m sure some of you might have though of it already… The tag we’re going to put in looks a bit more complicated than it really is, and looks like this:

Code:

&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img class="image" id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for previous image (&lt;IMAGE_PREVIOUS_TITLE>)" />&lt;/a>

It’s nothing more than a image inside a link… You know about the DIV tag, so I’m not going to explain that again… The div have got the class “image” and the picture have got the class “main-image”. Now your code should look like this:

Code:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>

&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" />

&lt;title>Untitled Document&lt;/title>

&lt;link href="style.css" rel="stylesheet" type="text/css" />

&lt;/head>

&lt;body>

&lt;div class="top-line">This is just some dummy text to show the top line &lt;/div>

&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img class="image" id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for previous image (&lt;IMAGE_PREVIOUS_TITLE>)" />&lt;/a>

&lt;/body>

&lt;/html>

Now we’re gonna get that main image styled, yeah! If you’ve closed it, reopen the CSS file and we’ll make a couple of new classes in the CSS file.

We want the picture to be aligned on the middle of the screen (horizontally) and just a little below the top-line… So I’ll add the following lines to the CSS file:

Code:

.center {

text-align:center;

}

And inside that div, the image is placed, and now it’s time to style that… We want a smoot border around the picture as a frame… And we sure don’t want that blue link border… We’ll add a few more lines to the CSS file to make that stuff:

Code:

.image {

text-align:center; 

margin-left:auto; 

margin-right:auto; 

vertical-align:middle; 

margin-top:20px; 

margin-bottom:auto; 

padding:6px; 

background-color:#FFFFFF; 

border: 2px solid #333333;

}

Now, if you save the the files and open the templade document in your browser, it’ll hopefully look something like this:

http://doffer.net/tutorial2.jpg
NOTE! I’ve inserted an image into the template, only to be able to see what it looks like when it’s done…

Step 5 – Adding some PP tags to finnsih the image_template.html

Now that you have most of your template done, at least the layout part, it’s time to add the pixelpost tags to make pixelpost able to put in some content… We’ll put in something for the title bar of your browser, and some links for the top-line…

First of all, the title bar… Since we won’t show the image title anywhere in the image_template, we’ll include it in the title bar. We’ll be replacing this line:

Code:

<title>Untitled Document</title>

with this:

Code:

<title><SITE_TITLE> >> <IMAGE_TITLE></title>

and for the top line we want: previous, current, next, comments, archives and about+info links… To make that, we’ll replace this:

Code:

<div class="top-line">This is just some dummy text to show the top line </div>

with:

Code:

 &lt;div class="top-line">&lt;IMAGE_PREVIOUS_LINK> &lt;a href="index.php">Current&lt;/a> &lt;IMAGE_NEXT_LINK> >> &lt;IMAGE_COMMENTS_NUMBER> &lt;COMMENT_POPUP> >> &lt;a href="&lt;SITE_BROWSELINK>">Archive&lt;/a> &lt;a href="http://doffer.net/index.php?x=about">About + Info&lt;/a>&lt;/div>

And your code should now look like this:

Code:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>

&lt;meta content="text/html; charset=UTF-8" http-equiv="content-type" />

&lt;title>&lt;SITE_TITLE> >> &lt;IMAGE_TITLE>&lt;/title>

&lt;link href="templates/tutorial/style.css" rel="stylesheet" type="text/css" />

&lt;/head>

&lt;body>

&lt;div class="top-line">&lt;IMAGE_PREVIOUS_LINK> &lt;a href="index.php">Current&lt;/a> &lt;IMAGE_NEXT_LINK> >> &lt;IMAGE_COMMENTS_NUMBER> &lt;COMMENT_POPUP> >> &lt;a href="&lt;SITE_BROWSELINK>">Archive&lt;/a> &lt;a href="http://doffer.net/index.php?x=about">About + Info&lt;/a>&lt;/div>

&lt;div align="center">&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" class="image" id="image" title="Click for previous image (&lt;IMAGE_PREVIOUS_TITLE>)" />&lt;/a>&lt;/div>

&lt;/div>

&lt;/body>

&lt;/html>

You will see that the page looks quite OK now, but the links in the top-line is blue and ugly… We’ll do that in part 6, which will be up tomorrow…

Tutorial for making templates for comment page, referers and browse page will be up in a few days, but the last part of this tutorial will be up this evening I think…

Have a nice day :)