Menu vertical - Newsletter, Sondages et Statistiques
ACCUEIL <<< Menu vertical gauche <<<
 |
 |
 |
 |
 |
 |
En bleu sur l'image
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.
- Statistiques : Résultats calculés automatiquement.
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.
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Marge intérieure gauche | padding-left | Dimension (ex: 10px) | |
| Couleur du texte | color | Choisir | |
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
Code CSS de cette partie
{
background : #CCFF99;
background-image : url(http://);
background-repeat : repeat;
width : 190px;
padding-left : 15px;
color : #FF3300;
font-size : 10pt;
font-family : Comic sans MS;
border-width : 1px;
border-style : solid;
border-color : #FFCC00;
float:left;
}
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 :
{
width:710px;
margin-left:220px;
}
Les éléments des menus sont des listes, cliquez sur Partie "Menu > liste" pour voir.
Partie "Menu > liste"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
Code CSS de cette partie
{
list-style-type : none;
}
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.
list-style-image : url(http://adresse image);
margin-left : 15px;
Personellement j'ai préféré mettre les images directement sur les liens, de cette façon il n'y a pas de puce pour le module des Statistiques
Voir les parties suivantes les liens, pour voir les attributs ajoutés ...
Partie "Menu > élements de la liste"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Marge intérieure gauche | padding-left | Dimension (ex: 10px) |
Code CSS de cette partie
{
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.
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration | ||
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS | |
| Marge extérieure gauche | margin-left | Dimension (ex: 10px) | |
| Marge intérieure gauche | padding-left | Dimension (ex: 10px) | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
Code CSS de cette partie
{
background : #FFFFCC;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080726.gif);
background-repeat : no-repeat;
width:152px;
color:#009900;
text-decoration : none;
font-size : 10pt;
font-family : Arial, Verdana, Trebuchet MS;
margin-left : -2px;
padding-left : 18px;
border-width : 2px;
border-style : solid;
border-color : #CC3300;
display: block;
}
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
Partie "Menu > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration | ||
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Verdana, Arial, Trebuchet MS | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
Code CSS de cette partie
#menu ul li a:hover
{
background : #009999;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080918.gif);
background-repeat : no-repeat;
color:#FFFF00;
text-decoration : none;
font-size : 10pt;
font-family : Verdana, Arial, "Trebuchet MS";
border-width : 2px;
border-style : solid;
border-color : #33FFCC;
}
Pour l'exemple j'ai modifié certaines couleurs, sinon pas grand chose à dire, à part que l'image est différente de celle de la partie précédente.
Partie "Menu > titres"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Couleur du texte | color | Choisir | |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
{
background : #004000;
background-image : url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/fd_or.png);
background-repeat : repeat;
color : #FFFFFF;
width : 172px;
height : 30px;
margin-top : 25px;
padding-top : 2px;
font-size : 14pt;
font-family : "Trebuchet MS", Arial, Verdana;
border-width : 2px;
border-style : solid;
border-color : #33FF99;
text-align : center;
}
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
Voir la partie "Menu", 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.
Commentaires