Menu Personnalise

Artisteer est une marque dpose dExtensoft Artisteer.com Forum dentraide http://forum.artisteerhelp.fr Jf Patris 2010 1

TEMPLATE JOOMLA

Couleurs des Items menu personnalises Mise jour du 14 Nov 2010 La version dArtisteer voque dans ce manuel est la 2.4 . Je travaille sous Mac Snow lopard, et avec Parallel Desktop pour Window (il faut bien juste pour les tests) et jutilise les deux versions dArtisteer.

Ce tuto concerne les modules main menu de Joomla!TM utiliss avec un template ArtisteerTM en position user3. Pour Word Press, ce doit tre la mme chose. Pour les templates html, le principe est le mme, donnez une classe aux menus.

Le forum artisteerhelp http://forum.artisteerhelp.fr est votre disposition pour toutes les questions dintgration (parfois pas trop simples, car on en veut toujours plus) de vos uvres. Vous pouvez utiliser la bonne volont de ladministrateur pour que lon remonte vos suggestions et problmes vers Extensoft. Ce forum est l pour vous aider, que vous soyez sous Window, Mac et que vous travailliez avec Joomla, Wordpress, Visual Studio, Blogger, Dupral, en HTML ou PHP, avec des tutoriaux sympas, trucs et astuces, ou tout simplement autres discussions Je vous souhaite beaucoup de plaisir avec Artisteer Jeff


Prambule Aprs mtre arrach les cheveux dans les scripts des templates, jen suis venu la conclusion que modifier des scripts quand on ne les a pas fait soi-mme demande trop de temps. ( la logique du programmeur nest pas facile cerner...) . Donc, en avant pour le CSS, jy suis plus laise (et cela prend moins de temps !)

Gestion des items de menu Joomla!TM Pour faire court, Joomla!TM utilise comme rfrence les items de menu (ID) crs dans votre administration et qui correspondent, dans votre gestionnaire de menu, lID du lien (tout droite). Votre menu tant cr, prenez un papier et un crayon de bois, une gomme, et de votre plus belle pointe remplissez le tableau suivant (cela vous obligera savoir ce que vous voulez) :

Menu ID Couleur Repos Couleur Actif Couleur Survol Item 1 1 Bleu Blanc Rouge Item 2 15 Jaune Blanc Rouge Item 3 5 Vert Blanc Rouge Noubliez pas : une charte des liens existe : pour que linternaute sy retrouve, les couleurs survol et actif devraient tre les mmes sur les items. Mais bon, les gots et les couleurs.

Gestion CSS dArtisteertm Image : cest un sprite gnr automatiquement en fonction des couleurs dclares (menuitem.png), trois parties dimages donc, la 1 pour repos, la 2 survol, la 3 actif


Image affiche : en css avec la proprit top. Pour cette image de 78px, ce sera: au repos: 0, en survol : -26px et actif : -52px Code CSS gnr par votre programme: Affichage image .art-menu a .r, .art-menu a .l { position: absolute; display: block; top: 0; z-index: -1; height: 78px; background-image: url('../images/menuitem.png'); } Proprits active et survol : .art-menu a:hover .l, .art-menu a:hover .r { top: -26px; } .art-menu a.active .l, .art-menu a.active .r { top: -52px; }


Prparer vos lments Nous allons utiliser artisteer pour le faire. Cest plus facile. A partir de votre template (que vous avez sauv bien sr !!!), modifiez vos items de menu comme vous lavez dclar dans votre tableau (couleurs) Choisissez bien un style de menu qui vous permet davoir, dans Elmntremplir, les items repos actif survol non griss. Une fois fait, sauvez (artx) votre template sous le nom montemplateItemX Exportez-le sous forme de dossier avec le mme nom. Rptez ces actions autant de fois que vous avez ditems de menu (en changeant les couleurs, hein). Allez dans chaque dossier images des templates gnres, changez le nom de limage menuitem.png en menuitemX.png (X tant le n ditem du menu concern, correspondant, si vous ne vous tes pas tromp, au nom du dossier) Copiez ces images dans le dossier images de votre template origine. Vous devez donc avoir dans ce dossier autant de menuitemX.png de ditem de menu.

Modifier le code CSS Ouvrez le fichier template.css de votre template Recherchez les codes suivants, l ou est dclare votre image de menu, en notant les diffrentes proprits: le but est de les remettre dans notre code perso: .art-menu a .r, .art-menu a .l { position: absolute; display: block; top: 0; z-index: -1; height: 78px; background-image: url('../images/menuitem.png'); } et aussi un peu plus bas: .art-menu a.active .l, .art-menu a.active .r { top: -52px; }


et aussi : .art-menu a:hover .l, .art-menu a:hover .r { top: -26px; } Insrez le code suivant en remplaant X par le n ditem de votre menu et en mettant les mmes proprits que loriginal (attention aux . et espaces obligatoires, faites des copier-coller pour viter les erreurs) : /*ajout couleurs diffrentes aux items de menu*/ /*Item de menu x*/ .art-menu li.itemX a .r, .art-menu li.itemX a .l { position: absolute; display: block; top: 0; z-index: -1; height: 78px; background-image: url('../images/menuitemX.png'); } .art-menu li.itemX a.active .l, .art-menu li.itemX a.active .r { top: -52px; } .art-menu li.itemX a:hover .l, .art-menu li.itemX a:hover .r { top: -26px; } /* fin dItem de menu X*/ . Les autres items. /* fin couleurs de menu*/


Exemple: Code modifi: /*Item de menu 15*/ .art-menu li.item15 a .r, .art-menu li.item15 a .l { position: absolute; display: block; top: 0; z-index: -1; height: 78px; background-image: url('../images/menuitem15.png'); } .art-menu li.item15 a.active .l, .art-menu li.item15 a.active .r { top: -52px; } .art-menu li.item15 a:hover .l, .art-menu li.item15 a:hover .r { top: -26px; } /* Fin Item de menu 15*/ Nous avons gonfl un peu le fichier css, mais quelques petits octets de plus ne nuirons pas. Voili,voil, bon amusement. Mef quand mme aux couleurs : plthore de couleurs nuit. Pensez laccessibilit, la facilit de navigation Bonne journe.

Jeff

Menu Personnalise

Documents

Transcript of Menu Personnalise