Template joomla Leblanc 2011.

Présentation au sujet: "Template joomla Leblanc 2011."— Transcription de la présentation:

1 Template joomla Leblanc 2011

2 Beez

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

4 Template joomla Templates par défaut Beez JaPurity … Template:

5 Modifier un template Fichier icône de 16x16 pixels

6 Modifier un template Template-thumbnail.png

7 Modifier un template templateDetails.xml

8 templateDetails.xml <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" " <install version="1.5" type="template"> <name>c2i</name> <creationDate>08/12/2009</creationDate> <author>Marie PERES</author> <authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>template pour les cours de C2i</description>

9 Beez : Le logo du site Créer l’image (illustrator…)
Enregister l’image sous…logo.gif Dans le dossier /images Dans index.php dimensions « echo JText» du logo

10 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" />

11 Beez : entête breadcrumbs par défaut Modifier index.php
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"> </div>

12 Beez : ligne grise sous l’entête
css/positions.css #header { /*background: #fff;*/ color: #000000; margin: 0; position: relative; text-align: right; border-bottom: solid 4px #ccc; }

13 Beez : ligne blanche de 1px
index.php code créant un contenu invisible pour W3C

14 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> -->

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

16 Beez : powered by Joomla
Dans index.php <?php echo JText::_('Powered by');?> <a href=" Dans position.css Modifier les lignes de décoration #main #main2 /*background: #fff;*/

17 Beez : Modifier l’image de fond
Découper Entête Corps (1px de haut) Pied 1000px de large Enregistrer dans le dossier images Modifier les CSS

18 Image de Corps Dans template.css ajouter en début de fichier
#contentarea{ background: url(../images/nomdel’imagedefond) no-repeat; min-height:40em; }

19 Image d’entête Dans layout.css modifier
/* ########### header content ############# */ #header h1 { font-size:1.5em; font-weight:normal; text-transform:uppercase; /*arrière plan gris*/ background: url(../images/fond_gris.png) no-repeat; height:180px; }

20 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; }

21 Beez : arrière plan de la page
position.css Modifier les propriétés de « body » Police Couleur d’arrière plan body { background: #ffffff; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; }

22 Menu de changement de taille des polices du site
index.php modifier l’affichage du menu Infos bulles Texte affiché Dans le dossier images Apparence des boutons loupe Normal, survol, activé…

23 Menu de changement de taille des polices du site
« Infos bulles »

24 Menu de changement de taille des polices du site
Layout.css modifier les caractéristiques d’affichage du menu #fontsize { z-index:100; position:absolute; top:5em; right:1em; /*background:#fff;*/ color:#000; }

25 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; }

26 Arrière plan du menu de gauche
layout.css #left { /*background: #FFFFFF;*/ border-right: solid 0px #EEEEEE; float: left; margin: 20px 0 0 0; width: 21%; }

27 Encart d’info des articles
layout.css #main .leading .small,#main .leading .modifydate,#main2 .leading .small,#main2 .leading .modifydate { /*background:#EFDEEA;*/ color:#a30000; }

28 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; }

29 Espace d’administration de joomla
Dossier administrator

30 Modifier le template par défaut