DizTest par PapyClic

Attribut couleur de fond background, rajouté dans "Modification directe du CSS", 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.

Augmentation de la largeur pour que le fond soit sur toute la largeur des éléments, 4px qui représentent les 2 bordures de gauche et de droite.

Pour encadrer toute la partie du menu ajouter l'attribut border comme ci-dessus, en allant dans "Modification directe du CSS".

En principe dans ce menu les puces ne sont pas utiles, cette règle à mon avis existe pour éventuellement désactiver un paramètrage par défaut. Dans le CSS, les éléments contenus dans un bloc, héritent des attributs du bloc dans lequel ils sont incorporés.

Exemple :
Si dans la partie "Page" l'alignement du texte est "text-align: center"... dans le "Cadre", le "Contenu" ainsi que tous les éléments formant la page, il en sera de même, sauf si, à la saisie dans le composeur, vous formatez en alignement gauche. Mais il est préférable d'ajouter cet attribut dans le CSS en direct dans la partie "Contenu", "text-align: left;"... il n'apparaît pas dans l'assistant mais il reste présent dans la règle.

Modifications :

La marge extérieure margin-top de chaque éléments de la liste(menu), avait la valeur "-1", ce qui permettait la justaposition de la bordure basse de l'élément du dessus avec la bordure haute de celui du dessous, modifiée à une valeur "1" pour un léger décalage de façon à faire apparaître toutes les bordures de chaque élément.

Epaissir la bordure border-width à 2px

Variantes :

Si vous mettez ces 2 valeurs à "0", vous obtiendrez un bloc avec la couleur du fond, possible également de mettre le fond en transparence en mettant background : # seul le style des liens du menu sera pris en compte et le fond de la partie "Cadre" apparaîtra

Sur cette règle je change la marge intérieure gauche padding-left, pour dégager légérement le lien de la bordure en lui donnant la valeur "3px".

Sur cette règle j'ai changé les couleurs du texte et du fond pour les différencier des autres liens.
Facile avec la palette qui est à votre disposition en cliquant sur "Choisir" dans l'assistant, ici dans cette présentation elle est déactivée.

Pour l'exemple j'ai rajouter les attributs pour modifier le texte la taille font-size et la police font-family.

Egalement une marge intérieure droite padding-right de 3px pour compenser celle de gauche mise dans la règle précédente, ce qui aura pour effet de mettre le texte au milieu du fond en couleur.

Puis pour affiner la présentation et décoller le lien de la bordure, j'ai mis une marge exterieure gauche margin-left de 3px.

Dans "Modification directe du CSS" ajouter les 4 lignes ci-dessus en rouge.

Les possibilités du CSS sont nombreuses, cet exemple le prouve et en plus si vous ajouter tous les attributs utiles, pour changer les valeurs, avec l'assistant DizPerso c'est un jeu d'enfant.

Déjà dans cette règle la marge extérieure haute margin-top ajoutée avec une valeur de "25px".
Pour mettre en harmonie avec les bordures avec celles des liens, j'ai mis border-width à la valeur de "2px"
Puis grâce à la palette couleur j'ai modifié la couleur de cette bordure.

Dans "Modification directe du CSS" je rajoute la possibilité de changer de police de caractère, en mettant cet attribut : font-family.