[Guida] Strumenti per muovere i primi passi con la grafica di mkportal

[JACK1971]

Strumenti per muovere i primi passi con la grafica di mkportal

Questa Guida è stata realizzata con il contributo di: cangianos

Ecco gli strumenti utili per modificare mkportal.

Prima di cimentarsi nella creazione o modifica dell'aspetto estetico del vostro sito, dovete procurarvi i seguenti strumenti:
assicuratevi di avere un'editor per i file CSS e uno per file php,
I file e le cartelle che compongono le parti grafiche di mkportal li trovate seguendo il percorso mkportal/templates all'interno della cartella templates troverete le cartelle "forum" e "default" ed eventuali altre cartelle se avete installato skin di altri autori.

Ecco la spiegazione delle cartelle contenuto nella directory o skin che prendiamo come esempio la "default"

cartella/images [tutte le immagini che compongono la grafica del tuo sito]
style.css [stile del sito, cioè i colori dei link, i caratteri ecc.. ]
tpl_main.php [la colonna portante del portale, praticamente è la base del codice]
index.html [E' la pagina che carica tutta la skin]
mkp.js [il file che contiene gli script]


Questi file messi insieme, ( non deve mancare nessuno) compongono la veste grafica del tuo sito, per cominciare le prime modifiche basta prendere solo i due seguenti file:
style.css
tpl_main.php ( modifica rivolta a chi ha igà esperienza di codice html )

le immagini invece le potrete direttamente modificare a vostro piacere con un qualsiasi editor grafico.

Il foglio di stile css, solitamente in mkportal "style.css, lo si può trovare in tutte le cartelle delle skin ed è fondamentale per le prime modifiche e per dare un aspetto più personale al proprio sito

Il foglio di stile è composto in elementi, questi ultimi all'inteno del css possono essere classificati in due categorie:

Il Selettore e il Blocco Dichiarazioni

Il selettore serve a definire quali elementi della skin verà applicata la regola del css ( se per esempio vogliamo che il colore di testo blu o altro venga utilizzato solo per alcuni meù) e il blocco dichiarazioni che racchiude gli elementi compresi fra parentesi graffe che danno il comando per gli elementi grafici e sono composti da proprietà e valori, esempio:

Per farvi capire come è strutturato il file css, che all'inizio può sembrare complicato, postiamo la sua struttura.

Codice PHP:

/*---------------------->

Body della pagina web

<----------------------*/

body {
                                                     
    background-color: #efefef;

     font-size: 10px; 

    color: #666666; 

    font-family: Verdana, Arial, Helvetica, sans-serif; 

    margin:0px; 

    padding:0px; /* Opera 0 margin */    

    text-align: center; /* center in IE */ 

} 


Come avete visto abbiamo colorato il primo blocco che compare nel file style.css per farvi capire come è strutturato l'intero foglio. Il colore rosso e il "Selettore" il colore blu è il "Blocco DIchiarazioni". Tanti blocchi di seguito compongono l'intero foglio.