Joomla 1.5 teeman luonti

Kansiorakenne:

(teeman_nimi)/
(teeman_nimi)/css
(teeman_nimi)/images

Tiedostot:

(teeman_nimi)/templateDetails.xml
(teeman_nimi)/index.php
(teeman_nimi)/template_thumbnail.png
(teeman_nimi)/css/style.css
(teeman_nimi)/images/(kuva.pääte)

templateDetails.xml tiedosto:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">

<install version="1.5" type="template">
<name>Testiteema</name>
<creationDate>9.2.2009</creationDate>
<author>Iivo Raitahila</author>
<authorEmail>iivo@raita.sytes.net</authorEmail>
<authorUrl>http://raita.sytes.net</authorUrl>
<copyright>Iivo 2009</copyright>
<license>(c)</license>
<version>1.0</version>
<description>Testiteema</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/kuva.png</filename>
<filename>css/style.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>

index.php tiedosto:

Yläosa:

<?php defined( '_JEXEC' ) or die( 'Ei pääse!' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

head-elementti yksinkertaisimmillaan:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/testiteema/css/style.css" type="text/css" />
</head>

body-elementti yksinkertaisimmillaan:

<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>

Style.css:

Float (kellua tietyssä paikassa)

Tungetaan float-attribuutit ja hajurako CSS-tiedostoon:

<style type="text/css">
#wrap {width:1000px;}
#header {}
#sidebar {float:left;width:13%;}
#content {float:left;width:650px;}
#sidebar-2 {float:left;width:15%;}
#footer {clear:both;}

.hajurako {padding: 10px;}
</style>

Eli nyt sivun eri osat ovat tuon kokoisia ja kama on osan vasemmalla puolella.
Luvuissa voi käyttää sekä prosentti- että pikseli-arvoja.

Sitten laitetaan eri osat (body-elementissä) paikoilleen:

<div id="wrap">

<div id="header">
Yläpalkki
</div>

<div id="sidebar" class="hajurako">
<jdoc:include type="modules" name="left" />
</div>

<div id="content" class="hajurako">
<jdoc:include type="modules" name="top" /> <jdoc:include type="component" />
</div>

<div id="sidebar-2" class="hajurako">
<jdoc:include type="modules" name="right" />
</div>

<div id="footer">
<jdoc:include type="modules" name="bottom" />
</div>

</div>

Tuo on siis body-elementin sisältö.
Wrap tarkoittaa koko sivua, joka alkaa alusta ja viimeinen </div> lopettaa sen


Käteviä juttuja:

Sivu keskelle: CSSän #wrap-elementtiin laitetaan: margin:0 auto;