Come modificare il tuo tema con HTML su Tumblr

Tumblr supporta la personalizzazione completa per qualsiasi tema gratuito che scegli, così come temi completamente personalizzati per il tuo blog Tumblr. I temi su Tumblr sono realizzati da una varietà di sviluppatori diversi, molti dei quali utenti Tumblr; in quanto tale, il design e il layout del codice variano drasticamente tra i temi, con solo elementi chiave in comune. Sebbene la sperimentazione sia un mezzo efficace per apprendere i dettagli di un sistema, è meglio avere un po 'di basi sui temi prima di modificare i tuoi. Tumblr offre una pagina completa di documentazione su temi e variabili personalizzati.

1

Apri la tua pagina di personalizzazione di Tumblr su Tumblr.com/customize; puoi anche fare clic sul tuo nome utente nella parte superiore della dashboard di Tumblr, quindi fare clic su "Personalizza aspetto" nella barra laterale.

2

Fare clic sul pulsante "Tema". La schermata predefinita è la schermata di selezione del tema. Scegli un tema che ritieni opportuno modificare, se non ne hai già uno selezionato. Una volta selezionato, fai clic su "Usa HTML personalizzato" nella parte inferiore del menu Tema.

3

Esamina il codice per avere un'idea di come lo sviluppatore ha originariamente costruito il tema. I temi utilizzano una combinazione di codice, inclusi HTML, CSS e Javascript. I temi di Tumblr utilizzano un set standard di blocchi per definire le aree di codice che si applicano a diversi post e sezioni del blog. Ad esempio, la sezione che definisce i post audio inizierà "{block: Audio}" e finirà con "{/ block: audio}" e la sezione per i post con citazioni inizierà {block: Quote} e finirà "{/ block: Quote } "che semplifica la ricerca di singoli tipi di post e sezioni. Se stai cercando un elemento specifico, la funzione "trova" del tuo browser dovrebbe essere in grado di trovare le parole all'interno dell'HTML del tema.

4

Inserisci qualsiasi codice HTML personalizzato che desideri. Se vuoi creare un nuovo foglio di stile per il tuo tema, lo inserirai da qualche parte tra i tag di apertura e chiusura per l'intestazione del documento. Un foglio di stile è formattato come

corpo {background: # 000000;}

Puoi includere tutti gli elementi nel tuo foglio di stile di cui hai bisogno. Qualsiasi elemento può essere modificato utilizzando CSS. Ad esempio, se volessi impostare qualsiasi cosa modificata con il tag H2 come 22 pixel di altezza e grigio scuro, il foglio di stile includerebbe questo blocco:

h2 {dimensione carattere: 22px; colore: # A8A8A8;}

5

Aggiungi qualsiasi stile ai singoli elementi HTML utilizzando il tag "style". Ad esempio, se vuoi cambiare le virgolette sulla tua pagina per avere un'ombra del testo grigio chiaro, troverai l'HTML che modifica la tua citazione e aggiungi style = "text-shadow: 1px 1px # A8A8A8;" all'interno delle parentesi del tag HTML. Qualsiasi CSS aggiunto in questo modo funziona in aggiunta al foglio di stile della tua pagina.

6

Fai clic su "Aggiorna anteprima" per vedere le modifiche al tuo blog Tumblr nell'anteprima senza salvare le modifiche. Quando hai finalmente apportato le modifiche desiderate al tuo blog Tumblr e sei pronto per eseguirle, fai clic su "Salva".