{"id":5726,"date":"2019-02-02T19:47:51","date_gmt":"2019-02-02T18:47:51","guid":{"rendered":"https:\/\/www.vla-bag.ch\/2019\/02\/02\/stilizzazione-personalizzata-del-tema-css\/"},"modified":"2025-08-17T18:11:13","modified_gmt":"2025-08-17T16:11:13","slug":"stilizzazione-personalizzata-del-tema-css","status":"publish","type":"post","link":"https:\/\/www.vla-bag.ch\/it\/2019\/02\/02\/stilizzazione-personalizzata-del-tema-css\/","title":{"rendered":"Stilizzazione personalizzata del tema (CSS)"},"content":{"rendered":" \n

Tutti i CSS personalizzati si trovano nel Customizer > <\/strong>. Con circa 400 righe pu\u00f2 tranquillamente rimanere l\u00ec. Ma in genere consiglio di inserirlo in un foglio di stile di un tema figlio. La maggior parte del CSS comune del tema \u00e8 trattato qui per i curiosi o per coloro che desiderano apportare modifiche. I CSS per pagine o elementi specifici sono trattati nei rispettivi post. <\/p> \n \n

Va notato che il CSS personalizzato viene visualizzato solo sul front-end. L’aggiunta di stili dell’editor (al momento) non \u00e8 possibile con un sito importato. <\/p> \n \n

Tipografia<\/h2> \n \n

La maggior parte dello stile del tema, in particolare la tipografia, l’interlinea e i colori, sono impostati nel personalizzatore. Ma ci sono anche alcuni CSS personalizzati. <\/p> \n \n

Intestazione H2 grande<\/h3> \n \n

La classe large-heading<\/strong> pu\u00f2 essere aggiunta a un blocco titolo H2 per aumentarne le dimensioni.<\/p> \n \n

Questa \u00e8 la grande intestazione 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
A meno che tu non sia un appassionato di algebra, questo CSS sembra complicato. In poche parole, imposta la dimensione del carattere in modo dinamico in base alle dimensioni dello schermo. Il nostro intervallo di dimensioni dei caratteri va da 28px a 64px. E le dimensioni dello schermo sono comprese tra 400 e 1600px. Prova a regolare la larghezza del tuo browser per vedere l’effetto.Se vuoi maggiori informazioni sulla tipografia fluida, dai un’occhiata a Tipografia reattiva e fluida con unit\u00e0 vh e vw<\/a>    <\/p>
\n
\n
Collegamento Hover<\/h3>
\n
\n
La classe loud-link<\/strong> aggiunge un’icona e un effetto di sottolineatura al passaggio del mouse. Deve essere applicata solo a un blocco di testo che contiene solo il link. <\/p>
\n
\n
Come questo qui<\/a><\/p>
\n
\n
Pulsanti<\/h2>
\n
\n
Tutti i colori e la tipografia dei pulsanti del tema sono controllati tramite il personalizzatore. Il pulsante Happy Forms ha i suoi controlli di stile nelle impostazioni del plugin. Gli angoli arrotondati e lo stile hover vengono applicati utilizzando questo 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
Intestazione<\/h2>
\n
\n
Sottolinea<\/h3>
\n
\n
Per questo design minimalista ho pensato che fosse meglio fare una chiara distinzione tra l’intestazione del sito e il contenuto della pagina. Questo risultato si ottiene con un semplice bordo inferiore dell’intestazione del sito. \u00c8 disponibile in due varianti. Bianco per le pagine con un elemento di intestazione unito e nero per quelle senza.   <\/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
Navigazione primaria<\/h2>
\n
\n
Effetto Hover<\/h3>
\n
\n
Una semplice sottolineatura che scala da zero alla larghezza delle voci di menu al passaggio del mouse. Eredita il colore corrente delle voci di 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":"
Il 90% del design di Merch \u00e8 realizzato con il customizer di GeneratePress e i moduli integrati. Il restante 10% \u00e8 realizzato attraverso funzioni e CSS personalizzati. <\/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":[70],"tags":[],"class_list":["post-5726","post","type-post","status-publish","format-standard","hentry","category-merch-styling-it","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/comments?post=5726"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5726\/revisions"}],"predecessor-version":[{"id":5727,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5726\/revisions\/5727"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/media?parent=5726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/categories?post=5726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/tags?post=5726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}