MadeYourWeb · 2009. 4. 18. · Tutoriel Modification templates MadeYourWeb Description du tutoriel Solutions de modification du template MadeYourWeb Le template Made Your Web est

Tutoriel Modification templates MadeYourWeb

Description du tutoriel Solutions de modification du template MadeYourWeb

Le template Made Your Web est certainement, graphiquement le plus simple du pack Joomla!. Il est donc aussi celui qui est le plus facilement modifiable par la plupart des utilisateurs, mais il a cependant ses limites et c’est surtout graphiquement que vous pourrez personnaliser votre template. A noter qu’il existe aussi une extension pour ce template qui permet d’avoir 3 versions de couleurs différentes (vert, rouge et bleue).

SOMMAIRE

1. Adapter la largeur du template en 1024 px . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2. Mettre le header sur toute la largeur en supprimant la banniére . . . . . . . . . . . . . . . . . . . . . 3

3. Augmenter la hauteur du bandeau du header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

4. Mettre une image sur toute la largeur du header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

5. Changer la couleur des onglets du menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

6. Changer la couleur de fond des modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

© Joomlafacile.com - Contribution de Gaia le 20/05/2006 Page 1 sur 15



1. Adapter la largeur du template en 1024 px

Pour une fois qu un template a été prévu en 2 tailles différentes, il serait dommage de s en priver ! Tout est déjà prévu dans le CSS. Dans l'index.php de votre template il faut simplement changer tous les sélecteurs contenant la valeur 800 par 1024 .

ligne 37

<div id="pagewidth-1024" >

ligne 71

<div id="outer-1024" >

ligne 86

<div id="maincol-broad-1024" >

ligne 90

<div id="maincol-wide-1024" >

ligne 127

<div id="footer-1024" >

Sauvez, réactualisez la page et votre site est en 1024.



2. Mettre le header sur toute la largeur en supprimant la bannière

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 61 à 69

<?php if (mosCountModules( "banner" )) {,

?><div id="banner">

<?php mosLoadModules ( 'banner',-1); ?> </div> <?php

} ?>

et modifier les valeurs de hauteur et largeur de l image à la ligne 58

<?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.jpg" border="0" width="755" height="75" alt="logo" />'; ?>

Dans le template_css.css à la ligne 66, remplacez

#top‐bottom { height: 80px; width: 200px; background: transparent; float: left; }

par

#top‐bottom { height: 75px; width: 755px; float: right; margin-right: 2px; }



3. Augmenter la hauteur du bandeau du header

Dans le template_css.css à la ligne 56, changez la dimension en pixel

#header { height: 116px; width: 100%; }

A l aide de votre logiciel graphique préféré, ouvrez l image back_verlauf.jpg qui se trouve dans le dossier images de votre template.

Redimensionnez l image en hauteur selon la valeur que vous avez choisie précédement + 13px (pour le débord sous le cadre blanc du main).

Enregistrez votre image, réactualisez l affichage de votre explorateur et c est fait.



4. Mettre une image sur toute la largeur du header

Pour réaliser cette opération, il faut au préalable avoir suivi les directives du chapitre 2

Dans l'index.php de votre template, remplacez la ligne 58

<?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.gif" border="0" width="250" height="80" alt="logo" />'; ?>

par

<?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.jpg" border="0" width="755" height="75" alt="logo" />'; ?>

Dans le template_css.css à la ligne 66, remplacez

#top‐bottom { height: 80px; width: 200px; background: transparent; float: left; }

par

#top‐bottom { height: 75px; width: 755px; float: right; margin-right: 2px; }

Vous créez votre image avec votre logiciel préféré, avec une dimension de 755 x 75 px (plus si vous avez modifié la largeur du template ou la hauteur du bandeau aux chapitres précédents) que vous enregistrez sous le nom logo.jpg dans le dossier images de votre template.



5. Changer la couleur des onglets du menu horizontal

Je vous propose pour ce faire d utiliser un logiciel shareware, PhotoFiltres, que vous pouvez télécharger à cette adresse www.photofiltre.com, sachant qu il existe d autres logiciels gratuits du même type (The Gimp, ...).

Le menu horizontal est composé de 2 images, déclinées en 2 gammes de couleur pour l effet hover, donc 4 fichiers qui se trouvent dans le dossier images de votre template :

headmenu_left.gif headmenu_right.gif headmenu_left_hover.gif headmenu_right_hover.gif

Ouvrez les fichiers mais avant de faire les changements de couleurs, il faudra faire ces 2 manips sur les 4 fichiers pour avoir accès aux réglages des couleurs

