To create a theme, you need to create a new folder within your site's
site\themes directory.
Within this directory you'll need to create the following:
info.php - A file that contains information about your theme.
style.css - A stylesheet for your theme. You can have as many style sheets as you want and can name they anything.
header.tmpl.php - A template for the header for your site
footer.tmpl.php - A template for the footer for your site
layouts/ - A folder that will contain all the available layouts for your site (2 Columns, 3 Columns, etc.)
borders/ - A folder that will contain all the borders available for parts
images/ - A folder for all your theme's images
I'll cover the details on these files in folders below. The key one is the info.php file. Once you create an info.php file, your theme will be detected and show up in your site's Control Panel.
The Info.php file contains basic information about your theme. This file is used by TextSide to install your theme points it to the style sheets that you are using.
A info.php file will look like this:
<?php
// The name of the theme as it should appear in the control panel
$name = "Sample Theme";
// A description to go along with the name
$description = "A sample theme for the TextSide Documentation";
// Who created the theme
$createdby = "Scott Bailey";
// An array of stylesheet files that will be used by this theme.
$css = array("style.css");
?>
Your Style.css file will contain all of the stylesheet information for your theme. Note that you can name your style sheet file anything that you would like, or spread your css between multiple files - as long as you point to them all within your info.php file.
Your CSS files will provide information for both the borders and layouts for your theme, as well as any other custom styles that you would like. The contents ofthese files will be covered in more detail in the
Theme CSS Section
The Header and Footer template files let you define both header and footer content for your site. These templates will be rendered and passed to the current layout under the variable $header and $footer. (See
Layouts for more information[/url])
Both of these templates can point to your themes resources by using the $theme template variable. For example:
Header.tmpl.php
----------------------
<div id="header">
<img src="<?=$theme->getAbsDirectory()?>images/header/title.gif">
</div>
This would display the image title.gif in your themes images/header directory.
The footer template also has two special template variables available:
$processTime - How many seconds the current page took to render
$queryCount - The number of MySQL queries processed while creating the page
The layouts folder contains all the different layout templates for your site. These are templates that define how content should be organized within a page. For example, your site may have a 2 Column layout, a 3 Column layout, and a single Column layout. Any page within your site can select any of your available layouts from within it's Page Settings.
For more information on layouts, including how to create them, please see the
Layouts Section.
Borders are small, mini templates that create different borders around virtual parts on your pages. In effect, they style any parts placed on your page, allowing you to give parts a distinct look and feel. Any borders that you create here are available from within the parts 'edit' link while in Edit Page mode.
For more information on borders, including how to create them, please see the
Borders Section.
The images folder contains all images for your theme.
These images can be reached from any of your templates by using the
$theme template variable. For example:
<img src="<?=$theme->getAbsDirectory()?>images/MyImage.gif">
Your images can also be accessed within your style sheets by using the
$directory variable. For example:
#MyDiv {
background: transparent url(<?=$directory?>images/MyImage.gif);
}
For more information on style sheets, please see the
CSS Section.
Your images folder can also contain a preview image for your theme. This preview image is a thumbnail that will be placed next to your themes name within the control panel. For more information, please see the
Preview Section.
Ussually the best place to start when creating a new theme is with the
Layouts. Usually when working on your layouts you will also be dealing quite a bit with your
CSS Files to style them.
Loading...