In questa lezione esaminiamo la struttura dei due fogli di stile, "default.css" e "addon.css" per ottenere degli effetti personalizzati.
default.css
Per modificare i file, innanzi tutto dovremmo aprirli con un editor di testi. Cominciamo ad esaminare le parti principali del codice di "default.css".
html, body {
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:left;
font-size:1.0em;
color: #999999;
background-color: #D6DFEF; background-image: url(sfondo.jpg);
background-repeat: repeat-x; background-position: top;
}
Definiamo i margini delle pagine, i font da utilizzare, il tipo di allineamento, la grandezza del carattere, il colore del carattere, il colore e l'immagine di sfondo, il numero di volte che lo sfondo deve essere ripetuto all'interno della stessa pagina e la sua posizione.
Dalla lista dei font sarà scelto il primo, ma qualora non fosse presente nel personal computer dell'utente, sarà visualizzato il secondo e cosi via, qualora non ve ne fosse presente nessuno, sarà visualizzato il font "Times New Roman".
Questo codice, serve invece a personalizzare la struttura della tabella del nostro tema di ASPNuke:
table,td { border-style:none; }
table { width:100%; margin:0px; border-collapse:collapse; }
td { padding:0px; vertical-align:top; }
Il codice:
a { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; color: #999999; }
serve a personalizzare il colore dei i link e ad assegnare l'effetto di sottolineatura e cambiamento del colore al passaggio del mouse (in gergo definito "Mouse Hover").
Per specificare la grandezza del font utilizzato in quasi tutti i box, modifichiamo:
.small { font-size: 9px; }
Per la personalizzazione del testo di alcuni messaggi, ad esempio il messaggio di benvenuto della home page usiamo modifichiamo la classe "infoPage":
.infoPage { font-size: 11px; font-weight: bold; color: #A5BADC; background-color: #FFFFCC; }
Per modificare la grafica dei campi usiamo:
.cell {
padding: 0 2px 0 2px;
font-size: 11px;
font-weight: normal;
color: #333333;
border: 1px solid #A5BADC;
}
Se invece vogliamo personalizzare la grafica del testo relativo al copyright del nostro sito, dobbiamo modificare la riga:
.copyright { font-size: 10px; }
Personalizziamo i bottoni:
.button { font-size: 11px; font-weight: bold; }
L'intestazione delle pagine web:
.topbanner { border: medium none;
font-size: 10px; text-align: center;
background-color: #A5BADC; background-image: url(bg.png); }
Il codice:
.tableline1 { border: maroon thin;
font-size: 11px; text-align: left;
color: #666666; background-color: #F6F8FB; }
.tableline1 a { }
.tableline2 {
font-size: 11px;
text-align: left;
border-right: #F6F8FB 1px solid;
border-top: #F6F8FB 1px solid;
color: #666666;
}
.tableline2 a { }
.tablelinemain { font-size: 11px; text-align: left; text-indent: 2px;
color: #333333; background-color: #E6F2FF; }
.tablelinemain a { font-size: 10px;
color: #000000; }
serve a personalizzare le linee delle tabelle presenti nelle nostre pagine web, permettendo una organizzazione più compatta ed usabile (oltre che leggibile) dei contenuti per gli utenti.
Il codice:
.normal { list-style: square; font-size: 11px; text-align: justify; }
serve a definire il testo di default del nostro sito.
Per definire le caratteristiche delle tabelle di ASPNuke:
.myTable {
border: 1px solid #D6DFEF;
list-style: square;
font-size: 11px;
text-align: justify;
background-color: #FFFFFF;
font-style: normal;
}
Per definire le intestazioni delle tabelle:
.myTitle { font-size: 12px; font-weight: bolder; letter-spacing: 2px;
text-align: left; text-indent: 5px;
color: black; background-color: #E1E8F3; }
Per la personalizzazione delle righe e delle colonne delle tabelle:
.myTr { background-color: #ffffff; }
.myTD { padding: 3px; }
Per personalizzare il testo citato (abbiamo parlato di come citare il testo nella lezione relativa all'inserimento degli articoli) modifichiamo la riga:
.myQuote { border: 1px solid #000000; padding: 3px;
font-size: 11px; text-align: justify;
background-color: #fff8dc; }
La riga:
#TopPage { height: 60px; }
ci permette, mediante l'utilizzo degli ID delle tabelle, di definire le caratteristiche di ogni tabella.
#MainPage { height: 60px; }
Ci permette di personalizzare il corpo delle tabelle.
#Display { height: 450px; }
Serve a definire il centro della pagina, dove di solito vanno inseriti i contenuti della pagina.
addon.css
Adesso apriamo il file "addon.css" e ne analizziamo brevemente il codice:
h6 {
background-color: #fff8dc;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-top: #000000 1px solid;
font-size: 12px;
font-weight: normal;
font-family: verdana;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: justify;
text-decoration: none
}
questa porzione di codice, ci permette di definire le dimensioni e le caratteristiche del tag HTML <h6>.
Questa porzione di codice (è un po' lunga e la visualizziamo in un'altra pagina) ci permette di personalizzare interamente il calendario del nostro sito Web.
Questa parte invece serve a personalizzare il rounbox.
Questa ultima porzione di codice ci permette invece di personalizzare totalmente l'aspetto grafico della barra degli strumenti (toolbar).
Se troviamo qualche difficoltà a capire delle parti del codice CSS possiamo trovare aiuto nella Sezione CSS di HTML.it
Una volta individuate le parti da modificare non facciamo altro che dar sfogo alla nostra creatività.
