Guida ai CSS

• Strumenti
• Capire il codice
• Trovare le posizioni delle classi
• Allineare gli sfondi dei due frame
• Trasparenza
• Spiegazione dei parametri di body
• Immagini della skin;
• Cambiare stile dei nomi delle Costruzioni, ricerche etc…
• Spaziare le celle delle tabelle
• Colore testi del menù
• Classi del CSS di OGame

Strumenti

Con il CSS, non c'è speranza, bisogna mettere mano al file formate.css tramite un editor di testo. Vi sconsiglio il blocco note di windows, perchè non permette il syntax highlighting, cioè la colorazione del codice, ma vi sconsiglio anche strumenti costosissimi e pesanti come Adobe Golive e DreamWeaver...

Procuratevi un editor di testo semplice, e freeware, con syntax highlighting; qua sotto potete trovare alcuni indirizzi utili:

• SciTe: Uno dei più diffusi editor per windows.
• Vim: Interfaccia spartana, ma leggero e potentissimo: oltre ai CSS edita molti altri tipi di file.
• TopStyle: Abbastanza grazioso per chi vuole un'interfaccia Windows-like.
• CoffeeCup: Editor gratuito.

Esistono anche editor CSS visuali, sia freeware che non, ma sinceramente ve li sconsiglio: il CSS di OGame è parecchio criptico come nomi delle classi, e non sarebbe facile navigare attraverso editor visuali con queste opzioni.

Qua si parla di CSS, ma dato che non c'è skin senza immagini, vi consiglio pure qualche programmino per la grafica, sempre freeware. Lo so che ci sono un sacco di persone che si scaricano Photoshop e lo crakkano, ma se ci sono validissime alternative gratuite, perchè rischiare? Se avete il computer a casa, fate pure, ma chi lo usa per andare in giro, chi rischia di essere controllato (es. uffici), farebbe meglio ad evitare...

• GIMP: Forse il miglior programma di grafica Freeware. Non arriva ai livelli di photoshop, ma a meno che non vi servano comandi avanzati neanche ve ne accorgerete.
• Pixia: Programma simpatico e più potente di quello che sembri.

Dopo questo, occorrono gli strumenti di Debug, che fortunatamente nel nostro caso sono i nostri browser!!! Il mio consiglio è di averli tutti e tre installati. In questa maniera troverete il vostro preferito, e vedrete come compare la skin su tutti i browser più supportarti. Se funziona su Firefox, non è detto che funzioni su Explorer :

• FireFox: Il mitico browser open-source, gratuito e aderente agli standard. Ha anche moltissime opzioni ed è estensibile con temi ed estensioni varie... una manna dal cielo!!!
• Opera: Browser che secondo me merita molta più popolarità... aderente agli standard, interfaccia amichevole e bellissima.
• Explorer: Non importa se amate FireFox. Non importa se sbavate per Opera. Explorer è ancora il browser più utilizzato, per cui dovrete fare i conti con lui quando editate un CSS.

Arrivati a questo punto, abbiamo veramente tutti gli strumenti che servono. Possiamo cominciare!!!

Capire il codice

Una volta aperto il CSS, ci si trova davanti una miriade di cose che sembrano senza significato. Naturalmente non lo sono, e il significato delle opzioni è anche più semplice di quello che si pensa. Sapete tutti che una pagina web è fatta in HTML, e che viene formattata tramite TAG di vario tipo: a serve per un link, table per creare una tabella e così via. Tramite il CSS noi attribuiamo certi valori a questi tag, in maniera tale che, ogni volta che li richiamiamo, le opzioni siano applicate in quella parte di codice.

Vediamo ad esempio il seguente pezzo di CSS:

th
{
text-align : center;
padding-left : 3px;
padding-right: 3px;
background-color : transparent;
background-image : url(img/bd1.png);
}

