Template joomla

Leblanc 2011

Beez

Joomla
CMS
Dossier parent
Sous dossiers Fichiers php Fichiers txt .htaccess

Template joomla
Templates par dfaut
Beez JaPurity

Template:

Modifier un template
Fichier icne de 16x16 pixels

Modifier un template
Template-thumbnail.png

Modifier un template
templateDetails.xml

templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/templateinstall.dtd"> <install version="1.5" type="template"> <name>c2i</name> <creationDate>08/12/2009</creationDate> <author>Marie PERES</author> <authorEmail>marie.peres@gmail.com</authorEmail> <authorUrl>http://marieperes.free.fr</authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>template pour les cours de C2i</description>

Beez : Le logo du site

1. Crer limage (illustrator) 2. Enregister limage souslogo.gif 3. Dans le dossier /images 4. Dans index.php
dimensions echo JText du logo

Beez : Index.php
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this>template;?>/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Infotext'); ?>" width="300" height="97" />

Beez : entte
breadcrumbs par dfaut
affiche You are here

Modifier index.php
<div id="breadcrumbs"> <p> <?php echo JText::_('You are here'); ?> <jdoc:include type="modules" name="breadcrumb" /> </p> </div> <div class="wrap">&nbsp;</div>

Beez : ligne grise sous lentte

css/positions.css
#header { /*background: #fff;*/ color: #000000; margin: 0; position: relative; text-align: right; border-bottom: solid 4px #ccc; }

Beez : ligne blanche de 1px

index.php
code crant un contenu invisible pour W3C

Beez : ligne blanche de 1px

<!-<ul> <li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li> <li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li> <li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li> </ul> <h2 class="unseen"> <?php echo JText::_('Search, View and Navigation'); ?> </h2> -->

Beez : Joomla Accessible Template

Indication Joomla Accessible Template ligne en dessous
Modifier index.php
<span class="header1"><?php echo JText::_('Joomla Accessible Template'); ?></span>

Beez : powered by Joomla

Dans index.php
<?php echo JText::_('Powered by');?> <a href="http://www.joomla.org/">Joomla!</a>

Dans position.css
Modifier les lignes de dcoration
#main #main2 /*background: #fff;*/

Beez : Modifier limage de fond

1. Dcouper
Entte Corps (1px de haut) Pied 1000px de large

2. Enregistrer dans le dossier images 3. Modifier les CSS

Image de Corps
Dans template.css
ajouter en dbut de fichier
#contentarea{ background: url(../images/nomdelimagedefond) no-repeat; min-height:40em; }

Image dentte
Dans layout.css
modifier
/* ########### header content ############# */ #header h1 { font-size:1.5em; font-weight:normal; text-transform:uppercase; /*arrire plan gris*/ background: url(../images/fond_gris.png) no-repeat; height:180px; }

Image de pied
Dans layout.css
modifier
#footer { /*background:#a30000;*/ color:#fff; padding:5px; text-align:right; border-top:solid 4px #ccc; background: url(../images/fond_gris.png) no-repeat; height:67px; }

Beez : arrire plan de la page

position.css
Modifier les proprits de body Police Couleur darrire plan
background: #ffffff; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; }

body {

Menu de changement de taille des polices du site

index.php
modifier laffichage du menu Infos bulles Texte affich

Dans le dossier images

Apparence des boutons loupe Normal, survol, activ

Menu de changement de taille des polices du site

Infos bulles

Menu de changement de taille des polices du site

Layout.css
modifier les caractristiques daffichage du menu
#fontsize { z-index:100; position:absolute; top:5em; right:1em; /*background:#fff;*/ color:#000; }

Rendre les fonds de titre transparent

layout.css
#main .leading h2,#main2 .leading h2 { /*background:#EFDEEA;*/ border-bottom:solid 0 #333; color:#a30000; font-family:trebuchet MS, sans-serif; font-size:1.4em; font-weight:normal; margin:0 0 10px; text-transform:uppercase; }

Arrire plan du menu de gauche

layout.css
#left {
/*background: #FFFFFF;*/ border-right: solid 0px #EEEEEE; float: left; margin: 20px 0 0 0; width: 21%; }

Encart dinfo des articles

layout.css
#main .leading .small,#main .leading .modifydate,#main2 .leading .small,#main2 .leading .modifydate { /*background:#EFDEEA;*/ color:#a30000; }

Div principale
layout.css
#all {
background: #1c171d; /*border: solid 1px #DBB0CD;*/ color: #000000; font-size: 0.8em; margin: 0 auto; max-width: 1000px; padding: 0 3px 3px 3px; text-align: left; }

Espace dadministration de joomla

Dossier administrator

Modifier le template par dfaut