Creare una Cover page con flatnuke

di Alfredo Cosco

Spesso per un sito si crea una prima pagina diversa dal resto della struttra globale. Una copertina, per l'appunto, che, come nell'editoria a stampa, rappresenti il contenitore in maniera non formalizzata. Da questo punto di vista i CMS non vengono molto incontro, il guadagno di poter modificare i contenuti senza dover elaborare ogni volta la grafica ha come contr'altare il doversi attenere ad una sola struttura per tutto il sito. Il limite è notevole e la questione si pose già ai tempi di php-nuke. Per quanto ricordi un CMS che, avendo una gestione delle porzioni della pagina molto evoluta, permetteva di sviluppare una cover con semplicità era Envolution, purtroppo la triste fine che ha fatto è sotto gli occhi di tutti[1].

Generalmente il metodo classico di procedere è di creare una prima pagina statica in html, e quindi mettere il CMS in una cartella sottostante la root del sito. Ma è oggettivamente una soluzione "sporca", un escamotage, e quei path con la sottocartella, almeno a me, danno un certo fastidio.

E' possibile ottenere una soluzione pulita con Flatnuke? Proviamoci...

Una piccola modifica a header.php

Il primo passo da fare è editare il file header.php nella root di FN, aggiungete alla fine del file, APPENA PRIMA della chiusura dell'head

// end of HTML headers
echo "</head">

(nella 2.7.2 pressapoco a riga 238) questa stringa:


//Build the first page
if(trim($mod)=="") 
{
echo "<link rel='StyleSheet' type='text/css' href='$path_css_thm/cpage/cpage.css'>";
}

Che significa più o meno: SE il valore della variabile $mod è vuoto, ovvero siamo nella prima pagina, aggiungi un collegamento al CSS cpage.css posizionato nella cartella miotema/cpage/.

Quindi create la cartella cpage/ e un file vuoto cpage.css nella directory del vostro tema, in questo caso è themes/flatcry/.

The last CSS

Avendo inserito il richiamo al file cpage.css prima della fine dell'head, tutte le istruzioni in esso contenuto andranno a sovrascrivere quelle precedenti del foglio di stile proprio del tema style.css.

A questo punto entrate in confidenza con la proprietà CSS:

display:none

display:none permette di far sparire un elemento dalla pagina senza che esso occupi alcuno spazio.

(crf. http://css.html.it/faq/leggi/227/che-differenza-ce-tra-displaynone-e-visibilityhidden/

http://css.flepstudio.org/css-proprieta/display.html

http://www.w3schools.com/css/pr_class_display.asp)

Quindi per far sparire la testata, che ha per 'id' topmenu, basterà aggiungere a cpage.css:


#topmenu {

display:none;
}

Analogamente si farà per tutte la porzioni della pagina che si vuol far sparire: banner (id=bann), blocchi di destra e sinistra (id=leftbody e rightbody) e il footer (id=footer), aggiungendo a cpage.css queste istruzioni:


#bann {

display:none;
}

#bann2 {

display:none;
}

#leftbody,

#rightbody {

display:none

}

#footer {

display:none;
}

Se andate a rivedere la vostra prima pagina l'effetto sarà questo:

Siete spaesati? Non è quello che vi aspettavate? Con calma, continuate a leggere il tutorial su...

Il branding della prima pagina

Per brandizzare la vostra prima pagina è necessario agire su alcuni id e le classi di style.css, sovrascrivendoli tramite cpage.css.

Ad esempio, voglio dare un colore di sfondo particolare, sovrascriverò l'opzione background sugli id #html e #body:


html, body {
background: #FFDCA8;

}

Analogamente è possibile utilizzare gli id #tema, #outer,#inner,#centerbody per creare effetti.
Diamo una larghezza fissa all'id #tema, contorniamolo di uno bordo verde e aggiungiamo un'immagine di background centrata e fissa:


#tema {

width: 800px;
height: 600px;
border:4px dashed green;
background: url("../images/medalbg.png") no-repeat 50% 10% fixed;

}

Quindi diamo un bordo bianco ed uno rosso a #inner e #outer centrandoli nella pagina:


#outer {
margin:auto auto;
width: 98%;
height: 590px;

border:4px dashed white;

}

#inner {
margin:auto auto;
width: 98%;
height: 580px;

border:4px dashed red;

}

L'effetto sarà questo:

ma non siamo ancora soddisfatti, bisogna ripulire il contenitore #centerbody levando il bordo destro presente in flatcry e ridimensionandolo:


#centerbody {
width: 100%;
height:100%;
margin:auto auto;
padding:0 0;
border:none;
}

Infine tutto quello che dovrà entrare nella nostra prima pagina è governato dalla classe .motd, che potremo strutturare così:


.motd {
width: 95%;
height:98%;

padding:0;
padding-top:50px;

margin:auto auto;
font-size:16px;
font-weight: bold;
border:none;
background:none;
}

Quindi non resta che editare il contenuto nel file motd.php per il messaggio sulla nostra cover, a rigore potete metterci tutto, anche un'immagine mappata o un'animazione in flash

Provando a mettere del comune html l'effetto finale sarà:

La differenza è che la voce "Entra", opportunamente linkata, porterà all'interno di un sito la cui struttura è quella classica e lo stile sarà quello che deciderete voi nel normale processo di branding del sito.

Potete vederne una versione live a questo link: Il medagliere/

E le news?

Che fare, in ultimo, per le news in prima pagina?

Purtroppo non è possibile semplicemente settare il numero di news in prima pagina a zero dal menù di configurazione, il CMS restituisce un errore:


Warning: Division by zero in /opt/lampp/htdocs/flatnuke/functions.php on line 615

Bisogna ridefinire la funzione create_news, la soluzione più semplice per farle sparire è creare un file vuoto: create_news.php e metterlo nella cartella include/redefine.

Conclusioni

La modularità del codice di Flatnuke e una conoscenza media di CSS e PHP permettono con pochi sforzi di ottenere un effetto spesso richiesto dalla clientela che cerca un sito web. I più smaliziati avranno capito che usando istruzioni CSS meno comuni come: "position:absolute" o "z-index", con sette contenitori a disposizione (#html,#body,#tema,#outer,#inner,#centerbody e .motd), al limite un po' di javascript e la ridefinizione di alcune funzioni gli effetti possono essere virtualmente infiniti.

Io ad esempio, con un semplice gioco di background e div ho fatto questo: The FlatnukeFarm
Direct download da qui: Crea una Cover page

Pubblicato Giovedi 06 Agosto 2009 - 16:33 (letto 1023 volte)
Comment