1. Menu IMAGE --> COULEUR DE TRANSPARENCE, vous cochez "Désactiver la transparence" puis OK 2. Menu IMAGE --> MODE --> COULEURS RVB,

Maintenant on peut modifier l image.



Menu REGLAGES ‐‐> BALANCE DES COULEURS

Modifiez la balance des couleurs jusqu à obtenir la couleur désirée en prennant bien soin de noter les valeurs afin de les reporter sur l autre image.

Sauvez, effectuez les mêmes modifications sur le headmenu_left.gif, puis avec une couleur différente sur les 2 images qui composent le bouton hover et vous avez fini.



6. Changer la couleur de fond des modules Il y a 2 sortes de modules distincts : le normal à gauche et le wide (large) à droite. Chaque module est composé de 3 images : top, middle, bottom.

Il faut donc modifier les 3 images qui correspondent au module souhaité :

Module de gauche module_top.jpg (152 x 8px) module_middle.jpg (152 x 3px) module_bottom.jpg (152 x 12px)

Module de droite module_top_wide.jpg (178 x 8px) module_middle_wide.jpg (178 x 3px) module_bottom_wide.jpg (178 x 12px)

Avec PhotoFiltre, on va donc fabriquer une image de 152 x 50px ou 178 x 50px selon le menu (hauteur de 50px déterminée pour des raisons de confort de travail)



Menu FICHIER ‐‐> NOUVEAU

A l aide de l outil coins arrondis , tracez un rectangle plein format, vous pouvez vous aider des flèches de réglage pour ajuster votre tracé.

outil coins arrondis

flèches de réglage



Avec l outil dégradé , vous allez déterminez les 2 couleurs de votre dégradé en cliquant sur la zone de couleur. Veillez à conserver des couleurs claire pour que le contenu des modules reste lisible.

Sélectionnez votre couleur, OK, puis faites de même pour la seconde couleur.

outil dégradé



Voila le résultat, on a utilisé un dégradé comme dans le template original, mais vous pouvez tout aussi bien le faire d une couleur uni, la suite du processus reste le même.

Sélectionnez l outil rectangle et tracez une zone de 152 x 8 px, collée au bord supérieur de l image.

Vous pouvez visualiser la dimension de votre sélection dans la barre inférieure de la fénêtre du programme

Une fois votre sélection en place, COPIEZ.

outil rectangle



Menu FICHIER ‐‐> NOUVEAU Créez un nouveau document de 152 x 8 px

COLLEZ, puis enregistrez le document dans le dossier images de votre template sous le nom module_top.jpg



Retournez sur l image complète et tracez une zone de 152 x 3 px, au milieu de l image.

Même procédure que précédement, COPIEZ, NOUVEAU DOCUMENT de 152 x 3 px, COLLEZ et enregistrez le document sous le nom module_middle.jpg

Retournez sur l image complète et tracez une zone de 152 x 12 px, collée au bord inférieur de l image.



Même procédure que précédement, COPIEZ, NOUVEAU DOCUMENT de 152 x 12 px, COLLEZ et enregistrez le document sous le nom module_bottom.jpg

Faites de même avec le fond des modules de droite en adaptant au format différent

Il faut maintenant modifier des propriétés dans le CSS afin d’harmoniser le menu avec le fond

Dans le template_css.css :

Pour changer la couleur des barres verticales à droite du bouton, à la ligne 402, remplacez la couleur

a.mainlevel { font-size: 10px; padding-left: 4px; width: 143px; display: block; line-height: 26px; margin-bottom: 2px; text-decoration: none; font-weight: normal; border-right: 4px solid #votre_couleur; /* la couleur de la barre droite du menu*/ voice-family:"\"}\""; /* Box Model fix */ voice-family:inherit; width: 135px;

}



Dans le template_css.css :

Pour changer la couleur du bouton actif et hover, à la ligne 422, remplacez la couleur

a.mainlevel:hover, a.mainlevel#active_menu { background: #votre_couleur; /*la couleur du bouton actif*/ text-decoration: none; }

Dans le css_color_green.css :

Pour changer la couleur de la barre droite du menu actif, à la ligne 59, remplacez la couleur

a.mainlevel:hover, a.mainlevel#active_menu { border-right: 4px solid #votre_couleur; /* la couleur de la barre droite du menu actif*/ }

Ca y est, vous avez fini, vous pouvez allez voir le résultat !

Documents

MadeYourWeb · 2009. 4. 18. · Tutoriel Modification templates MadeYourWeb Description du tutoriel Solutions de modification du template MadeYourWeb Le template Made Your Web est