Personnalisation de la navigation latérale

Vous pouvez personnaliser votre navigation latérale en configurant des styles spécifiquement sur le modèle de navigation latérale ou en modifiant la largeur de la zone de navigation latérale ou de la zone de contenu principal.

Configuration des styles sur le modèle de navigation latérale

Vous pouvez configurer les styles spécifiquement au modèle de navigation latérale de sorte que vous n'ayez pas besoin d'inclure des styles différents entre les modèles. Par défaut, le modèle applique la classe CSS wpthemeSplitView à l'élément de corps HTML. Cette classe peut être utilisée dans le CSS pour configurer les styles et est illustrée dans sideNav.css.

Exemple :

.wpthemeSplitView .someStyle { color: #000; }

Ce style indique qu'il s'applique uniquement à l'élément avec la classe someStyle lorsque le modèle de navigation latérale est appliqué.

Modifiez la largeur de la navigation et du contenu principal.

Vous pouvez modifier la largeur de la zone de navigation latérale ou la zone de contenu principal en modifiant les styles. Les styles applicables sont les suivants :

.wpthemeSplitView .wpthemeFrame { 
min-width: 1225px;
}
	 
.wpthemeSplitView .wpthemeMainContent > div {
width: 1135px;
}
	 
.wpthemeSplitView .wpthemeLayoutContainers {
width: 850px;
}
	 
.wpthemeSideNavigation {
width: 275px; 
margin: 10px 10px 10px 0;
}

Modifiez la largeur du conteneur de présentation

Des styles de navigation latérale spécifiques sont appliqués aux modèles de présentation prêts à l'emploi. Si vous modifiez la largeur du contenu principal, vous devez adapter les présentations. Ces styles figurent également dans le fichier sideNav.css. Les styles applicables sont les suivants :

.wpthemeSplitView .wptheme1Col .wpthemeCol {width:850px;}
.wpthemeSplitView .wptheme2Col .wpthemeCol {width:400px;}
.wpthemeSplitView .wptheme3Col .wpthemeCol {width:260px;}
.wpthemeSplitView .wptheme2Col.wpthemeUnequal .wpthemePrimaryContainer {width:545px;}
.wpthemeSplitView .wptheme2Col.wpthemeUnequal .wpthemeSecondaryContainer {width:260px;}
.wpthemeSplitView .wptheme3Col.wpthemeUnequal .wpthemePrimaryContainer {width:434px;}
.wpthemeSplitView .wptheme3Col.wpthemeUnequal .wpthemeSecondaryContainer,
.wpthemeSplitView .wptheme3Col.wpthemeUnequal .wpthemeTertiaryContainer {width:175px;}
.wpthemeSplitView .wpthemeTopCol .wpthemeHeadlineContainer {width: 830px; margin-right: 15px; margin-bottom: 20px;}
.wpthemeSplitView .wpthemeRow {margin: 0 0 20px 20px;}
.wpthemeSplitView #layoutContainers .layoutRow .layoutColumn .component-control { width: 850px; }