Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

#1 18/02/2007 12:30:04

Vektrox
Membre
Lieu : Contres (41)
Inscription : 08/02/2007
Messages : 108

Menu

Salut

Toujours les mains dans le cambouis, j'ai découvert quelques sites fonctionnant sous ZITE et deux on retenu mon attention a proppos de leurs menu.

Voici ce que j'aimerais obtenir (approximativement)

menu1.png
menu2.png

les 2 sites en question sont ceux-ci

Chablair.ch et bejian.fr

un petit topo serait le bienvenue svp sad

Dernière modification par Vektrox (18/02/2007 12:33:00)

Hors ligne

#2 18/02/2007 13:28:58

Renaud
Membre
Inscription : 30/01/2007
Messages : 306

Re : Menu

Dans le premier cas, l'auteur semble avoir fait son menu "en dur" dans le template, avec ses propres styles, et n'utilise pas le menu "automatique" arborescent de zite.

Dans le second cas, par contre, il s'agit d'une personalisation de la feuille de style. En jouant sur style.css il est possible de faire a peu près ce que l'on veut de son menu. Le code à modifier est le suivant :

/* Menu */
.zul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
	background-image: url(deco/pge0.png);
	background-repeat: no-repeat;
	padding-left: 14px;
}
.zon {
	background-image: url(deco/pge1.png);
}
.zli1 {
	margin-left: 0px;
}
.zli2 {
	margin-left: 16px;
}
.zli3 {
	margin-left: 32px;
}
.zli4 {
	margin-left: 48px;
}

ici, on définit une image commune pour le fond de tous les items du menu (l'image pge0.png du reertoire deco) dans la règle .zli1,.zli2,.zli3,.zli4, puis pour chaque classe .zli 1 à 4 on se contente de faire un décalage. Il est possible de définir une image de fond propre à chacun des niveaux de menu, en éditant la définition de la classe correspondante.

.zul : la classe de la liste qui contient les liens du menu.
.zli1 à zli4 (ou plus si vous utilisez davantage de niveau de menu) : les classes de chaque niveau de menu.
.zon : la classe additionnelle de l'élément de menu actif (la page sur laquelle on se trouve.

Le tout est donc de composer les images dont on a besoin, de les mettre dans le répertoire deco (par exemple), et d'éditer la feuille de style en conséquence. J'espère que les idications fournies ici donnent un point de départ suffisant... après cela relève de connaissances en graphisme et sur les CSS, que je n'ai pas trop vocation à expliquer ici (n'étant pas expert, et le net regorgeant de ressources sur ces sujets).


Ubuntu Rocks

Hors ligne

#3 18/02/2007 14:45:08

Vektrox
Membre
Lieu : Contres (41)
Inscription : 08/02/2007
Messages : 108

Re : Menu

Merci Renaud du coup de main, je vais essayer un peu cet apres-midi.
Mais ça m'a l'air bien compliquer quand meme....

Hors ligne

#4 18/02/2007 23:11:49

Vektrox
Membre
Lieu : Contres (41)
Inscription : 08/02/2007
Messages : 108

Re : Menu

Après quelques essais voici le résultat
SITE ZITE ESSAI

Hors ligne

#5 18/02/2007 23:24:06

Renaud
Membre
Inscription : 30/01/2007
Messages : 306

Re : Menu

Je vois que tu maîtrises de mieux en mieux... bravo !
Le seul truc, c'est qu'il faudrait que l'on distingue les sous-pages des autres. Peut-être avec unecouleur un peu plus claire pour les images de fond. En tout cas, bon boulot !


Ubuntu Rocks

Hors ligne

#6 18/02/2007 23:34:57

Vektrox
Membre
Lieu : Contres (41)
Inscription : 08/02/2007
Messages : 108

Re : Menu

Oui effectivement, mais cela reste un essai, le principale est de pouvoir un peu dompter ZITE après le reste c'est de la rigolade, par contre je n'est pas trouver le moyen de déplacer le lien d'accès administrateur pour le mettre un peu comme prositif avec une icône sur le bot.

Merci Renaud pour ton excellent CMS
----------------
edit

Effectivement le système de hiérarchie se trouve chamboulé en enlevant les décalage, seulement ça reste bien plus jolie, faudrait trouver qqchose qui pourrait maintenir le système hiérarchie

Dernière modification par Vektrox (19/02/2007 00:05:04)

Hors ligne

#7 19/02/2007 09:52:04

Renaud
Membre
Inscription : 30/01/2007
Messages : 306

Re : Menu

Pour la hiérarchie, tu as un exemple avec le design de prositif : si tu prends le template d'origine le menu apparaît arborescent comme avec Zite, alors que le template actuel rend visuellement la hiérarchie d'une manière toute différente.

Le lien login est un lien tout bête. Il est dans la page appelée "module latéral" si je me souviens bien. Tu n'as qu'à l'effacer de là. Puis dans le menu d'admin tu choisis CONFIGURER, tu cliques ensuite sur SOURCE en face de template.php pour en éditer le contenu. Et tu mets ceci :

Site motorisé par <a href="http://zite.prositif.com"> ZITE CMS <?= ZITEVER ?></a> - <a href="index.php?z=login">Administrer</a>

entre <div id="bot"> et le </div> suivant. Là ça te fera un lien texte, mais libre à toi d'uploader une image et ensuite de l'utiliser. Si par exemple tu as envoyé l'image voulue et que c'est, disons, 17.jpg, tu remplaces "Administrer" par

<img src="zfiles/17.jpg" alt="Administrer" />

Ubuntu Rocks

Hors ligne

#8 19/02/2007 11:55:35

Vektrox
Membre
Lieu : Contres (41)
Inscription : 08/02/2007
Messages : 108

Re : Menu

Impec, merci Renaud.

Hors ligne

Pied de page des forums