Personalizzazione del tema Luxeritas Child (style.css)
Luxeritas è un tema Wordpress gratuito e altamente funzionale.In questo blog, introdurrò i contenuti personalizzati di style.css del child theme.
Come modificare il child theme di Luxeritas
Esistono due modi per modificare style.css
1. Entra direttamente in "Style Sheet: style.css"
Schermata di gestione: Luxeritas → Modifica tema figlio → Seleziona il tag "style.css"
Inserisci il codice dopo "/ * Scrivi lo stile del child theme in base alle tue preferenze. * /".
2.Immettere "CSS aggiuntivo" per la personalizzazione dell'aspetto
Schermata di gestione: Luxeritas → Personalizza (aspetto) → CSS aggiuntivo
Lo consigliamo perché puoi vedere il risultato della riflessione del codice nello stesso momento in cui inserisci il codice.
Style.css personalizzato
Titolo del sito in grassetto
Per coloro che pensano che i caratteri standard siano un po 'magri e l'impressione è sottile.
/ * Titolo del sito * / #sitename {font-weight: bold;}
Aggiungi un'ombra sotto il menu delle strisce per farlo sembrare un materiale
C'è un'ombra su questo ...
Sarà questo.È una sottile differenza, ma l'atmosfera del sito cambia inaspettatamente.
/ * Shadow nella navigazione globale * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Colore al passaggio del mouse che non può essere impostato dalla personalizzazione dell'aspetto
Il colore standard al passaggio del mouse per i titoli degli articoli e gli articoli precedenti e successivi è rosso.Non credo ci fossero elementi da cambiare direttamente dalla personalizzazione dell'aspetto.
colore: puoi cambiarlo inserendolo nel codice del tuo colore preferito qui sotto.A proposito, "# 00b22f" è verde chiaro.Inoltre, il titolo dell'articolo è in grassetto per facilitarne la lettura.
/ * Titolo articolo * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Articoli precedenti e successivi * / #pnavi a: hover {color: # 00b22f }
Scheda blog per il material design
Avrai una scheda blog come questa.Sposta il cursore per renderlo soffice.
/ * Design della scheda del blog * / a.blogcard-href {padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); transizione: .3s;} a. blogcard-href: hover {box-shadow: 0 4px 20px rgba (0,0,0,0.25); transform: translateY (-5px);} .blogcard-img {margin: 0px 10px 0 0; border: none} p .blog-card-title {margin: 5px 5px 5px 5px;} p.blog-card-desc {display: none;} p.blogcard-link {clear: none; margin: 5px 0 5px 5px;} @media only screen e (larghezza massima: 430 px) {p.blogcard-link {display: none;}}
Ho fatto riferimento alla pagina seguente.
Personalizza la tua scheda blog Luxeritas per farlo fluttuare come un SANGO
Cambia il colore dell'impaginazione
Come il titolo dell'articolo, è rimasto rosso e non è stato possibile modificarlo dalla personalizzazione dell'aspetto. È disattivato con "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Quando lo modifichi, appare come questo ↓
Modifica del design del cloud di tag
/ * Modifica del design della nuvola di tag * / .tagcloud a {border-radius: 3px; / * Round the corner * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
Ho arrotondato gli angoli del tag per ridurre la larghezza della linea.
Margini rimossi sotto il titolo dell'articolo
Quando ho inserito un annuncio di Google Adsense sotto il titolo dell'articolo, ero preoccupato che la spaziatura tra le righe prima e dopo l'annuncio sembrasse essere grande. Dopo aver rimosso il margine, sono stato in grado di installarlo nel modo più compatto possibile.
/ * Meta Information (aggiornato) Rimuovi margine inferiore * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Rimuovi margine sopra e sotto articolo * / .post- title-upper,. post-title-under {margin-bottom: 1px;}
Questo è tutto.