Tutorial1 : userinfo icon o baldymen

[florealpolla]

Se c'è una cosa che mi piace fare per rilassarmi un po' è smanettare con i css, anche se spesso e volentieri mi ci perdo dentro.
Livejournal mette a disposizione layer già pronti e facili all'uso, ma per chi come me è un po' una perfezionista e vuole che sia *tutto a postino* e puccettoso, CSS personalizzati e Theme Layer (per i paid account) sono quello che fa per voi.
Purtroppo buona parte delle *customizzazioni* più interessanti sono riservati ai paid account, ma un paio di cosine carine si possono fare anche con un basic account.

In questi ultimi tempi ho raccolto e testato un bel po' di tutorial, e volevo ripostare il tutto qui anche solo come promemoria personale, mettendolo però a disposizione di tutti quelli interessati.
Oltretutto LJ spesso e volentieri aggiorna i suoi codici, scombinando i nostri layer che funzionavano già a meraviglia (snarl); questi che posterò sono i tutorial aggiornati a Novembre 2007.

Naturalmente do per scontato che sappiate almeno le basi dell'HTML e che abbiate un CSS *customizzato*.
^^;;



Alcune community che possono aiutarvi in tale senso e dalle quali ho estrapolato i vari tutorial sono le seguenti:

everything_lj // s2_for_dummies // s2smoothsailing // s2styles // idiots_and_lj // // component_help // the_lj_reboot (è stata chiusa, nel senso che l'administrator non posta più, ma rimane pubblica e aperta)

Qui invece alcune community di grafica e layout: layout già *customizzati* e pronti all'uso; alcune sono pubbliche, altre bisogna iscriversi ma di solito ne vale la pena. Io di solito preferisco andare su layer Smooth Sailing, è veramente flessibile come css, anche se mi piacciono molto anche Flexible Squares e Bloggish. Lo puntualizzo perchè queste community parlano principalmente di queste ultime tre categorie.

interlinea // mintyapple // premade_ljs // _premadelayouts // freelayouts // carriep63_stuff // freelayouts_s2 // pluslayouts // paiduserlayouts // paidlays

Solitamente parto da un layout già customizzato che poi edito a mia volta.
L'importante è creditare il creatore originale del layout, sempre. Molti di loro sono d'accordo nel lasciar customizzare i propri layout, ma molti non vogliono che il loro *genio creativo* sia manipolato, quindi leggetevi sempre bene le istruzioni.
E dopo 'sto sproloquio di parole, passiamo al primo tutorial


*ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*

UserInfo Icon o Baldymen
Questo codice funziona sia per i Basic Account, che per i Plus e
i Paid.

Ovvero come passare dalle iconcine di default di LJ : alle nostre personalizzate e assai più puccettose :
Il passaggio è indolore ed è un lavoro abbastanza da *scimmie*, come direbbe un mio ex-collega.
Basta fare copia del codice qui sotto e incollarlo nel vostro css customizzato.

Per prima cosa dovete crearvi o cercarvi dell nuove immagini che vi aggradano.
Vi consiglio questi tre siti:
Fam Fam Fam
Graphicpush
Sweetie


Seconda cosa: avrete bisogno di uno spazio web sul quale uploadare le vostre jpg o gif.
Io di soluto uso il mio sito personale, ma in giro per la rete ci sono un mucchio di siti che offrono servizi gratuiti e free space.
Il più famoso è Photobucket.

*ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*ˆ**ˆ*

ed ecco il codice...




img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://www.nuovoindirizzoqui.it);
}

img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://www.nuovoindirizzoqui.it);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://www.nuovoindirizzoqui.it);
padding: 12px 12px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://www.nuovoindirizzoqui.it);
padding: 12px 12px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://www.nuovoindirizzoqui.it);
padding: 16px 16px 0 2px !important;
}


Le parti da cambiare sono queste:
url(http://www.nuovoindirizzoqui.it), da modificare con il vostro nuovo url, dove avete uploadato le vostre nuove immagini.
Il resto non va toccato.

Il primo link si riferisce all'icona del lucchetto (protected), il secondo all'icona con l'occhietto (private). Il terzo e il quarto entrambi a userinfo, il quinto link a community.

Occhio al PADDING: 16px 16px si riferisce all'altezza e alla larghezza della jpg, solitamente quelle di Fam Fam Fam che uso io sono di questa dimensione. Se la vostra jpg personalizzata è più grossa o più piccola agite di conseguenza e modificate il padding.

cià
:)

Comments

[fiona-mckenzie.livejournal.com]

Tutorial ok.
Approved.
:D

[florealpolla.livejournal.com]

Bene, almeno si capisce...
^^

[fiona-mckenzie.livejournal.com]

Direi di sì. Al theme layer penserò quando sono più concentrata, però mi sembra chiaro anche quello.

[florealpolla.livejournal.com]

Crearlo e basta è una cavolata... l'ho fatto in 1 minuto prima, come prova e per fare le caps.
Sembra più complicato di quello che è.
:)

[vicjones.livejournal.com]

io ti voglio strafocare, lo sai?

[florealpolla.livejournal.com]

Tu 'sti tutorial devi saltarli a piè pari... fai finta che NON esistano!
^^;;;

[vicjones.livejournal.com]

ti piacerebbe eeeh??? Vuoi fare le cose in gran segreto eh???????? E invece no! ti sto alle costole sappilo! Non ti mollo! Tutorial o non tutorial che manco so che caspita sono machissenefrreeeeeeeecaaaaaaaaaaaaaaa!!!!!!!!!
Io ti controllo!!!!!

[florealpolla.livejournal.com]

OK, il prossimo sarà: mood theme personalizzato.
Quello potresti anche farlo...
(uh uh uh, che bella battuta che ho fatto)