Template CSS per i journal

Thu, 28 Sep 2006 01:32:26 PDT

_{CSS Template for Journals tutorial made using references from `thespook (deviation: [link]) and =ghostlove (deviation: [link]).
Language: italian (made under request).}

Template per i journal di deviantART - Ultimo aggiornamento 27/04/2009
Funziona solo per i subscribers/senior member

Ho usato come referenze i lavori di `thespook (deviation: [link]) e =ghostlove (deviation: [link]) per fare questo tutorial (grazie a loro, quindi), aggiungendo qualche elemento in più da modificare.
Spero che sia utile, ma soprattutto comprensibile.

Scaricate il file allegato cliccando qui (è lo stesso inserito da =ghostlove con qualche aggiunta extra), copiatelo e incollatelo nella parte apposita all'interno della pagina per la compilazione del journal (in basso a sx). Qui è presente un link con le limitazioni relative a questa feature.

Sostituite i trattini con il codice del colore che volete utilizzare. Trovate una tabella di riferimento qui: [link]

Analizziamo le varie classi contenute nel file allegato, utilizzando anche l'immagine elaborata da `thespook: [link]
Ricordate che gli attributi relativi ad ogni classe devono essere inseriti all'intero delle parentesi { e }, e ogni attributo deve essere separato da un punto e virgola, da digitare subito dopo "!important".

Un po' di sintassi
all'interno del file, il blocco si presenta così:

.classe {
attributo1: numero/valore!important;
attributo2: numero/valore!important;
}

E' importante fare attenzione agli spazi e alla punteggiatura, e anche alle parentesi.

Vediamo le varie classi utili per modificare l'aspetto del Journal:

.journalbox
E' il contenitore generale del blocco-journal.
Il bordo in grassetto all'esterno lo impostate qui e, per i parametri contenuti nel file, potete modificarne il colore (border-color).
Modificate il colore di sfondo (quello che poi sarà sotto al testo del journal), nella riga background-color.
L'attributo "color" stabilisce il colore del testo del corpo del journal.

.journalbox .journaltext
E' il testo del journal. Modificate dimensione e colore del carattere.

.journalbox .journaltop
E' il blocco in alto, dove trovate il titolo del journal e la data di immissione dello stesso.
Nel file troviamo qui l'attributo font-size, tramite cui potete modificare la dimensione del carattere con cui poi apparirà la scritta con la data di immissione. Usate come riferimento 11px per aumentarne o diminuire la dimensione.

.journalbox .journaltop h2
E' il titolo del journal.
L'attributo text-decoration stabilisce la "decorazione" assunta dalla classe (in questo caso .journalbox .journaltop h2), ed è impostata su none. significa che il testo è "pulito" e non ha attributi particolari. Potete impostarlo con underline (sottolineato), overline (traccia una riga sopra) e underline overline (riga sopra e sotto).

.journalbox .list e .journalbox .list .a
Sono le righe relative al mood, al listening to, al watching etc, sono due attributi diversi perché c'è la possibilità di alternarne i colori (come è nell'originale del resto).
potete dare loro gli stessi attributi (colori, sfondo etc.) per non alternarli di aspetto.

div.journalbottom
E' il blocco che contiene i due link "Numerocommenti Comments" e "Previous Journal Entries" in fondo al testo del journal. Scegliete e modificate, per esempio, dimensioni del carattere e colore del testo, colore di sfondo.

.journalbox .commentslink e .journalbox .commentslink:hover
E' la classe relativa al link che segnala il numero dei commenti al journal.
.journalbox .commentslink - indica l'aspetto del link in posizione di "riposo".
.journalbox .commentslink:hover - indica l'aspetto del link al passaggio del mouse.

.journalbox .prevlink e .journalbox .prevlink:hover
E' la classe relativa al link "Previous Journal Entries".
.journalbox .prevlink - indica l'aspetto del link in posizione di "riposo".
.journalbox .prevlink:hover - indica l'aspetto del link al passaggio del mouse.

.journalbox .u e .journalbox .u:hover
E' la classe relativa al link :devnomeutente: inserito nel testo del journal. E' importante modificarne i valori per ottenere delle tonalità in linea con il colore di sfondo del journal, altrimenti dA metterà automaticamente i colori che ha di default. Se per esempio avete scelto un colore di sfondo molto scuro, non inserendo e non modificando questa classe, i link :devnomeutente: non si vedranno quasi, perché i colori di default di dA relativi ai link sono scuri.
.journalbox .u - indica l'aspetto del link in posizione di "riposo".
.journalbox .u:hover - indica l'aspetto del link al passaggio del mouse.

