Suite à de nombreuses questions sur le forum de Blog4ever, au sujet des modifications de présentation de la colonne verticale contenant tous les modules du blogs et leurs liens. Je vais essayer de faire le tour du problème en essayant de rester le plus simple possible.
Pour commencer, un petit rappel cette colonne dans le modèle Diz Perso est nommée : Menu et la règle du CSS #menu.
Les modules sont...
Articles : liste avec liens sur les catégories ou sur les articles directs.
Album Photos : liste avec liens sur les catégories.
Forum : liste avec liens sur les catégories.
Newsletter : formulaire saisie Email puis liste liens sur renseignements et archives.
Sondage : formulaire dernier sondage pour voter et lien pour voir tous les sondages.
Partenaires : liens sur les partenaires selon le nombre paramétré, voir les partenaire et inscription.
Ces modifications se gèrent avec le DizPerso, parfois en ajoutant un attribut dans le fichier CSS en direct.
Dans la première partie "Menu" vous pouvez ajouter, un fond couleur ou une image, et mettre une bordure. Ces modifications seront visibles que si le bloc menu est plus large que les éléments qu'il contient. Vous ne serez peut-être pas tenter de faire cette expérience, mais essayez rien que pour vous rendre compte.
Voir le code et explications en cliquant sur Partie "Menu" puis sur les autres partties.
Attribut couleur de fond background, mais si vous souhaitez ne pas mettre de couleur, comme valeur laissez "#", vous éviterez que cette ligne disparaisse de l'assistant, de cette façon le fond sera transparent. De même pour l'attribut fond image background-image, mettre le code sans l'adresse de l'image, j'ai ajouté l'attribut de répétition d'image background-repeat, en pensant à des images de texture. Si vous ne voulez pas de bordure pour garder les lignes d'attribut de bordure dans l'assistant, enlevez la valeur de la largeur, laissez l'unité, border-width : px;
L'attribut padding-left, réglera le placement des éléments contenu dans ce bloc "Menu".
Comment changer l'apparence du module Statistiques
J'ajoute également l'attribut color, pour colorer le texte (en rouge pour attirer votre attention), ainsi vous verrez ce qui change dans votre menu, pas grand chose selon les paramètres des éléments parents. Si vous ne mettez pas cet attribut, les textes seront de la couleur de l'attribut "color" de la Partie "Page". Pour ma part seulement les statistiques sont modifiés, donc cela veut dire que pour modifier leur apparence il faudra ajouter ou changer les attributs font-size et font-family et color dans cette partie "Menu".
Vous serez obligé certainement de faire la modification suivante dans la partie "Contenu", pour décaler un peu cette partie en mettant une marge extérieure plus grande, et par conséquence diminuer sa largeur. Code à modifier :
#contenu { width:710px; margin-left:220px; }
Les éléments des menus sont des listes, cliquez sur Partie "Menu > liste" pour voir.
C'est avec cet attribut que vous pouvez faire des listes à puces, à mon avis très peu utilisées dans ce type de menu, ou éventuellement comme ci-dessous, le code pour de liste à puce mais image.
#menu ul li { width : 172px; padding-left : 2px; }
Dans cette règle je précise la largeur de l'élément pour cadrer avec le titre des modules et je mets une marge intérieure gauche pour dégager, de la bordure, l'image ou le texte du lien.
J'ai ajouté 2 attributs pour indiquer l'adresse de l'image background-image et pour éviter que l'image se répéte background-repeat. J'ai laissé l'attribut background et ajouté display:block; de façon à mettre en plus les liens sur une couleur, mais vous pouvez enlever le code et laisser le "#" pour garder cette ligne dans l'assistant mais que cette propriété soit sans effet.
Les attributs width, margin et padding sont à régler selon la taille de l'image
Déjà dans cette règle la marge extérieure haute margin-top ajoutée avec une valeur de "25px", pour créer un espace entre les modules.
L'image sous le titre se répète, mis ici pour l'exemple.
Astuces
- 1 - Gestion Sondage et Newsletter
Ces modules se présentent en partie sous forme de formulaire, c'est la seule chose qui les diffère du reste du menu, nous pouvons donc actuellement les gérer que de la façon suivante :
J'ai ouvert un sondage pour montrer le résultat avec mon code.
Ajouter la règle :
#menu form { background: #99CC00; color:#FFFFFF; }
Dans le CSS en modification directe ou sur chaque page, pour les versions gratuites et dans la bordure gauche/droite pour les version Silver et Gold.
- 2 -Comment changer l'apparence du module Statistiques
Dans la partie"Menu éléments de la liste", il faut ajouter l'attribut "color", en effet c'est dans cette partie que vous pourrez gérer la présentation des "Statistiques". Sinon par héritage c'est les attributs de la partie "Page" qui sont pris en compte.
En vous inscrivant vous pourrez si vous le souhaitez être prévenu par email en cas de nouveauté (article, commentaire, sujet sur le forum) et personnaliser votre profil pour participer au blog.
