• J
    Super User •

    [Guida] mkportal (Seconda parte)

    Guida su mkportal (Seconda parte)

    Questa Guida è stata realizzata con il contributo di: cangianos

    Cosa e? il css

    Ora possiamo modificare il file css che è il foglio di stile che gestisce l'aspetto delle skin di mk ed è presente in ognuna di queste.
    Tutti gli elementi 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 e il blocco dichiarazioni racchiude gli elementi compresi fra parentesi graffe che danno il comando per gli elementi grafici e sono composti da proprietà e valori, esempio:

    Un esempio di css è il seguente, scaricato dal sito www.webinweb.net . La particolare di questo css è che è semplificato e permette una più facile modifica:
    /*
    +--------------------------------------------------------------------------

    Cascading Style Sheet for MKportal "default" Portal Template
    by Meo aka Luponero [Amedeo de longis]
    visiblesoul [Don K. Colburn]
    (c) 2004-2005 mkportal.it
    http://www.mkportal.it
    Email: [email protected]

    +--------------------------------------------------------------------------
    | > MKPortal
    | > Written By Amedeo de longis
    | > Date started: 9.2.2004
    +--------------------------------------------------------------------------
    */

    /*======================================================================
    MKP STYLE BY ONIZUKA88 www.webinweb.net

    Questo file css è stato editato per renderlo più comodo alla costruzione
    di nuove grafiche. Qualsiasi utente è libero di farne libero uso nella
    propria skin purchè mantenga questa scritta.
    ========================================================================*/

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

    /---------------------->
    Wrapper del portale
    <----------------------    /
    #mkwrapper {
    text-align:left; /* left-align text in IE */
    margin: 0px auto 0px auto;
    }

    /---------------------->
    logostrip
    <----------------------    /
    #mklogostrip {
    background-color: #8cb6e7;
    text-align: left;
    }

    /---------------------->
    Immagini generali
    <----------------------    /
    img {
    border: 0px;
    }

    /---------------------->
    Tabelle e celle generali
    <----------------------    /
    table,
    tr,
    td,
    .tdglobal {
    font-size: 10px;
    color:;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    /---------------------->
    Tabella principale del portale
    <----------------------    /
    .tabmain {
    margin:0px;
    padding:0px;
    background-color: #ffffff;
    color:;
    border: 1px solid #5c88c8;
    }

    /---------------------->
    Tabelle e celle dei blocchi
    <----------------------    /
    /* header/footer angolari dei blocchi */
    .tdmenblock {
    font-size: 0px;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
    background-color:#8CB6E7;
    }

    /* celle dei blocchi */
    .tdblock {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin: 2px;
    background-color: #dfe6ef;
    color: #496c9f;
    }

    /* tr dove sta il titolo */
    .sottotitolo {
    vertical-align: bottom;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-color:#8CB6E7;
    color:;
    }

    /* Usata nel functions.php (function main_page) */
    .blocks {
    padding: 0px;
    }

    /* spazio orizzontale tra i blocchi */
    .tdspacer {
    line-height: 3px;
    }

    /---------------------->
    Altre tabelle di blocchi e moduli
    <----------------------    /
    .tablemenu {
    background-color:;
    color:;
    border:1px solid;
    }

    /* Links del testo dei blocchi */
    .tablemenu a:link, a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:;
    text-decoration: none;
    }

    .tablemenu a:hover {
    text-decoration: underline;
    }

    .tablemenu a:active {
    text-decoration: none;
    }

    .modulecell {
    background-color:;
    color:;
    }

    .moduleborder {
    background-color:;
    color:;
    }

    .modulex {
    background-color: #f1f5f8;
    height: 25px;
    }

    th.modulex {
    color:;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: !important;
    background-image: none !important;
    height: 25px;
    white-space: nowrap;
    }

    /* Descrizione delle categorie in Downloads, recenzioni ecc.. */
    .modulelite {
    font-size: 8pt;
    color:#a6bbcd;
    }
    .tabnews {
    background-color:;
    color:;
    border: 1px dashed #c6ddf3;
    margin:0px;
    padding:0px;
    font-size: 10px;
    }

    .navigatore {
    background-color:;
    color:;
    vertical-align: bottom;
    text-align: right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 9px;
    }

    .taburlo {
    background-color:;
    color:;
    border: 1px solid;
    }

    .urlo {
    background-color:#8CB6E7;
    color:;
    line-height: 18px;
    vertical-align: bottom;
    text-align: left;
    font-weight: bold;
    font-size: 11px;
    padding: 4px;
    }

    .urlo2 {
    background-color:;
    color:;
    border: 1px solid;
    padding: 4px;
    border-width: 0 0 1px 0;
    border-style: solid;
    text-align: left;
    color:;
    font-size: 11px;
    font-weight: bold;
    }

    div.taburlo {
    width: 100%; /* centrale in IE */
    }

    td.taburlo{
    margin:5px;
    padding:5px;
    border: 0;
    }

    /* Colore di contrasto del'utente che ha urlato */
    .urlocontrast {
    color:;
    }

    .trattini {
    background-color:;
    color:;
    border-width: 1px 0 0 0;
    border-top-style: dashed;
    border: 1px solid;
    }

    .trattini2 {
    border-width: 0 1px 0 0;
    border-right-style: dashed;
    border: 1px solid;
    }

    .trattini3 {
    border-width: 0 0 1px 0;
    border-bottom-style: dashed;
    border: 1px solid;
    }

    /---------------------->
    Links generale
    <----------------------    /
    a:link,
    a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:;
    text-decoration: none;
    }

    a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:;
    text-decoration: underline;
    }

    a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:;
    text-decoration: none;
    }

    /---------------------->
    Links dei blocchi, dei moduli e della navbar
    <----------------------    /
    a.uno:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color:;
    font-weight: bold;
    text-decoration: none
    }

    a.uno:visited {
    font-size: 10px;
    color:;
    font-weight: bold;
    text-decoration: none
    }

    a.uno:hover {
    font-size: 10px;
    color:;
    font-weight: bold;
    text-decoration: underline;
    }

    /* Colori di contrasto di testo e links */
    .mktxtcontr,
    a.mktxtcontr:link,
    a.mktxtcontr:visited {
    color: #ff0000;
    font-weight: bold;
    text-decoration: none;
    }

    a.mktxtcontr:hover {
    font-weight: bold;
    text-decoration: underline;
    }

    /* Colori di contrasto di testo e links 2 (admin) */
    .mktxtcontr2,
    a.mktxtcontr2:link,
    a.mktxtcontr2:visited {
    color: #0000ff;
    font-weight: bold;
    text-decoration: none;
    }

    a.mktxtcontr2:hover {
    font-weight: bold;
    text-decoration: underline;
    }

    /---------------------->
    Stile dei form
    <----------------------    /
    input,
    textarea,
    select,
    .bgselect, /* campi input /
    .mkbutton /     bottoni di "invio" generali */
    {
    background-color:;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color:;
    vertical-align: middle;
    }

    /* Bordo bottone */
    .blsubmit,
    .mkbutton {
    border: 2px #9cf outset;
    }

    /* Bottoni radio/checkbox */
    .mkradio {
    background-color: transparent;
    border: 0px;
    }

    /* Textarea dei blog /
    textarea.mkwrap1 {
    overflow: auto;
    /     width: 230px; */
    width: 100%;
    }

    /* Text area dei blog in edit */
    textarea.mkwrap2 {
    overflow: auto;
    width: 500px ;
    }

    /* Input dei blocchi */
    .mkblkinput {
    background-color:#fff;
    font-size: 9px;
    border: 1px dashed #808080;
    margin: 2px;
    }

    /* Padding del blocco centrale (news, admin) */
    .contents {
    padding: 10px;
    }

    /* module pagination links */
    .mkpagelink {
    background-color: #f0f5fa;
    border: 1px solid #072a66;
    padding:1px 3px 1px 3px;
    color: #000;
    font-weight: normal;
    }

    .mkpagelinklast {
    background-color:;
    border: 1px solid;
    padding:1px 3px 1px 3px;
    color:;
    font-weight:normal;
    }

    .mkpagecurrent {
    background-color: #ffc9a5;
    border: 1px solid;
    padding:1px 3px 1px 3px;
    color:;
    font-weight:normal;
    }

    /---------------------->
    Altre classi secondarie
    <----------------------    /
    /* Titoli del pannello admin */
    .titadmin {
    margin: 0px;
    font-weight: bold;
    font-size: 11px;
    color:;
    border-top: 1px dashed;
    }

    .mkerror {
    font-size: 12pt;
    color:;
    font-weight:bold;
    }

    /* Testo quotato */
    .mkquote {
    color:;
    }

    /* MKPGallery modulo ecard, pagina offline */
    .ecardtitle,
    .offlinetxt {
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    }

    /---------------------->
    Testo bbcode dei testi quotati
    <----------------------    /
    .mkquoteball {
    font-size: 9px;
    color:;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-color:;
    padding: 0;
    }

    .mkquotetext {
    font-size: 10px;
    color:;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-color:;
    margin: 0;
    padding: 0;
    }
    table .mkquotetable{
    width: auto; /* IE */
    text-align: left;
    }

    Con le sole modifiche della cartella immagini, del file ?tpl_main.php? e del file style.css riuscirete a dare un?aspetto personale al vostro sito.

    Modifiche successive:

    Installato mkportal e forum e realizzata una buona skin, il passo successivo sono le altre piccole modifiche per rendere sempre più professionale il nostro sito.

    Inserire il copyright:
    Ecco come inserire le tue righe di copyright e crediti a fondo pagina (ricorda di lasciare integri quelli di mkportal), aprite il file ./mkportal/include/function.php
    Cercate la seguente variabile:

    
 function footer () {
        global $Skin, $DB;
        //Close content area
        $output = $Skin->close_body();
        //Close main wrapper
        $output .= $Skin->close_main();
        $ttime = $this->etimer();
        //footer WARNING YOU CANNOT REMOVE OR MODIFY THIS COPYRIGHT CODE.
        // ATTENZIONE E' VIETATO TOGLIERE O CAMBIARE LA STRINGA DEL COPYRIGHT !!
        $foot_logo = ($this->config['foot_logo'] == 1) ? "<img src=\"{$this->template}/images/loghino.gif\" alt=\"\" /><br />" : '';
        $foot_version = ($this->config['foot_version'] == 1) ? " {$this->config['mk_version']}" : '';
        Inserite qui le vostre righe di copyright
        $copy = $foot_logo.'<span class="mkcopyright" style="font-size: 10px"><a style="font-size: 10px" href="http://www.mkportal.it/" target="_blank">MKPortal</a>'.$foot_version.' &copy;2003-2008 <a style="font-size: 10px" href="http://www.mkportal.it/" target="_blank">mkportal.it</a></span>';
        
        //debug
        if ($this->config['foot_debug'] == 1) {
            $copy .= "<br /><span class=\"mkcopyright\">".$this->lang['debugout1']." ".$ttime." ".$this->lang['debugout2']." ".$DB->query_count." ".$this->lang['debugout3']."</span>";
        }
        $output .= $Skin->view_footer($copy);
        return $output;
    }
