[Tutorial] Personalizzare "Quote, Code e Spoiler"

Shine;

Posted on 10/5/2009, 21:35

Come possiamo modificare i quote e i code? Modificare lo SPOILER

Sappiamo già come personalizzare i bordi, lo sfondo e le scritte.. Ma se noi vogliamo modificare la scritta "Codice" o la scritta "Citazione", come possiamo fare? E' molto semplice (:
Per personalizzare il "Quote" andiamo in Amministazione > Modifica colori e stili, e scendiamo fin quando non troviamo questo codice:

CODICE

/* DISCUSSIONE */
.left_top, .right_top {background-color: #D1E0BA}
.right_top * a:link, .right_top * a:visited, .right_top * a:active {text-decoration: none}
.nick {font-size: 11px; font-weight: bold; color: #900}
.nick a:link, .nick a:visited, .nick a:active {font-size: 12px; text-decoration: underline}
.left, .right {background-color: #F5F5F5}

#quote {background-image: url(http://img.forumfree.net/style_images/37/quote.gif); background-position: right top; background-repeat: no-repeat; background-color: #FAFCFE; border: 1px dotted #8CBA41; border-left: 4px solid #8CBA41; border-top: 0; margin: 0 auto 8px auto; padding: 4px; padding-top: 14px; font-size: 8pt; color: #5B7E4C}
#code {background-image: url(http://img.forumfree.net/style_images/37/code.gif); background-position: right top; background-repeat: no-repeat; background-color: #FAFCFE; border: 1px dotted #986265; border-top: 0; margin: 0 auto 0 auto; width: 98%; padding: 4px; padding-top: 14px; font-size: 8pt; font-family: Courier, Courier New, Verdana, Arial; color: #986265}

Noi andremo a modificare (o meglio, ad aggiungere un codice) in questa parte qui:

CODICE

#quote {background-image: url(http://img.forumfree.net/style_images/37/quote.gif); background-position: right top; background-repeat: no-repeat; background-color: #FAFCFE; border: 1px dotted #8CBA41; border-left: 4px solid #8CBA41; border-top: 0; margin: 0 auto 8px auto; padding: 4px; padding-top: 14px; font-size: 8pt; color: #5B7E4C}

Aggiungiamo questo div sopra o sotto il codice #quote:

CODICE

.quote_top

A seconda di cosa vogliamo modificare, aggiungiamo le classi.

- Per modificare semplicemente il font:

CODICE

.quote_top {font-family: NOME FONT}

al posto di NOME FONT mettiamo il nome del font che vogliamo mettere.

- Per modificare il colore:

CODICE

.quote_top {color: #000}

al posto di 000 mettiamo il colore che vogliamo mettere.

- Per modificare la scritta in corsivo:

CODICE

.quote_top {font-style: italic}

- Per mettere la scritta in minuscolo:

CODICE

.quote_top {text-transform: lowercase}

- Per mettere la scritta con le lettere iniziali in maiuscolo:

CODICE

.quote_top {text-transform: capitalize}

In questa discussione possiamo avere degli esempi.
Se volete aggiungere più classi, separate ogni classe con il "punto e virgola".
Esempio:

CODICE

.quote_top {font-style: italic; text-transform: capitalize}

In questo modo otterremo la scritta in questo modo: Tipitità Prova Prova

Per personalizzare il "code" si possono usare le stesse impostazioni, ma al posto di ".quote_top" dobbiamo scrivere ".code_top".

Per domande, dubbi o perplessità non esitate a chiedere ^^

Edited by CioboMario ‘ - 22/5/2009, 20:40

M-D

Posted on 10/5/2009, 22:27

Senior Member

Group:: Member

Posts:: 20,011

Location:: Bergamo

Status:

Shine, ti dico un segreto =D
Si può modificare pure lo SPOILER tramite la classe .spoiler #code { }

Magari ti può essere utile per il tutorial
^_^

Shine;

Posted on 10/5/2009, 23:35

Non sapevo di potesse modificare anche lo spoiler.. provavo sempre con #spoiler {} ma non mi usciva mai niente... Sei un genio D: grazie!

;lullù

Posted on 11/5/2009, 12:31

Uh non lo sapevo neanche io questo grazie!

clo-chann

Posted on 23/6/2009, 22:13

ciao scusami la domanda, ma se io volessi mettere un intera immagine come sfondo al code... come faccio? io ci ho provato ma si ripete e viene tagliata. magari ho sbagliato le misure dell'imma.....grazie clo

~shadow~

Posted on 23/6/2009, 22:20

dipende dal tipo di immagine che vuoi mettere...

clo-chann

Posted on 23/6/2009, 22:38

l'imma che volevo mettere era questa

SPOILER (click to view)

~shadow~

Posted on 24/6/2009, 08:24

Si ripete e viene tagliata perché, logicamente, si adatta alla larghezza della skin, di conseguenza del .code e del .quote
Per utilizzarla così com'è dovresti stare attenta ad avere .code e .quote mai più larghi né più lunghi di quell'immagine, cosa che credo impossibile
Dovresti modificarla: rinunciare alla sfumatura, prendere soltanto la parte finale e posizionarla nella parte bassa di .code e .quote e riempire con lo stesso grigio la parte restante
Non verrebbe comunque benissimo, perché la parte che comprende la fiamma è sfumata...
Oppure prendere soltanto la fiamma e posizionarla in basso a destra di .code e .quote, dando allo sfondo il colore grigio