Layout

From Meta, a Wikimedia project coordination wiki

Introduzione[edit]

Dato che MediaWiki non supporta un cambio netto di header, footer e navigazione sinistra si può ovviare a questo creando una nuova navigazione da sostituire a quella esistente attraverso l'uso di tag HTML

e la modifica dei fogli CSS della skin da modificare. I
serviranno per creare il contenitore della nostra navigazione e per impostare il nome del componente al momento di usarlo attraverso i fogli di stile.

I fogli CSS serviranno per "spostare" i componenti all'interno della pagina.

Editare MySkin.php[edit]

All'interno del file .php della skin da modificare si può notare che la pagina è costruita attraverso vari
che permettono la visualizzazione di ogni singolo componente nella pagina.
Per questo tutorial capiremo come inserire un Header all'interno della pagina.

Il nostro header dovrà essere creato in HTML e inserito all'interno di un div in questo punto:


<div id="header">
    <font size="7">SPAZIO PER L'HEADER</font>
 </div>
 <div id="globalWrapper"></div>


Dove id="header" sarà il nome del tag CSS per l'header.

Creare MySkin/master.css[edit]

Il secondo step è quello di creare un foglio di stile dove inserire tutti le nostre modifiche alla pagina. Il foglio di stile verrà creato nella cartella MySkin (o nella cartella col nome della vostra skin), in questo caso lo chiameremo master.css .

Editare MySkin/master.css[edit]

All'interno del foglio di stile possiamo inserire questo tag per "sistemare" l'header all'interno della pagina.

/* header */
div#header {position:relative;top:0px; left:0px;}

il nostro header sarà così in alto a sinistra.

un esempio un pò più completo di formattazione CSS può essere questo:

/* header */
div#header {position:relative;top:30px; left:155px;}

/* Logo wikilastminute */ a#p-logo {position:absolute; top:0px;}
/* menu_header */ ul#menu_header {position:relative; top:132px;}
/* page_content */ div#content {position:relative;top:82px;}
/* left_nav */ div.portlet {position:relative;top:0px;}

in modo da avere l'header affiancato al logo con il corpo e la navigazione sinistra allineati tra loro.