Thème › Personnalisation du menu
Paramètres généraux
Les positions proposées pour le menu sont fonction de la position de la bannière. Suivant le cas vous aurez le choix entre 'En dehors du site', 'Avant la bannière', 'Après la bannière', 'Dans le site' , 'Caché'. Sélectionnez une position et vous aurez directement un aperçu du résultat. Si le menu en petit écran est fixe (voir plus bas) seule l'option 'Caché' aura une influence en petit écran.
'Hauteur' régle le hauteur du menu en grand écran et la hauteur du bandeau burger en petit écran ( visible quand le menu n'est pas déployé).
Paramètres pour les écrans larges
Les bords arrondis concernent la forme de l'onglet de la page sélectionnée (ne fonctionne pas en aperçu vous devez sortir de la configuration du thème).
La case à coche 'Menu toujours visible' est disponible quelque soit la position du menu depuis Deltacms 5.3.01. Un exemple de menu utilisant cette option est disponible en bas de cette page.
Réglage 'Largeur minimale d'un onglet' et case à cocher associée : si le titre d'un menu parent est plus petit que le texte de certains de ses sous-menus vous pouvez fixer pour l'onglet parent une largeur minimale. Dans ce cas la largeur du sous-menu s'adapte automatiquement. En cochant la case 'On : tous / Off : avec sous-menu uniquement' tous les onglets du menu auront la largeur minimale fixée, l'impression visuelle sera différente.
Contenus pour tous les écrans
Vous avez la possibilité d'afficher un lien de connexion dans la partie droite du menu, la sélection 'Barre de membre' affiche pour les membres connectés une icône de gestion de compte et de déconnexion.
L'option 'Inversion des couleurs' place dans le menu un bouton qui permet de commuter, pour la partie principale du site, entre l'affichage avec les couleurs du thème et l'affichage avec des couleurs inversées ( hors bannière, menu, images, vidéos...).
L'option 'Augmenter la taille des caractères affiche dans le menu une icône qui permet de modifier, pour la partie principale du site, la taille des caractères ( +2px, +4px, taille initiale, +2px,...).
Attention ces 2 dernières options agissent en modifiant provisoirement le thème du site (fichier CSS), elles seront sans effet sur les couleurs ou les tailles de caractères ajoutées dans custom.css ou modifiées dans l'éditeur Tinymce.
Couleurs pour les écrans larges
Pour le réglage des couleurs un sélecteur graphique apparaît, vous pouvez régler le niveau de transparence à l'aide du curseur horizontal. La case à cocher 'Couleur de fond de la page active automatique' concerne l'onglet actif du menu, décochée un sélecteur de couleurs apparaît.
Couleurs et contenus pour les petits écrans (menu burger)
Une zone de choix de fichier apparaît si vous sélectionnez 'Une icône avec lien' ou 'Deux icônes avec lien'. La hauteur de l'icône choisie s'adapte automatiquement à la hauteur du menu. Le lien associé aux icônes est à choisir dans la liste des pages, cette liste étant propre à chaque langue de votre site ( la langue originale, les langues éventuelles en traduction rédigée ) vous devrez réaliser ce choix pour chaque langue en cliquant sur le drapeau de la langue avant d'ouvrir la page de personnalisation des thèmes. Un petit drapeau rappelle ici la langue en cours ( ex : français ).
Si vous sélectionnez 'Titre du site' vous pourrez choisir la couleur et la taille du titre.
'Couleur du bandeau du menu' règle la couleur du menu quand il n'est pas déployé, vous pouvez régler le niveau de transparence à l'aide du curseur horizontal. L'exemple figuré ici correspond à un bandeau de menu transparent, le fond de l'icône burger est également transparent.
La 'Couleur de fond de la page active automatique' concerne la page active ou la page parent active dans le cas d'une sous-page, si son réglage automatique n'est pas sélectionné un sélecteur de couleurs apparaît.
Mise en forme du texte pour tous les écrans
Exemple de menu toujours visible 'fondu' dans la bannière
La position de la bannière est 'Dans le site', celle du menu 'Après la bannière' avec 'Menu toujours visible'.
L'image de fond du menu reprend l'image de la bannière avec le css correspondant inclus dans custom.css par l'éditeur CSS :
nav #menu {
background-image: url("../file/source/theme/defaut/banniere_1500x200.jpg");
background-size: cover;
background-position: center bottom;
}
Après scolling l'image reste fixe en haut d'écran
