Share
Nel nostro ultimo articolo, abbiamo spiegato come impostare la struttura della tua Thesis Skin. Ora vedremo come modellare quella struttura usando i Pacchetti di Tesi.
Ora che abbiamo le nostre scatole completamente configurate e pronte per lo styling, dobbiamo fare clic sul pulsante CSS nella parte superiore del nostro Skin Editor. Questo ci indirizzerà all'area in cui possiamo creare pacchetti e creare il foglio di stile che questa skin utilizzerà.
La sezione pacchetto di Thesis Skin Editor è dove tutte le modifiche CSS avranno luogo. La sezione del pacchetto è composta da tre aree:
Un pacchetto, nella sua forma più semplice, è una scatola che contiene CSS per un dato selettore - o una scatola dalla nostra struttura HTML. Per aggiungere stili a ciascun elemento, dobbiamo creare un pacchetto per questo.
Una volta che il pacchetto è stato creato, devi applicarlo al tuo Skin CSS usando il riferimento alla Tesi per il pacchetto nella finestra Skin CSS.
Per creare un pacchetto, è necessario selezionare il tipo di pacchetto da creare, Thesis dispone di otto opzioni predefinite tra cui scegliere, ma per ciò che stiamo cercando di realizzare ci concentreremo principalmente sugli stili di elemento singolo, collegamenti, widget e colonne.
Ogni pacchetto è composto da tre sezioni, i dettagli del pacchetto, le opzioni e il CSS aggiuntivo. La scheda "pacchetto" contenuta all'interno di ogni pacchetto fornisce campi di input che aiutano a identificare lo stile del pacchetto.
Le opzioni sono esattamente questo, opzioni. Puoi impostare larghezza, altezza, bordo, margine, ecc. Modificando le opzioni - oppure puoi scegliere di utilizzare la scheda "Ulteriori CSS" e includere qualsiasi altra formattazione che potrebbe non essere disponibile di default nelle opzioni.
A partire dal nostro #wrapper, iniziamo a costruire i pacchetti.
Per creare il pacchetto (in particolare il #wrapper pacchetto):
Accentsconagua
#wrapper pacchetto, quindi digitare "#wrapper"e fare clic sulla scheda" Opzioni "nella parte superiore del prompt pop-up." e "#"quando stai compilando il selettore CSS per distinguere tra ID e classe nel pacchetto. Ora che abbiamo creato il pacchetto, dobbiamo applicarlo al nostro Skin CSS. Per fare ciò, digitare il tag di riferimento nella finestra Skin CSS. Ogni tag di riferimento inizierà con un "&"ed essere seguito dal riferimento che hai fornito.
Quindi, per includere il nostro #wrapper dobbiamo digitare & involucro nel nostro Skin CSS. Quando abbiamo finito di creare e applicare i nostri pacchetti, dobbiamo fare clic su "Salva CSS" per salvare i nostri stili.
Ricorda che ogni pacchetto ha il suo set di opzioni, la maggior parte delle quali sono abbastanza semplici da raccogliere, tuttavia il pacchetto di colonne potrebbe sorprenderti, quindi passiamo attraverso la creazione di un pacchetto di colonne e l'aggiunta alla nostra skin.
Se ricordi, il nostro layout è composto da due colonne. La colonna più grande conterrà i nostri post recenti e la più piccola sarà la nostra barra laterale dei widget. Per creare un pacchetto di colonne, dobbiamo seguire questi passaggi:
.contenuto principale scatola.colonna 1) e imposta la larghezza a 700 e l'allineamento (a sinistra nel nostro caso).colonna 2) e imposta la larghezza a 220 e l'allineamento (a destra in questo caso)Ora che il nostro stile delle colonne è a posto, possiamo continuare a dare il resto dei pacchetti della nostra struttura HTML. È possibile visualizzare il resto degli stili CSS utilizzati nella creazione di ogni pacchetto visualizzando il foglio di stile nei file di origine.
Nel corso di questa serie abbiamo discusso su come interagire con il Thesis 2.0 Framework, su come configurare le impostazioni del tuo sito e costruire il layout e lo stile della tua pelle. Per alcuni, Thesis potrebbe sembrare molto "avanti e indietro", dovendo andare da un posto all'altro per apportare modifiche, ma per coloro che sono appena agli inizi con lo sviluppo del tema WordPress, la Tesi può essere uno strumento molto semplice da usare.
Una volta acquisita familiarità con il framework Thesis, puoi iniziare a sviluppare box, funzioni, ecc. Personalizzati. Un argomento non trattato in questa serie, ma che vale sicuramente la pena esplorare, sono ganci Thesis, che possono essere implementati in scatole per fornire ancora più dinamiche funzionalità, come breadcrumbing, paginazione, ecc.
Sebbene la skin creata per questo tutorial non sia robusta o impreziosita dal punto di vista del design, potrebbe essere un ottimo punto di partenza.
