• Super User

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

    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.

    [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 */ 
    

    }[/php]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.