```Eliminare le frecce di chiusura laterali ( sono quelle frecce che permettono agli utenti di chiudere i menù a lato)

E' possibile eliminare le frecce che consento all'utente di chiudere le colonne di destra e sinistra se non servono...
La modifica viene applicata cambiando il file tpl_main.php della skin in uso; bisogna trovare
Codice:

    <!-- begin left column -->

        <td id="menusx" valign="top" align="left">
    <div id="menucontents" style="$mklib->menucontents">
    <div style="text-align:right;"><a href="java script:ColumnClose('menusx');MemoPos('MKmenusx', '1');"><img src="$mklib->images/f2.gif" border="0" alt="" /></a>&nbsp;</div>-->
      <table cellpadding="0" cellspacing="2" border="0" style="width: {$mklib->columnwidth}px;">
      {$blocks}
      </table>
    </div>
    <div id="menucloseds" style="$mklib->menucloseds">
    <div style="text-align:right;"><a href="java script:ColumnOpen('menusx');MemoPos('MKmenusx', '0');"><img src="$mklib->images/f1.gif" border="0"  alt="" /></a></div>    -->
    </div>
    </td>

    <!-- end left column -->

    Codice:

    <!-- begin left column -->

        <td id="menusx" valign="top" align="left">
    <div id="menucontents" style="$mklib->menucontents">
    <!--<div style="text-align:right;"><a href="java script:ColumnClose('menusx');MemoPos('MKmenusx', '1');"><img src="$mklib->images/f2.gif" border="0" alt="" /></a>&nbsp;</div>-->
      <table cellpadding="0" cellspacing="2" border="0" style="width: {$mklib->columnwidth}px;">
      {$blocks}
      </table>
    </div>
    <div id="menucloseds" style="$mklib->menucloseds">
    <!--<div style="text-align:right;"><a href="java script:ColumnOpen('menusx');MemoPos('MKmenusx', '0');"><img src="$mklib->images/f1.gif" border="0"  alt="" /></a></div>    -->
    </div>
    </td>

    <!-- end left column -->

    Codice:

    <!-- begin right column -->

    
E' possibile cambiare automaticamente il titolo della pagina (quello che appare in alto accanto al nome del sito) quando si visualizzano le pagine interne al portale.
Tale modifica va effettuata sul file modules/contents/index.php
Modificare
Codice:

    $mklib->printpage("1", "0", $mklib->sitename, $blocks);

    Codice:

    $mklib->printpage("1", "0", $title_page, $blocks);

    Codice:

    $mklib->printpage("1", "1", $mklib->sitename." - ".$title_page, $blocks);

    
Come realizzare un modulo nuovo per mkportal:

Come prima cosa decidiamo il nome del nostro modulo.
Prendiamo il caso che io voglio creare una sezione del sito
visibile solo agli utenti registrati in cui compaia la scritta:
"Informazioni riservate, solo gli utenti registrati possono accedere" e decido di chiamare il modulo
"privato". Devo seguire i seguenti passi:

- Creo una directory in /mkportal/modules e la chiamo privato

- Inserisco nella directory un file chiamato index.php con il
seguente contenuto:

    <?

    if (!eregi("index.php", $_SERVER['PHP_SELF'])) { die ("Spiacente !! Non puoi accedere al file."); }

    if(!$ibforums->member['id']) {
    $message = "Solo gli utenti registrati possono accedere a questa sezione, registrati sul nostro portale";
    $mklib->error_page($message);
    exit;
    }

    $output = " Informazioni riservate, solo gli utenti registrati possono accedere";

    $mklib->printpage("1", "1", "Area privata", $output);

    ?>

    Per accedere al modulo basta andare all'indirizzo
tuoportale/index.php?ind=privato

Non vi resta che aggiungere il link al nuovo modulo nel Menu
principale o dove altro volete.

Per chi non conosce il codice, vi spiego alla lettera cosa abbiamo fatto
La prima riga è standard e non fa altro che fare in modo che non si possa accedere
a questo file da fuori del portale e mediante un accesso diretto.

Il Blocco "if" che viene subito dopo controlla se l'utente che sta accedendo
alla pagina abbia un id o meno. Se non ha nessun id vuol dire che non èè¨ un
utente registrato e quindi il codice chiama la funzione standard della pagina
di errore di Mkportal passandogli il messaggio che deve venire visualizzato e
poi interrompe l'esecuzione dello script. Se invece l'utente ha un id ed è quindi
registrato l'errore non viene richiamato e il codice prosegue.

Andiamo alla riga successiva:

    $output = " Informazioni riservate, solo gli utenti registrati possono accedere";

    Andiamo all'ultima riga:

    $mklib->printpage("1", "1", "Area privata", $output);

    Questa funzione come si evince ha 4 argomenti
I primi due argomenti rappresentano la visualizzazione dell'apertura delle colonne
laterali del portale.
Se sono impostati ad uno come in questo caso le colonne si comportano normalmente
e cioè seguono il normale meccanismo di MKportal.
Tuttavia se volete, come ad esempio nella chat, che la pagina che state per stampare
sia forzata a chiudere le colonne potete settare i due parametri a "0".
Il terzo parametro rappresenta il titolo della pagina.
Nel nostro caso quindi comparira in alto nella barra del Browser "Area privata".
Il quarto parametro rappresenta il contenuto della pagina. Quello cioè che vi compare
al centro. In questo caso comparirà quello che abbiamo assegnato alla variabile
$output e cioè la frase
"Informazioni riservate solo gli utenti registrati possono accedervi?:

Partendo da questi principi base si può realizzare qualcosa di più impegnativo.

Fatte queste modifiche avete già tutto il necessario per personalizzare il vostro sito con mkportal, se non sei contento dei moduli base ne puoi scaricare altri dal sito ufficiale.
Non resta che augurarti buona creazione ed in bocca al lupo per il tuo nuovo sito.
    0
Effettua l'accesso per rispondere