th è il tag HTML (corrispondente all'intestazione di tabella): ogni volta che richiamiamo th nel codice html, verranno applicate le opzioni del CSS, che sono racchiuse fra parentesi graffe, come potete vedere. Un buon sito dove trovare tutti i valori dei CSS si trova all'indirizzo http://www.w3schools.com/css/default.asp, dove troverete tutte le spiegazioni.

Importanti nel CSS sono anche le classi: in questa maniera possiamo applicare allo stesso elemento più opzioni, da utilizzare a seconda dei casi: per esempio, se vogliamo avere due classi per una tabella, possiamo esaminare il seguente codice d'esempio:

td.h
{
text-align : center;
color: #000000;
}

td.i
{
text-align : left;
color: #FFFFFF;
}

Ogni volta che vogliamo utilizzare la prima definizione di td (che definisce una cella di una tabella con testo centrato di colore nero) useremo td class=h, mentre se vogliamo utilizzare le opzioni della seconda istanza (che allinea a sinistra il testo, scrivendolo bianco), si utilizza td class=i.

Tuttavia non ci dobbiamo preoccupare di questo, perchè la pagina è già stata creata
Una volta detta questa breve panoramica, vediamo qualche suggerimento per il CSS:

Trovare le posizioni delle classi

Per sapere dove una determinata classe del CSS va ad agire, possiamo utilizzare FireFox.

Aprendo una pagina di OGame, selezioniamo con il mouse la parte di pagina che vogliamo modificare con il CSS, e clicchiamo con il pulsante destro del mouse. Fra le opzioni, possiamo vedere che ce n'è una chiamata Mostra sorgente selezione:



Una volta selezionato il comando, apparirà una finestra, dove compare solo la porzione di codice della selezione (estesa al minimo sindacale affinchè il codice abbia senso):



A questo punto si legge che la nostra selezione si basa sulla classe l, per cui possiamo andare a modificare quella come più ci piace!!!!!!

Allineare gli sfondi dei due frame

Come saprete, la pagina di OGame è divisa in due frame: quello a sinistra contiene il menù, mentre quello a destra contiene il gioco vero e proprio.

Gli stili per i corpi sono dati da questa porzione di codice:

body
{
color: #000000;
margin-top : 1px;
[CUT]
font-size: 11px;
font-family: Tahoma,sans-serif;
}

body.style
{
color: #000000;
margin-top : 1px;
margin-left: 1px;
background-color : #CCCCCC;
background-image : url(img/menu.jpg);
background-position: top left;
background-repeat: no-repeat;
font-family: Tahoma, sans-serif;
font-size: 11px;
text-align : left;
}

Se volete lo sfondo unico, dovete seguire i seguenti passi:

• Creare gli sfondi: nella cartella img della skin trovate i due file background.jpg e menu.jpg; il primo rappresenta lo sfondo principale, mentre il secondo lo sfondo del frame dei menù. Aprite con il vostro editor il file preferito, e tagliatelo in due, con la striscia sinistra che verrà chiamata menu.jpg, di larghezza pari a 190 pixel, e la restante, invece, background.jpg. State attenti che le due parti devono combaciare, in maniera che messe accostate ridiano l'immagine unica.
• A questo punto sostituite il file nella cartella img, e nel CSS trovate il codice relativo a body, e modificate l'opzione di background-position: top right; da top right a top left

In questo modo l'immagine verrà allineata a partire dalla sinistra, facendo combaciare le immagini.

Trasparenza

Per la trasparenza della tabella, io utilizzo le immagini trasparenti; prima di tutto, rendo trasparente lo sfondo della tabella, aggiungendo la seguente opzione background-color : transparent; nelle classi in cui voglio la trasparenza (come per esempio gil attributi di td, che sono le celle delle tabelle).

td
{
text-align : center;
padding-left : 3px;
padding-right: 3px;
background-color : transparent;
}

Ottengo così uno sfondo trasparente:



A questo punto con il vostro programma, create un'immagine di sfondo con abilitata la trasparenza: il formato migliore in questo caso è, a mio avviso, il png, perchè permette il gradiente di trasparenza, e supporta i colori 24 bit, al contrario del più semplice GIF. Ricordate di abilitare la trasparenza quando salvate l'immagine!!!

A questo punto, sempre negli attributi dell'elemento in cui volete aggiungere la trasparenza, aggiungete il seguente attributo : background-image : url(img/bd1.png);, dove all'interno delle parentesi dopo url impostate il percorso relativo dove avete memorizzato l'immagine (in questo caso l'ho salvata come bd1.png all'interno della cartella img della cartella della skin).

td
{
text-align : center;
padding-left : 3px;
padding-right: 3px;
background-color : transparent;
background-image : url(img/bd1.png);
}

A questo punto ricaricate la skin, e dovrebbe comparire la tabella in tutto il suo splendore, con l'immagine trasparente che avete scelto come sfondo:



Ovviamente potete sbizzarrirvi nell'immagine, comunque cercate di farla sempre abbastanza uniforme, per far riposare di più la vista, pur mantenendo un gradevole effetto.

Spiegazione dei parametri di body

Qua sotto vedrete un esempio degli attributi del tag body. I valori posso differire a seconda dei CSS, ma il significato dei tag rimane lo stesso. Vi posto proprio body perchè quasi tutti gli altri attributi degli altri tag definiti nel CSS sono inclusi qua, dato che questo tag rappresenta la parte più esterna della , pagina, cioè la parte più generale.

Accanto ad ogni attributo, quindi, vedrete i commenti con il loro significato, nella speranza che diventino un poco meno criptici...

/* Codice per lo stile del corpo principale */
body
{
color: #DDFFFF; /* Colore del testo */
margin-top : 1px; /* Margine superiore del testo */
margin-left: 1px; /* Margine sinistro del testo */
font-size: 11px; /* Dimensione del testo */
font-family: Tahoma,sans-serif; /* Font del testo */
background : #EEEEEE; /* Colore di sfondo */
background-image : url(img/background.jpg); /* Immagine di sfondo */
background-attachment: fixed; /* Lo sfondo non si muove con lo scrolling della pagina */
background-repeat: no-repeat; /* Ripetizione dello sfondo */
background-position: bottom left; /* Allineamento dell`immagine di */
scrollbar-arrow-color: #E6EBFB; /* Colore della freccia della barra di scorrimento */
scrollbar-base-color : #CCCCCC; /* Colore principale della barra di scorrimento */
scrollbar-track-color: #CCCCCC; /* Colora la parte sottostante della barra, dove si muove */
scrollbar-face-color : #CCCCEC; /* Colore della barra vera e propria */
scrollbar-highlight-color: #415680; /* Separatore fra barra e parte con le frecce */
scrollbar-3dlight-color: #344566; /* Parte tridimensionale che contiene le frecce */
scrollbar-darkshadow-color: #344566; /* Colore della parte esterna in ombra */
scrollbar-shadow-color: #415680; /* Ombra della barra */

Come potete vedere le cose non sono molto complicate, una volta che sono spiegate... I colori sono dati mediante codici esadecimali, come #00FF00, oppure possono essere dati anche con il nome inglese, se volete usare un colore comune (blue, purple...). Vediamo cosa possiamo mettere negli altri attributi, che vogliono qualcosa di diverso da un colore:

• margin-top, margin-left: rappresentano il margine del testo nella sua casella. Considerateli come le rientranze del paragrago (margin-left), e come lo spazio che deve starci fra la parte superiore dell'elemento che contiene il testo (spazio fra la parte superiore della cella e il testo). Lasciateli come stanno, altrimenti potreste avere problemi di formattazione.
• font-size, font-family; questi due attributi definiscono il tipo di carattere da utilizzare. Naturalmente col primo definite la grandezza del carattere, mentre con il secondo selezionate il carattere. Selezionate solo le opzioni più comuni, perchè qualche computer potrebbe non avere installato il font corretto: Times, Verdana, sans-serif, Tahoma sono i più usati, e dubito che abbiate bisogno di qualche altro tipo di carattere.
• background-image: specifica il file di background.Optate per un formato jpeg, e state attenti alla compressione: il file deve essere grande (consiglio almeno 1200*1200), ma deve essere anche relativamente leggero da caricare. Azzardate un poco con la compressione, tanto non dovete stampare l'immagine...
• background-attachment: mettete fixed se volete che l'immagine resti ferma mentre scorrete la pagina. Nel (raro) caso in cui volete far scorrere pure l'immagine di sfondo, impostate quest'attributo su scroll.
• background-repeat: specifica se durante lo scrolling, la pagina deve essere ripetuta. Nella quasi totalità dei casi avremo immagini grandi e fisse, per cui non lasceranno spazio nello schermo, e possiamo anche lasciarli il valore no-repeat. Nel caso vogliate far scrollare l'immagine, sarà opportuno impostare questo valore in maniera tale che l'immagine si ripeta almeno nell'asse y, con repeat-y; con repeat-x si ripete solo nell'asse x, mentre con repeat si ripete in entrambi gli assi.
• background-position: quest'attributo permette di specificare l'allineamento dell'immagine. Si decide da quale sua parte vogliamo che sia visualizzata; è imporante perchè, dato che di solito l'immagine di background è più grande dello schermo, si decide in questo modo quale parte deve essere visualizzata, e quale invece può essere tagliata fuori. Ci sono varie opzioni, e le più comuni sono queste:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

con top right per esempio, l'immagine sarà allineata a partire dall'angolo superiore destro dello schermo, per cui sarà tagliata l'evenuale zona inferiore e sinistra.

Immagini della skin

Come sapete bene, il CSS è bello, ma senza immagini si fa ben poco.

Le immagini delle Costruzioni, delle navi etc si trovano all'interno della cartella gebaeude: il loro nome non è chiarissimo... in effetti è solo un numero.

Per questo, qua sotto vi posto la lista delle immagini di questa cartella, con il corrispondente nome per i comuni mortali, in maniera tale da rendervi più chiara la loro identificazione, specialmente nel caso che non siate ancora così avanti nel gioco da poter vedere tutte le immagini.

Costruzioni

• 1: Miniera di Metallo
• 2: Miniera di cristallo
• 3: Sintetizzatore di deuterio
• 4: Centrale solare
• 12: Centrale a fusione
• 14: Fabbrica dei robot
• 15: Industrue nanotecnologiche
• 21: Cantiere Spaziale
• 22: Deposito metallo
• 23: Deposito cristalli
• 24: Cisterna deuterio
• 31: Laboratorio di ricerca
• 33: Terraformer
• 34: ACS
• 41: Avamposto lunare
• 42: Falange di sensori
• 43: Portale iperspaziale
• 44: Base missilistica

RICERCHE

• 106: Tecnologie spionaggio
• 108: Tecnologia informatica
• 109: Tecnologia delle armi
• 110: Tecnologia degli scudi
• 111: Tecnologia delle corazze
• 113 : Tecnologia energetica
• 114: Tecnologia iperspaziale
• 115: Propulsore a combustione
• 117: Propulsore ad impulso
• 118: Propulsore iperspaziale
• 120: Tecnologia dei laser
• 121: Tecnologia ionica
• 122: Tecnologia dei plasmi
• 123: Rete interplanetaria di ricerca
• 199: Tecnologia gravitonica

NAVI

• 202: Nave cargo piccola
• 203: Nave Cargo pesante
• 204: Caccia leggero
• 205: Caccia pesante
• 206: Incrociatore
• 207: Navi da guerra
• 208: Nave colonizzatrice
• 209: Nave riciclatrice
• 210: Sonda spia
• 211: Bombardiere
• 212: Satellite solare
• 213: Corazzata
• 214: Morte nera

DIFESE

• 401: Lancia-missili
• 402: Laser leggero
• 403: Laser pesante
• 404: Cannone gauss
• 405: Cannone ionico
• 406: Cannone al plasma
• 407: Cupola-scudo piccola
• 408: Cupola-scudo grande
• 502: Missili anti-balistici
• 503: Missili interplanetari

Cambiare stile dei nomi delle Costruzioni, ricerche etc…

Quando ci troviamo nella finestra delle Costruzioni, difese, Cantiere Spaziale e ricerca, notiamo che abbiamo lo stesso stile, nella descrizione, per il titolo ed il testo. Non sono state definite due classi diverse, per cui sembrerebbe che non possiamo cambiare il colore del titolo rispetto a quello del testo... Ma si può fare …

Partiamo dall'originale:



Dobbiamo notare che il titolo, in realtà non è del semplice testo, ma è un link. Per questo possiamo differenziarlo dal resto della scritta all'interno della cella. Ora, possiamo specificare tramite CSS lo stile di determinate posizioni. Per esempio, possiamo dire colora di verde il link che si trova all'interno di una cella di una tabella annidata; quello che vogliamo fare noi consiste nel colorare un link all'interno della cella del tbody.

Se andiamo a vedere il sorgente, notiamo che il link è all'interno di un td, all'interno di un altro td, all'interno di tbody. Di conseguenza dobbiamo specificare la posizione del link da modificare: per fare ciò dobbiamo aggiungere al CSS (preferibilmente alla fine), le seguenti righe:

tbodytdtd > a:first-child {
font-size: 11px;
color: #CB3434;
}

Ovviamente all'interno delle parentesi potete mettere tutti gli attributi che volete...

Ed otteniamo il seguente risultato...



Tuttavia c'è un inconveniente che ancora non sono riuscito a risolvere.
Il suddetto codice modifica anche il testo verde che spunta accanto (Porta a livello X). Tuttavia non cambia il colore, perchè è definito all'interno della pagina HTML, però modifica altri attributi, come il testo ed il tipo di carattere. Limitatevi al colore, oppure vedete se le modifiche vanno bene anche per il linik verde. Comunque non dovreste avere problemi.

Spaziare le celle delle tabelle

Ho appena scoperto un interessante effetto, che può interessare chi cerca qualcosa di diverso per il menù. Andiamo a vedere un menù normale:



Tutto va bene...

Adesso aggiungete (sempre verso la fine) le seguenti righe di codice:

body.style table {
margin-top : 15px;
border-collapse: separate;
border-spacing : 5px;
}

E vedete quello che succede ora...



Cos'è successo? prima di tutto, attraverso body.style table abbiamo selezionato solamente la tabella della parte sinistra (altrimenti, usando solo table, avremmo selezionato entrambe le tabelle, cosa che potete fare, se volete); a questo punto, mediante l'attributo border-collapse : separate; abbiamo detto al browser che la tabella ha le celle separate, in maniera da poter usare l'attributo border-spacing : 5px; abbiamo deciso quanto spazio deve esserci fra le celle della tabella. Questo può essere utile nel caso vogliate un particolare sfondo per la tabella del menù.

Colore testi del menù

In realtà quelli non sono testi normali, ma sono link, per cui devi cambiare gli attributi dei link... guarda qua:

.style div a
{
height : 100%;
width: 100%;
color: #CCFFFF;
font-size: 11px;
font-family: Tahoma,sans-serif;
}

.style div a:link
{
height : 100%;
width: 100%;
color: #DDFFFF;;
font-size: 11px;
font-family: Tahoma,sans-serif;
}

.style div a:visited
{
height : 100%;
width: 100%;
color: #DDFFFF;
font-size: 11px;
font-family: Tahoma,sans-serif;
}

.style div a:hover
{
background-color : #000099;
height : 100%;
width: 100%;
text-decoration: none;
font-size: 11px;
font-family: Tahoma,sans-serif;
color: #BBBBBB;
}

questi sono quelli da modificare per cambiare il testo:

• link: rappresenta lo stile del link normalmente visualizzato
• visited: rappresenta lo stile che deve assumere il link quando è visitato. Consiglio caldamente di mettere le stesse impostazioni che avete messo per link, se volete che la tabella appaia sempre in modo uniforme
• hover: rappresenta lo stile che assume il link quando ci si passa sopra con il mouse: da qui c'è l'effetto di evidenziazione del link

Cambiate l'attributo color all'interno di questi tre comandi... quello senza pseudoclass (che sono le parole che vi ho detto) dovrebbe entrare in funzione solo quando uno dei tre non è definito, ma per sicurezza mettetelo pure... Ovviamente potete anche modificare la dimensione del testo e tutto quello che volete, con i soliti attributi...

Per esempio, qua sotto potete vedere la tabella della Cataclysm:



E qua potete vedere il risultato quando tutti gli attributi color di sopra sono impostati su red

Classi del CSS di OGame

Classe = b

messaggi nella pagina Messaggi

Classe = c

Intestazione delle varie tabelle: nome giocatore, Eventi, Tecnoligia, Intestazione alleanza etc. (dovrebbe specificare pure la tebella in generale, in mancanza di classe l, come nella tabella della pagina flotta)

Classe = l

Tabelle delle Costruzioni, ricerche, tecnologia, flotta, difese (probabilmente la classe più importante). pulsanti ed input per passare da un sistema all'altro nella pagina della galassia

Classe = s

Celle che contengono le miniature dei pianeti nella destra della pagina principale

Classe = k

Prodotto base e Capacità deposito nella pagina delle risorse (anche il pulsante calcola); link di upgrade di ricerca nella pagina delle ricerche (la cella che contiene ricerca di livello X, quella più a destra), e celle dove immettere le navi da costruire nella pagina del Cantiere Spaziale

Classe = z

Tempo rimanente nella produzione attuale (la frase che sopra la coda di costruzione dice, per esempio, Laser leggero 0:02:00)

Torna Su

Questa guida è tratta da quella pubblicata da _Egrigori sul forum di OGame.it