Tutti i CSS personalizzati si trovano nel Customizer > . Con circa 400 righe può tranquillamente rimanere lì. Ma in genere consiglio di inserirlo in un foglio di stile di un tema figlio. La maggior parte del CSS comune del tema è trattato qui per i curiosi o per coloro che desiderano apportare modifiche. I CSS per pagine o elementi specifici sono trattati nei rispettivi post.
Va notato che il CSS personalizzato viene visualizzato solo sul front-end. L’aggiunta di stili dell’editor (al momento) non è possibile con un sito importato.
Tipografia
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.
Intestazione H2 grande
La classe large-heading può essere aggiunta a un blocco titolo H2 per aumentarne le dimensioni.
Questa è la grande intestazione H2
h2.large-heading {
font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
line-height: 1.1em;
}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à vh e vw
Collegamento Hover
La classe loud-link 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.
Pulsanti
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:
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);
}Intestazione
Sottolinea
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. È disponibile in due varianti. Bianco per le pagine con un elemento di intestazione unito e nero per quelle senza.
.header-wrap .site-header {
border-bottom: 1px solid #fff;
}
.site-header {
border-bottom: 1px solid #ccc;
}Navigazione primaria
Effetto Hover
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.
.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);
}
