{"id":5601,"date":"2019-02-02T19:47:51","date_gmt":"2019-02-02T18:47:51","guid":{"rendered":"https:\/\/www.vla-bag.ch\/2019\/02\/02\/style-de-theme-personnalise-css\/"},"modified":"2025-08-17T18:09:24","modified_gmt":"2025-08-17T16:09:24","slug":"style-de-theme-personnalise-css","status":"publish","type":"post","link":"https:\/\/www.vla-bag.ch\/fr\/2019\/02\/02\/style-de-theme-personnalise-css\/","title":{"rendered":"Style de th\u00e8me personnalis\u00e9 (CSS)"},"content":{"rendered":" \n

Tout le CSS personnalis\u00e9 peut \u00eatre trouv\u00e9 dans le Customizer > Additional CSS<\/strong>. Avec environ 400 lignes, il peut tr\u00e8s bien rester l\u00e0. Mais je recommande g\u00e9n\u00e9ralement qu’il trouve sa place dans une feuille de style de th\u00e8me enfant. La plupart des CSS de th\u00e8me communs sont couverts ici pour les inquisiteurs ou pour ceux qui veulent faire des changements. Les CSS pour des pages ou des \u00e9l\u00e9ments sp\u00e9cifiques sont couverts dans leurs posts respectifs. <\/p> \n \n

Il convient de noter que le CSS personnalis\u00e9 n’est affich\u00e9 que sur le front. L’ajout de styles d’\u00e9diteur ( \u00e0 ce stade ) n’est pas r\u00e9alisable avec un site import\u00e9. <\/p> \n \n

Typographie<\/h2> \n \n

La grande majorit\u00e9 des styles du th\u00e8me, en particulier la typographie, l’espacement et les couleurs, sont d\u00e9finis dans le personnalisateur. Mais il y a un peu de CSS personnalis\u00e9 dans le jeu. <\/p> \n \n

Large H2 Heading<\/h3> \n \n

La classe \u00e0 gros titres<\/strong> peut \u00eatre ajout\u00e9e \u00e0 un bloc de titres H2 pour en augmenter la taille.<\/p> \n \n

Voici la grande t\u00eate H2<\/h2> \n\r\n
h2.large-heading {\r\n    font-size: calc(28px + (64 - 28)*(100vw - 400px)\/(1600 - 400));\r\n    line-height: 1.1em;\r\n}<\/code><\/pre>\r\n
\n
Si vous n’\u00eates pas fan d’alg\u00e8bre, cette CSS semble compliqu\u00e9e. Dans un shell nut, il d\u00e9finit dynamiquement la taille de la police en fonction de la taille d’\u00e9cran actuelle. Notre plage de taille de police est de 28px \u00e0 64px. Et notre plage de taille d’\u00e9cran est de 400px \u00e0 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<\/a>    <\/p>
\n
\n
Lien de survol<\/h3>
\n
\n
La classe loud-link<\/strong> ajoutera un effet de survol d’ic\u00f4ne et de sous-titre. Elle ne doit \u00eatre appliqu\u00e9e qu’\u00e0 un bloc de texte qui ne contient que le lien. <\/p>
\n
\n
Like this here<\/a><\/p>
\n
\n
Boutons<\/h2>
\n
\n
Toutes les couleurs et la typographie des boutons du th\u00e8me sont contr\u00f4l\u00e9es via le customizer. Le bouton Happy Forms a ses propres contr\u00f4les de style dans les param\u00e8tres du plugin. Les coins arrondis suppl\u00e9mentaires et le style de survol sont appliqu\u00e9s \u00e0 l’aide de ce CSS :  <\/p>
\n\r\n
a.button,\r\n.wp-block-button__link,\r\n.happyforms-submit,\r\n.woocommerce button.button {\r\n    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);\r\n    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);\r\n    -webkit-transition: all .15s ease;\r\n    transition: all .15s ease;\r\n    border-radius: 4px !important;\r\n}\r\n\r\na.button:hover,\r\na.wp-block-button__link:hover,\r\n.happyforms-submit:hover,\r\n.woocommerce button.button:hover {\r\n    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);\r\n    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);\r\n    -webkit-transform: translateY(-1px);\r\n    transform: translateY(-1px);\r\n}<\/code><\/pre>\r\n
\n
En-t\u00eate<\/h2>
\n
\n
Underline<\/h3>
\n
\n
Pour ce design minimaliste, j’ai pens\u00e9 qu’il \u00e9tait pr\u00e9f\u00e9rable de faire une distinction claire entre l’en-t\u00eate du site et le contenu de la page. Cela est possible gr\u00e2ce \u00e0 une simple bordure inf\u00e9rieure sur notre en-t\u00eate de site. Elle se d\u00e9cline en deux variantes. Blanc pour les pages avec un \u00e9l\u00e9ment d’en-t\u00eate fusionn\u00e9, et noir pour celles qui n’en ont pas.   <\/p>
\n\r\n
.header-wrap .site-header {\r\n    border-bottom: 1px solid #fff;\r\n}\r\n.site-header {\r\n    border-bottom: 1px solid #ccc;\r\n}<\/code><\/pre>\r\n
\n
Navigation primaire<\/h2>
\n
\n
Effet de survol<\/h3>
\n
\n
Un simple trait de soulignement qui passe de z\u00e9ro \u00e0 la largeur de l’\u00e9l\u00e9ment de menu au survol. Il h\u00e9rite de la couleur actuelle des \u00e9l\u00e9ments de menu.   <\/p>
\n\r\n
.main-navigation .menu>.menu-item>a:before,\r\n.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,\r\n.loud-link a:before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    bottom: 1em;\r\n    width: 0%;\r\n    height: 2px;\r\n    background-color: currentColor;\r\n    -webkit-transition: 0.3s width ease;\r\n    transition: 0.3s width ease;\r\n}\r\n\r\n.main-navigation .menu>.menu-item>a:hover:before,\r\n.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,\r\n.loud-link a:hover:before {\r\n    width: calc(100% - 40px);\r\n}<\/code><\/pre>\r\n
\n
<\/p>
\n","protected":false},"excerpt":{"rendered":"
90% du design de Merch est r\u00e9alis\u00e9 avec le customiseur GeneratePress et int\u00e9gr\u00e9 dans des modules. Les 10% restants sont obtenus gr\u00e2ce \u00e0 des fonctionnalit\u00e9s personnalis\u00e9es et CSS. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"categories":[71],"tags":[],"class_list":["post-5601","post","type-post","status-publish","format-standard","hentry","category-stylisme-des-produits-derives","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/comments?post=5601"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5601\/revisions"}],"predecessor-version":[{"id":5602,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5601\/revisions\/5602"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/media?parent=5601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/categories?post=5601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/tags?post=5601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}