Tout le CSS personnalisé peut être trouvé dans le Customizer > Additional CSS. Avec environ 400 lignes, il peut très bien rester là. Mais je recommande généralement qu’il trouve sa place dans une feuille de style de thème enfant. La plupart des CSS de thème communs sont couverts ici pour les inquisiteurs ou pour ceux qui veulent faire des changements. Les CSS pour des pages ou des éléments spécifiques sont couverts dans leurs posts respectifs.
Il convient de noter que le CSS personnalisé n’est affiché que sur le front. L’ajout de styles d’éditeur ( à ce stade ) n’est pas réalisable avec un site importé.
Typographie
La grande majorité des styles du thème, en particulier la typographie, l’espacement et les couleurs, sont définis dans le personnalisateur. Mais il y a un peu de CSS personnalisé dans le jeu.
Large H2 Heading
La classe à gros titres peut être ajoutée à un bloc de titres H2 pour en augmenter la taille.
Voici la grande tête H2
h2.large-heading {
font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
line-height: 1.1em;
}Si vous n’êtes pas fan d’algèbre, cette CSS semble compliquée. Dans un shell nut, il définit dynamiquement la taille de la police en fonction de la taille d’écran actuelle. Notre plage de taille de police est de 28px à 64px. Et notre plage de taille d’écran est de 400px à 1600px. Essayez d’ajuster la largeur de votre navigateur pour voir l’effet.
Si vous voulez plus d’informations sur la typographie fluide, consultez Responsive And Fluid Typography With vh And vw Units
Lien de survol
La classe loud-link ajoutera un effet de survol d’icône et de sous-titre. Elle ne doit être appliquée qu’à un bloc de texte qui ne contient que le lien.
Boutons
Toutes les couleurs et la typographie des boutons du thème sont contrôlées via le customizer. Le bouton Happy Forms a ses propres contrôles de style dans les paramètres du plugin. Les coins arrondis supplémentaires et le style de survol sont appliqués à l’aide de ce CSS :
a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
-webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
-webkit-transition: all .15s ease;
transition: all .15s ease;
border-radius: 4px !important;
}
a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.woocommerce button.button:hover {
-webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}En-tête
Underline
Pour ce design minimaliste, j’ai pensé qu’il était préférable de faire une distinction claire entre l’en-tête du site et le contenu de la page. Cela est possible grâce à une simple bordure inférieure sur notre en-tête de site. Elle se décline en deux variantes. Blanc pour les pages avec un élément d’en-tête fusionné, et noir pour celles qui n’en ont pas.
.header-wrap .site-header {
border-bottom: 1px solid #fff;
}
.site-header {
border-bottom: 1px solid #ccc;
}Navigation primaire
Effet de survol
Un simple trait de soulignement qui passe de zéro à la largeur de l’élément de menu au survol. Il hérite de la couleur actuelle des éléments de menu.
.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
content: "";
position: absolute;
display: block;
bottom: 1em;
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}
.main-navigation .menu>.menu-item>a:hover:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
width: calc(100% - 40px);
}
