Tutoriel Modification templates Rhuk_solarflare_ii

Transcription

1 Description du tutoriel Solutions de modification du template Rhuk_solarflare est le template par défaut du pack Joomla!. C est donc le plus utilisé et par conséquence le plus vu, mais il existe des milliers d autres templates plus originaux et plus facilement modifiables qui vous permettrons de ne pas ressembler aux autres sites. Malgré tout, voici quelques astuces pour essayer de personnaliser votre template. SOMMAIRE 1. Modifier l image du header Remplacer l image.jpg du header par une animation flash Mettre son template sur une largeur de 960px Supprimer la bannière et l'image "powered by Joomla" Modifier la couleur des boutons du menu Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 1 sur 9

2 1. Modifier l image du header L image de votre header s appelle header_short.jpg et elle se trouve dans le dossier images de votre template. Son format est de 635 x 135 px, il va donc falloir créer votre image perso à la même taille. 635 px 150 px Une fois votre image terminée, vous l enregistrez sous le nom header_short.jpg dans le dossier images de votre template et vous remplacez l ancienne image par celle-ci. Réactualisez l affichage de votre navigateur, votre logo est en place! Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 2 sur 9

3 2. Remplacer l image.jpg du header par une animation flash A. Créez votre logo en Flash en conservant la taille d'origine du header c'est à dire 635 x 150 px, nommer le fichier "logo.swf". B. Dans le fichier template_css.css supprimez la ligne 138 : background: url(../images/header_short.jpg) no-repeat; C. Dans le fichier index.php, remplacez les lignes 65 à 67 : <div id="header"> </div> par ces lignes là : <div id="header"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" swflash.cab#version=6,0,29,0" width="635" height="150"> <param name="movie" value="templates/rhuk_solarflare_ii/images/logo.swf" /> <param name="quality" value="high" /> <param name="loop" value="false" /> <embed src="templates/rhuk_solarflare_ii/images/logo.swf" width="635" height="150" loop="false" quality="high" pluginspage=" type="application/ x-shockwave-flash"> </embed> </object> </div> D. N oubliez pas de nommer le fichier flash "logo.swf" et de le placer dans le dossier images du template. Note : Si l'on veut que l'animation tourne en boucle il faut remplacer : <param name="loop" value="false" /> par : <param name="loop" value="true" /> ainsi que : width="635" height="150" loop="false" quality="high" par : width="635" height="150" loop="true" quality="high" Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 3 sur 9

4 3. Mettre son template sur une largeur de 960px A. Dans le fichier index.php à la ligne 48, changez la largeur <table border="0" cellpadding="0" cellspacing="0" width="960"> B. On va aussi changer la largeur de la partie centrale dans le fichier template_css.css en ajoutant 152px à certains width (152 px = 960px - 808px de la taille d origine du template). ligne 22 : #buttons_outer { width: 787px; /* (635px + 152px) */ margin-bottom: 2px; margin-right: 2px; float: left; } ligne 131 : #header { float: left; padding: 0px; margin-right: 2px; width: 787px; /* (635px + 152px */ height: 150px; background: url(../images/header_short.jpg) no-repeat; } ligne 168 : #content_outer { padding: 0px; margin-top: 0px; margin-left: 2px; /** border: 1px solid #cccccc; **/ float: left; width: 787px; /* (635px + 152px) */ } C. Il faut maintenant modifier la taille de l image de votre header en créant une image mesurant 787 x 150 px (cf page 2 pour la mise en place de l image). Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 4 sur 9

5 4. Supprimer la bannière et l image Powered by Joomla Si vous ne comptez pas utiliser le module banner dans votre template, il vous suffit de le dépublier dans l administration, menu MODULES --> MODULES DU SITE. Par contre si vous avez l intention de l utiliser ailleurs, il faut supprimer dans le fichier index.php, les lignes 93 à 103 <tr> <td> <div id="banner_inner"> <img src="<?php echo $mosconfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement.png" alt="advertisement.png, 0 kb" title="advertisement" border="0" height="8" width="468"/><br /> <?php mosloadmodules( 'banner', -1 );?><br /> </div> <div id="poweredby_inner"> <img src="<?php echo $mosconfig_live_site;?>/templates/rhuk_solarflare_ii/images/powered_by.png" alt="powered_by.png, 1 kb" title="powered_by" border="0" height="68" width="165"/><br /> </div> </td> </tr> Vous sauvez et c'est fini, la bannière et l'image "powered by Joomla" n'apparaissent plus. Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 5 sur 9

6 5. Modifier la couleur des boutons du menu avec PhotoFiltres Les boutons avec effet hover de votre menu se présentent comme ceci : On va modifier les 2 couleurs séparement en utilisant pour l exemple un logiciel shareware, Photofiltres, que vous pouvez télécharger à cette adresse sachant qu il existe d autres logiciels gratuits du même type (The Gimp,...). Une fois installé, ouvrez le fichier menu_bg.png qui se trouve dans le dossier images du template Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 6 sur 9

7 A l aide de la roulette de la souris ou des outils loupe, agrandissez l image pour pouvoir sélectionner les zones à modifier avec précision. Avec le curseur, tracez un rectangle à la dimension du bouton haut. Vous pouvez ajuster votre sélection à l aide des flèches qui apparaissent au survol du contour de celle ci. Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 7 sur 9

8 Une fois votre sélection faite, vous allez modifier la balance des couleurs afin d obtenir la couleur désirée. Dans le menu REGLAGE, sélectionnez BALANCE DES COULEURS. A l aide des curseurs, modifiez les couleurs à votre convenance, puis OK. Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 8 sur 9

9 Réalisez la même opération pour modifier la partie basse du bouton, puis ENREGISTRER. Ca y est, vous avez des boutons tout neufs! Ca y est, vous avez fini, vous pouvez allez voir le résultat! Joomlafacile.com - Contribution de Gaia le 10/05/2006 Page 9 sur 9