Alfire world

Di tutto un po...

Tutorial per Blog opera: Titoli con CSS

, , ,

Dopo tanto tempo torno a scrivere su questo blog. smile 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
  1. Clikkate su MyPage e poi su il link My account
  2. Clikkate Design
  3. Cliccate su custom style sheet, il link appena sotto il titolo
Qua potrete inserire i CSS utente che andranno a sovrascriversi allo stile di default.
#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!

American showAppunti di HTML per i Css

Comments

Unregistered user Tuesday, May 13, 2008 2:17:21 PM

Giuan writes: Figa! Si vede che non hai una mazza da fare al lavoro...

Alfire Tuesday, May 13, 2008 3:24:08 PM

holà Giuan!scherzi a parte oggi mi sto strangolando di lavoro... smile

AzeveL Tuesday, May 13, 2008 3:30:49 PM

ciao ma come si fa a cambiare lo sfondo dell'intera pagina?
;-Q

Alfire Tuesday, May 13, 2008 4:07:44 PM

sarà una delle prossime lezioni.
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

ho scritto
#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

non funziona giustamente! smile
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

ciao Alfire smile

ma non si puo' cambiare lo sfondo centrale?
come mi hai detto tu cambia solo lo sfondo ai lati sad

sirinSIRINisHERE Wednesday, May 28, 2008 1:45:40 AM

grazie grazie grazie!!!
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!party
jester sirin

Alfire Wednesday, May 28, 2008 7:32:43 AM

prego!Grazie a te per i complimenti.

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

scusami..

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

Write a comment

New comments have been disabled for this post.