Stylisme de produits dérivés

Style de thème personnalisé (CSS)

90% du design de Merch est réalisé avec le customiseur GeneratePress et construit en modules. L'autre 10% se fait par le biais de fonctions personnalisées et de CSS.

Tous les CSS personnalisés peuvent être trouvés dans le Customizer > Additional CSS. Aux alentours de 400 lignes, il peut y rester sans problème. Mais je recommande généralement qu’il trouve sa place dans une feuille de style de thème pour enfants. La plupart des CSS de thème courants sont couverts ici pour les inquisiteurs ou pour ceux qui souhaitent faire des changements. CSS pour des pages ou des éléments spécifiques sont couverts dans leurs posts pertinents.

Il convient de noter que le CSS personnalisé n’est affiché que sur la face avant. Ajouter des styles d’éditeur ( à ce stade ) n’est pas réalisable avec un site importé.

Typographie

La grande majorité des styles de thèmes, en particulier la typographie, l’espacement et les couleurs, sont définis dans le personnalisateur. Mais il y a du CSS personnalisé en 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, ce CSS semble compliqué. Dans un shell nut, il définit la taille de la police de manière dynamique en fonction de la taille actuelle de l’écran. Notre gamme de tailles de polices est de 28px à 64px. Et notre gamme de tailles d’écran est de 400px à 1600px. Essayez d’ajuster la largeur de votre navigateur pour voir l’effet.
Si vous souhaitez 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. Il ne doit être appliqué qu’à un bloc de texte qui ne contient que le lien.

Boutons

Toutes les couleurs des boutons du thème et la typographie 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. Pour ce faire, il suffit d’ajouter une simple bordure inférieure à l’en-tête de notre site. Il se décline en deux variétés. 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. Elle 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);
}

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00