You are here: start » dev » theming » create

Documentation

Addons

Team area

Theming guide

Theming guide

This page will guide you through the process of making your own pluck-theme. You have to know your way around (x)HTML, and some knowledge of PHP would also become handy.

Note: this guide is only suitable for pluck 4.5.3 or older! For an up-to-date guide for newer versions of pluck, refer to this guide.

Directory structure

Each theme has its own directory in data/inc/themes. Your can make your theme in data/inc/theme/blue, for example.

There are at least 3 files needed in a theme-directory:

style.css - the CSS-layout file of your theme
theme.php - in this file you give some information about the theme
index.php - the most important file, in which the different HTML-elements are specified; see below for more information

We'll go through these files one by one.

The following file is optional:

style-rtl.css - the CSS-layout file of your theme, for RTL (right-to-left) languages, such as Hebrew. If you want your theme to support these languages, you can include this file. If this file is not included with your theme, pluck will try to convert your style.css itself.

This isn't very difficult: every theme needs a CSS-file. It's important that the name of the file is style.css, because the file will be included in the HTML-code automatically. It's not necessary to include the file yourself.

Pluck has some uses a few style-objects to theme some objects. You can use the following objects in your css-file if you wish to enhance your theme further:

.album : for the divs in which the various albums or the images in plucks' album feature are shown
.blogpost: for the div in which a blogpost is shown
.posttitle: for the span element which contains the title of a blogpost
.postinfo: for the span element which contains some info about a blogpost

theme.php

In this php-file you specify some important information about your theme. The following two variables need to be included:

$themedir - the name of the directory in which your theme is situated, for example blue
$themename - the name of your theme, this can include capital letters and spaces, for example Nice Blue Theme

The overall code of theme.php should look something like this:

<?php
$themedir = "blue";
$themename = "Nice Blue Theme";
?>

index.php

This is the most important, but also the most difficult part. In index.php, you specify all the (X)HTML elements that need to be included in the page.

Predefined variables

You've access to some important predefined variables:

$sitetitle - this displays the title of the website
$title - this displays the title of the page
$content - this displays the contents of the page

This is all you should need. Now let's start!

First, you have to include the file ../predefined_variables.php. Do this like this:

include("data/inc/themes/predefined_variables.php");

HTML variables

In index.php you have to specify the following variables: Note: you have to add a slash before every dubble-quote, otherwise you'll get php-errors. So, " becomes \".

$html_doctype

Here you specify the doctype of the page. For example:

$html_doctype = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">";

$html_start

Here you have to specify the first tag: the html-tag. For example:

$html_start = "<html xmlns=\"http://www.w3.org/1999/xhtml\">";

$html_in_head

You don't have to fill in this variable, but may become handy if you want to add something inside the head-tags. For example:

$html_in_head = "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />";

note: please use the UTF-8 charset for every pluck-theme you make. This way all special characters will be shown right. You can use the above code to do this.

$html_menu_start

Here you can add all the html-tags and information before the menu starts. This can be something like this:

$html_menu_start = "<div class=\"wrap\"><div class=\"header\">$sitetitle</div><div class=\"menu\">";

note the usage of the $sitetitle variable here

$html_menuitem_start

Here you can define with what html-code every menu-item has to start. Link to ?file=$file. For example:

$html_menuitem_start = "<li><a href=\"?file=$file\">";

$html_menuitem_end

Here you can define with what html-code every menu-item has to end. For example:

$html_menuitem_end = "</a></li>";

$html_menu_end

Here you define the html-code which ends the menu:

$html_menu_end = "</div>";

$html_title

Here you define the code for the title of the page, and you can often use it to open a "content-div" or something like that. Example:

$html_title = "<div class=\"content\"><h1>$title</h1><div class=\"txt\">";

note the usage of the $title variable here

$html_content

Here you define the code for the contents of the page, example:

$html_content = "$content";

note the usage of the $content variable here

Note: you shouldn't use any markup elements here if you don't really need to. Please insert div elements and such in the $html_title and the $html_footer elements, as shown on this page. This way you can make sure all inserted elements like emailforms and albums show up the way they should.

$html_footer

Here you can add all the remaining html-code, to end the html-elements etc. Example:

$html_footer = "</div></div>
               <div class=\"footer\">theme made by <a href=\"#\">me</a></div>
               </div>
               </body>
               </html>

result

This is the html-code pluck generates if we follow the codes above (assumed we have 3 pages: "Home", "About" and "Contact, and we're currently looking at the page "Home", and the title of the site is "Blue"):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home - Blue</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<div class="wrap"><div class="header">Blue</div>
<div class="menu">
    <li><a href="?file=$file">Home</a></li>
    <li><a href="?file=$file">About</a></li>
    <li><a href="?file=$file">Contact</a></li>
</div> 

<div class="content"><h1>Home</h1>
<div class="txt">These are the contents of the page</div></div> 

<div class="footer">theme made by <a href="#">me</a></div>
</div>
</body>
</html>

dev/theming/create.txt · Last modified: 2008/11/09 11:58 by sander