Tutorial per Blog opera: Titoli con CSS
Monday, May 12, 2008 1:28:29 PM
Mi è stato chiesto più volte come si possa personalizzare la grafica del proprio blog.
Sono due gli argomenti che bisogna cominciare a masticare l'HTML e i CSS.
Un pagina HTML non è altro che un semplice documento, in cui porzioni di testo sono delimitate da TAG, questa poi viene interpretata da un browser web che ha il compito di visualizzarla.
Mentre l'html con i suoi tag ha un ruolo più "semantico", i css hanno un ruolo puramente "estetico", aiutano a formattare graficamente e in maniera centralizzata la grafica. Se siete interessati il web è pieno di guide, io mi limiterò a dare piccole soluzioni e spiegazioni del codice.
INSERIRE UN IMMAGINE COME TITOLO DEL BLOG
- Clikkate su MyPage e poi su il link My account
- Clikkate Design
- Cliccate su custom style sheet, il link appena sotto il titolo
#top { background:#202020 url(http://files.myopera.com/Alfire/albums/353879/header3.jpg); }
#top2 h1{ display:none; }
#top2 p{ display:none; }
SPIEGAZIONE CODICE
Con questa riga di codice:
#top { }
definiamo lo stile della porzione di HTML delimitata dal tag top, in parole povere l'intestazione o header. In particolare definiamo due proprietà dello sfondo:
background:#202020 url(http://files.myopera.com/Alfire/albums/353879/header3.jpg)
E cioè stiamo dicendo d'inserire l'immagine hostata su http://files.myopera.com/Alfire/albums/353879/header3.jpg come titolo del blog e in caso non si veda utilizzare uno sfondo con colore esadecimale #202020.
Il div="top2" nell'html contiene titolo (h1) e sottotitolo(p) che nel CSS è definito come invisibile, altrimenti si sovrapporrebbe alla nostra immagine.
Spero di essere stato chiaro! Per consigli o suggerimenti vi aspetto...
Buon lavoro!














Unregistered user # Tuesday, May 13, 2008 2:17:21 PM
Alfire # Tuesday, May 13, 2008 3:24:08 PM
AzeveL # Tuesday, May 13, 2008 3:30:49 PM
;-Q
Alfire # Tuesday, May 13, 2008 4:07:44 PM
Volendo puoi suddividere lo sfondo della pagina in centrale o in laterale come ho fatto io e come sono fatti gli sfondi di opera...
Cmq l'idea dovrebbe essere una cosa del tipo
#body {url(http://fileDiSfondoCheVuoi.jpg); }
questo perchè il tag che racchiude l'intera pagina HTML è il body...
AzeveL # Tuesday, May 13, 2008 4:20:33 PM
#body {url(http://img230.imageshack.us/img230/3573/spacexd3.jpg); }
pero' purtroppo non funziona ;...(
vorra dire che aspettero' il tuo tutorial
Bye ;-Q
Alfire # Wednesday, May 14, 2008 7:17:11 AM
mi sono dimenticato di dirti di mettere la proprietà background.
Per maggiore chiarezza ti faccio vedere 2 proprietà
#body {background-image: url(http://img230.imageshack.us/img230/3573/spacexd3.jpg);
background-repeat: repeat; }
Visto che nel tuo caso vuoi replicare la stessa immagine sia sull'asse delle x che delle y in background-repeat setterai la proprietà repeat.
Le alternative sono, repeat-y , repeat-x, no-repeat
AzeveL # Wednesday, May 14, 2008 12:33:14 PM
ma non si puo' cambiare lo sfondo centrale?
come mi hai detto tu cambia solo lo sfondo ai lati
sirinSIRINisHERE # Wednesday, May 28, 2008 1:45:40 AM
capisco unpo l'italiano pero....ho capito questo...finalmente!!!
molto interesante che non ho capito nella mio lingua!!!
da vero!!!
(sorry for my bad italian:))))
God created italians to give joy to world!
Alfire # Wednesday, May 28, 2008 7:32:43 AM
Speravo di essere il più semplice possibile ma riuscire a far capire dove mettere le mani.
Aspetto il tuo nuovo Header!
ps
Il tuo italiano va benissimo!
Crimson HiouLostcanvasacolori # Tuesday, March 23, 2010 4:51:16 PM
quando clicco su 'costumize your design', mi compare la finestra dove mi dice di scrivere il codice css...
che devo scrivere esattamente per farmi comparire questo logo nel mio blog?
http://i44.tinypic.com/qs1dvo.jpg
me lo puoi mendare il codice con tutta la trascrizione che devo incollare? con questa immagine però...
e poi, che devo selezionare dopo tra le tre opzioni?
-Usa il mio CSS personale insieme al tema corrente
-Usa soltanto il mio CSS personale *
-Non usare il mio CSS personale