Share
Stiamo utilizzando un tema di partenza per creare un nuovo sito.
Stiamo andando a seguire direttamente dal precedente tutorial di questa serie. Quindi saltiamoci dentro:
Utilizzeremo due tipi di carattere dalla libreria di caratteri di Google: Arvo e PT Sans. Inserisci questo codice nel functions.php file. Questo codice inserirà il codice CSS che contiene il font-face proprietà.
Accentsconagua
function wptuts_googlefonts_styles () // Accoda i fogli di stile dei font in questo modo: wp_enqueue_style ('googlefonts-arvo', 'http://fonts.googleapis.com/css?family=Arvo'); wp_enqueue_style ('googlefonts-pt-sans', 'http://fonts.googleapis.com/css?family=PT+Sans'); add_action ('wp_enqueue_scripts', 'wptuts_googlefonts_styles'); Impostiamo Arvo per le intestazioni (base.less) e PT Sans per la copia del corpo. Possiamo impostare il carattere con famiglia di font. Definiamo anche serif e sans-serif, il che significa che otterremo un carattere predefinito se non è possibile caricare il carattere personalizzato.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; ... ... body font-family: 'PT Sans', sans -serif; ...
H1, footer, intestazione La dimensione del font sarà 4em. Dobbiamo modificare il footer.php aggiungere contenuto e il base.less file per stili. Imposta lo sfondo (con sfondo), bordo inferiore (con border-bottom) e padding (in alto) 10px, 0px per sinistra e destra, e 15px per il fondo). Per l'intestazione un gradiente di rumore ridimensionato di 10 volte sarà buono, salvato come un file (kotkoda_header_bg.gif) e deve essere nel ossa / Library / immagini cartella. Il codice CSS va nel base.less file. La grafica verrà ripetuta orizzontalmente (repeat-x) e iniziare in alto a sinistra (0 0).
h1, .h1 font-size: 4em; /*2.5em*/ line-height: 1.333em;
© . Questa pagina è protetta dal XXYY governo ed esercito. Leggi tutto attentamente. Potete raggiungerci per posta a kukori @ kotkoda.com.
.footer clear: both; sfondo: # f6f6f6; border-bottom: 5px solid # FFD400; imbottitura: 10px 0 15px;
.header background: url (... /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Ecco come si guarda dopo aver modificato il footer.
Questo è come va dopo aver aggiunto la grafica.
Possiamo impostare una nuova favicon 16x16 in header.php file. Nel href parte impostiamo il percorso dell'icona, get_template_directory_uri ci fornirà l'URL della directory principale del modello. Per il titolo della pagina, sostituire il codice originale con questo e impostare la descrizione nell'interfaccia di amministrazione. Questo codice PHP farà eco al campo descrizione del blog.
...<?php echo get_bloginfo( 'description', 'display' ); ?>
Sembrerà così dopo aver aggiunto l'icona.
Anche la navigazione principale per le pagine avrà uno stile minimale. Con display impostato in linea l'aspetto sarà orizzontale e il bordo sinistro sarà bianco (border-left).
.menu border-left: 1px solid @white; padding-left: 1em; .menu ul padding: 1em 0 1em; altezza: 1.5em; .menu ul li display: inline; margine-destra: 1em;
Il nuovo aspetto del menu principale.
I commenti avranno un aspetto più semplice. Gli stili nominati dispari e anche dovrebbe essere vuoto (o commentato) e il Li elemento ottiene a border-left. Anche il link del testo della data giusta sarà bianco, coloriamolo @bianca. Il pulsante di risposta avrà anche un nuovo stile. Dobbiamo impostare il colore, il colore di sfondo e le opacità (queste sono cancellate).
.commentlist li position: relativo; chiaro: entrambi; overflow: nascosto; list-style-type: none; margin-bottom: 1.5em; imbottitura: 0,7335em 10px; border-left: 1px solid @white; ... / * classi di commenti generali * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; * / ... / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; stile font: normale; a.url time float: right; a color: @white; ... / * commento reply link * / .comment-reply-link text-decoration: none; float: giusto; sfondo: @ bianco; imbottitura: 3px 5px; colore: n. 999; margin-bottom: 10px; font-weight: 700; font-size: 0.9em; &: hover, &: focus color: @ kotkoda-gray;
Il nuovo look.
Non abbiamo bisogno del confine (confine: 0) e lo sfondo dovrebbe essere @bianca (base.less). Ci sono molti stili di fantasia di cui non abbiamo bisogno (transizione, arrotondato, pendenza) quindi dobbiamo cambiare i bordi e gli sfondi e cancellare rotondità e transizione. Questo entra nel nostro mixins.less file.
textarea padding: 3px 6px; sfondo: @ bianco; / * # efefef; * / border: 0; / * 2px solid #cecece; * /
.button, .button: visited / * border: 1px solid darken (@ kotkoda-grey, 13%); border-top-color: darken (@ kotkoda-grey, 7%); border-left-color: darken (@ kotkoda-grey, 7%); * / border: 0; imbottitura: 4px 12px; colore: n. 999; display: blocco in linea; dimensione del font: 13px; font-weight: bold; decorazione del testo: nessuna; / * text-shadow: 0 1px rgba (0,0,0, .75); * / cursor: pointer; margin-bottom: 20px; altezza della linea: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: hover, &: focus color : @ kotkoda-gray; / * border: 1px solid darken (@ kotkoda-grey, 13%); border-top-color: darken (@ kotkoda-grey, 20%); border-left-color: darken (@ kotkoda-gray, 20%); * / border: 0; /*.css-gradient(darken(#444, 5%), darken (# 444, 10%)); * / &: active /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-gray); * / color: @ kotkoda-gray;
Lo stile dopo lo styling.
Cambiamo lo sfondo della casella informativa in giallo chiaro, che è @ Allarme giallo (nel mixins.less). Non abbiamo bisogno di un bordo, quindi impostarlo su zero.
.informazioni / * border-color: darken (@ alert-blue, 5%); * / border: 0; background: @ alert-yellow;
L'ultimo passo è quello di eliminare lo screenshot predefinito e sostituirlo con quello di Kotkoda che abbiamo creato.
Ecco come appare il tema finito in 600 pixel di larghezza. Nelle prossime esercitazioni puliremo il tema da parti non necessarie, quindi lo prepareremo per l'invio a ThemeForest.