.journalbox a e .journalbox a:hover
E' la classe relativa a qualsiasi altro link che vogliate inserire nel testo del journal. E' importante modificarne i valori per ottenere delle tonalità in linea con il colore di sfondo del journal, per gli stessi motivi di cui sopra.
.journalbox a - indica l'aspetto del link in posizione di "riposo".
.journalbox a:hover - indica l'aspetto del link al passaggio del mouse.
Per ogni link che inserirete nel journal, dA prenderà automaticamente questa classe con i colori da voi scelti.

Extras
Divertitevi a modificare ulteriormente i vari blocchi che contengono il testo, per esempio distanziando gli elementi dal margine, allineando i testi a destra e modificando i font utilizzando i vari attributi.
Alcuni esempi (da inserire sempre su una nuova riga, come ogni altro attributo):

font-family
per modificare il tipo di carattere d autilizzare. E' applicabile a qualunque blocco. E' preferibile scegliere tra caratteri standard web, per esempio arial, verdana, georgia, times new roman...

text-align
indica l'allineamento orizzontale del testo. Può essere left (sinistra), right (desta), center (centrato), justify (giustificato).

margin
indica lo spazio degli elementi esterni dalla classe cui si attribuisce il valore margin.
Esempio:

.classe{
margin: 5px!important;
}

l'elemento classe distanzierà gli elementi esterni ad esso di 5 px a destra, sinistra, sopra e sotto.
E' possibile attribuire distanze diverse per ogni "lato":
margin-top: per il valore sopra
margin-left: per il valore a sinistra
margin-right: per il valore a destra
margin-bottom: per il valore sotto

padding
indica lo spazio degli elementi interni alla classe cui si attribuisce il valore margin.
E' possiblie modificarlo con -left, -top, -right, e -bottom, esattamente come l'attributo margin.

Gli attributi trovati in ogni classe possono essere utilizzati anche per tutte le altre.
Sbizzarritevi.

Link utili:
CSS da html.it: [link]
Specifiche CSS: [link]
Il "verbo" dei CSS, CSS Zen Garden: [link]

--------------------------
edit 29/09/2006

"Come aggiungo una immagine fissa come sfondo all'interno di un blocco?"

Risposta di esempio:

.nomedellaclasse {
background-image:url(indirizzo web dell'immagine)!important;
background-position: left center!important;
background-repeat: no-repeat!important;
}

In questo caso l'immagine verrà allineata orizzontalmente e sinistra e verticalmente al centro del blocco. Naturalmente il tipo di allineamento può essere modificato con i valori relativi: left, right e center per l'orizzontale, top, bottom e middle per il verticale.
Questi valori possono essere anche dati in px, anche con valori negativi.

attenzione: è importante che l'indirizzo dell'immagine che si vuole inserire come sfondo non sia troppo lungo, altrimenti non verrà visualizzato niente.

--------------------------

--------------------------
edit 13/11/2006

"Come aggiungo un box con bordo, testo e colore di sfondo personalizzati all'interno del blocco di testo?"

Risposta di esempio:

.journaltext .nomedellaclasse {
background-color:#------!important;
border: 1px solid #------!important;
margin: 30px!important;
padding: 20px!important;
text-align: left!important;
font-family: (inserire qui il font che desiderate)!important;
color:#------!important;
font-size:--px!important;
}

Sostituite "nomedellaclasse" con un nome che vi piace.
Sostituite i trattini con i valori che desiderate.
In questo caso il blocco si presenterà distanziato di 30 pixel dai bordi esterni del journal e di 30 pixel dal contenuto che sta sopra e sotto al blocco stesso.
Il bordo del vostro blocco in questo caso sarà di 1 pixel, a riga continua.
Il testo/contenuto del blocco custom è distanziato di 20 px dai 4 lati del blocco.
Nello spazio dove andrete ad inserire il testo al momento della pubblicazione del journal, dovrete inserire il seguente codice:

contenuto del vostro blocco custom

potete utilizzare lo stesso codice più volte all'interno del journal per avere più blocchi.
--------------------------

--------------------------
edit 23/02/2009

"Come posso togliere l'immagine del 'librettino' nel titolo del journal?"

.journaltop h2 img
{
display:none;
}

--------------------------

Per qualsiasi domanda/suggerimento/segnalazione potete contattarmi via note o commentare qui sotto.
Aggiornerò periodicamente il tutorial con le risposte alle domande fatte.

deviantART: Newest Dove Web Design

Template CSS per i journal