[guida] Come ho fatto questo sito

[Nico]

dato che molti mi contattano (anche privatamente) qui e su phpbb.it per sapere come fare un sito come questo, ho deciso di fare una mini guida.
Innanzitutto sia chiaro, non sarà una guida esaustiva e per vari motivi:

• Non voglio cloni del mio sito (mi pare una cosa abbastanza sensata)
• Mi piace quando le mie idee e la mia fantasia ne generano altra (leggi, farina del vostro sacco)
• Non ho tempo per fare del lavoro che ognuno DEVE farsi da solo (al massimo un aiuto ogni tanto, ma se non conosci almeno html e css, lascia perdere)!!

Questo sito non è integrato a livello di codice (è iniziato prima della versione gold di phpbb3 per cui non ho inserito mod prima del tempo)!
Questo sito non è completamente W3C compliant (ci lavoro quando ho un po' di tempo e come sapete è pochissimo ormai)!
La homepage è puro html con css.
Il blog è puro Wordpress con un template creato da me.
Il forum è puro phpBB3 con uno stile creato da me.


Quello che unisce il tutto è la grafica.
Per questo sono partito da un progetto grafico ispirato a quello di phpBB.it e con i suggerimenti di Max ho fatto quello che vedete qui sotto:

1) è diventato l'header dove poi è stato posizionato via css il menù

2) è diventato lo sfondo che viene ripetuto in verticale quante volte serve

3) è diventato il footer


A questo punto non resta che usare le 3 immagini nel modo giusto per creare la homepage, lo stile del phpBB3 e il template per Wordpress.
Altre informazioni le metto domani.
ciao.

[@L3]

grazie Nico....ne faremo tesoro delle tue informazioni!!!

[Stea]

Molte volte un sito bello esteticamente è anche semplice a livello di codice/immagini.
Bisogna solo sapere il "metodo", provare e a volte avere i programmini giusti e conoscere quei 2 o 3 comandi che ti portano dritti al risultato più utile

[spymode]

1) è diventato l'header dove poi è stato posizionato via css il menù

Ciao Nico,
scusa la mia ignoranza , quale file css bisogna modificare

[Nico]

Se usi uno stile basato su subSilver2 è stylesheet.css.
Prosilver come sai ha un mare di css interoperanti tra loro, per cui ho preferito farne uno in più piuttosto che incasinarmi nel mettere un po' di codice qua e là.
Ho quindi creato un file home.css dove ho messo tutto quello che serve per la pagina e poi lo faccio richiamare dal file stylesheet.css

home.css

Codice: Seleziona tutto

/*      general rules
--------------------------------------------------------------------*/
img,fieldset{border: 0;vertical-align: middle;}
#contenitore{
   margin: 0 auto;
   text-align:  left;
   width: 958px;
   font-size: 1.1em;
   background: transparent url("{T_THEME_PATH}/images/cont.gif") repeat-y 0 0;
   }

/*      titoli
--------------------------------------------------------------------*/
#head{
   position: relative;
   height: 142px;
   }
.hh{
   background: transparent url("{T_THEME_PATH}/images/head_home.jpg") no-repeat 0 100%;
   }

#head h1{
   height: 49px;
   text-indent: -9999px;
   overflow: hidden;
   font-size: 1em;
   margin: 0 0 0 160px;
   padding: 45px 0 0 0;
   }
.hh h1{
   background: transparent url() no-repeat 0 100%;
   }

#head h2{
   height: 9px;
   text-indent: -9999px;
   overflow: hidden;
   font-size: .7em;
   margin: 0 0 0 74px;
   }
.hh h2{
   background: transparent url("{T_THEME_PATH}/images/slogan.jpg") no-repeat 0 0;
   }


/*      CONTENUTI ESTERNI
--------------------------------------------------------------------*/
#contenuti{float: left;width: 678px;}
.fpage #contenuti{float: none;width: 100%;}
#contenuti-inner{
   padding: 20px 24px 20px 24px;
   font-size: 90%;
}
#contenuti-inner p{
   line-height: 1.3em;
   font-size: 1.1em;
   margin-bottom: 1.5em;
}
.fpage #contenuti-inner{padding: 0;margin: 25px;}
#side{float: right;width: 280px;}
#footer{
   clear: both;
   background: #A7C57D url("{T_THEME_PATH}/images/foot.gif") no-repeat 0 0;
   height: 60px;
   padding: 0px 0 0 0;
   }
#footer p{
   padding: 0 0 0 20px;
   vertical-align: super;
   font-size: 90%;
}

/* Ads di Google */
#ad_code {
   width:750px;
   padding:10px;
   margin: 0 0 0 72px;
   background:transparent url("{T_THEME_PATH}/images/diggdugg.gif") center center no-repeat;
   text-align:center;
   }

/*   MENU
-------------------------------------------------------*/
#menu{
   position: absolute;
   bottom: 5px;
   left: 162px;
   }
#menu li{
   float: left;
   height: 24px;
   line-height: 24px;
   background: transparent url("{T_THEME_PATH}/images/m.gif") no-repeat 0 0;
   margin: 0 2px 0 0;
   font-weight: bold;
   width: 84px;
   text-align: center;
   }
#menu li a{
   float: left;
   width: 84px;
   text-align: center;
   color: #313633;
   }
#menu li a:link, #menu li a:visited{
   background: transparent url("{T_THEME_PATH}/images/m-h.gif") no-repeat 0 0;
   }
#menu li a:hover{
   background-image: none;
   text-decoration: none;
   }
#menu ul {
    list-style-type: none
    }
         
/*   CONTENUTI
--------------------------------------------------------------*/

#contenuti-inner ol{
   list-style-position: inside;
   margin: 10px;
   font-size: 1.2em;
   }
#contenuti-inner ol li{
   line-height: 1.8em;
   margin: 2px 0;
   padding: 0 10px;
   }

stylesheet.css (uso la funzione import)

Codice: Seleziona tutto

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
   Style name:      kangoo
   Based on style:   proSilver (this is the default phpBB 3 style)
   Original author:   subBlue ( http://www.subBlue.com/ )
   Modified by:   nico66s    ( http://www.nico66s.it )   
   
   Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("buttons.css");
@import url("cp.css");
@import url("forms.css");
@import url("tweaks.css");
@import url("colours.css");
@import url("home.css");

[spymode]

Ciao Nico,
Grazie mille

Ps.mi è capitato di vedere un tuo filmato su youtube "The Gate Movie"...
..."Ci fu un tempo"..."In cui aveva una vita sociale"..."Ma un giorno..."

consiglio di dare un'occhiata al filmato, tra l'altro queste cose accadono per davvero

[Nico]

Il filmato non è mio e se avrai modo di leggere bene questo forum scoprirai che la maggior parte dei frequentatori di questo forum (me incluso) erano assidui giocatori di The Gate.

[spymode]

erano assidui giocatori di The Gate.

io non ho mai giocato a The Gate...in cosa consiste

[kasx93]

Prima di tutto complimenti per il sito, secondo una piccola domanda, per modificare l'header in wordpress, ho tolto da header.php il <div id "header" e headerimg, ed ho messo un include verso un file .html creato da me che contiene con un div il mio nuovo header ... purtroppo il risultato non è quello che volevo, infatti si visualizza tutta la parte centrale sballatta (prima si visualizzava bene) ..... scusa veramente il disturbo, ma non è che potresti darmi una piccola dritta su dove sbaglio?

[Nico]

Non so se quello è il procedimento adatto.
Io ho proprio rifatto l'header e il footer di wordpress come se fosse quello di phpbb.
Vai sul mio blog e controlla il sorgente pagina (Firefox - Visualizza - Sorgente pagina oppure Ctrl + U)

[kasx93]

grazie per la risposta veloce, mi hai ridato coraggio, ho cancellato tutto header.php e style.css con i file originali e son ripartito da capo, in 5 minuti ci sono riuscito!! header.php l'ho modificato solo per #page dove ho messo la mia immagine centrale, mentre tutto il resto in style.css .... strano però mi semrbava di aver gia fatto cosi però non mi veniva, adesso viene.... mi rimane solo da aggiustare le immagini ed un ultimisso dubbio promesso:


avevo pensato di semplificarmi la vita mettendo dei pulsanti che portano nelle varie parti del sito gia nell'immagini e poi mapparla, però mi sa che cosi mi complico la vita vero? perchè la mappatura dove la dovrei mettere?? ... mi sa che mi sono complicato solo la vita giusto?

grazie infinite!

[Nico]

avevo pensato di semplificarmi la vita mettendo dei pulsanti che portano nelle varie parti del sito gia nell'immagini e poi mapparla, però mi sa che cosi mi complico la vita vero? perchè la mappatura dove la dovrei mettere?? ... mi sa che mi sono complicato solo la vita giusto?

grazie infinite!

Io eviterei la mappatura usando piuttosto un menù css..

[kasx93]

ok, in effetti è cento volte più semplice!!

[Lix]

ciao Nico,
sono disperato.Devo integrare graficemente joomla 1.5.x e phpbb3.Potresti darmi una mano?
Il mio sito è strutturato in questo modo:

tutti i file di joomla 1.5.x
forum/

Sono riuscito ad integrare gli utenti...ma a integrare la grafica non credo di riuscire...

P.S. Se voui ti do una copia del sito...sarei molto fecile se mi dassi una mano(anche 2, ).Non so programmare in css.

[matte89thebest]

Ciao, ho cercato di adottare una gestione css simile alla tua, ovvvero sono passato dall'avere una struttura del tipo:

HEADER clear:both
left clear left | center | right clear right
foother clear both

che mi funzionava a meraviglia, ad una soluzione come la tua:

header
centrale (immagine es 800x10) ripetuta per tutta la lunghezza del div
foother

Con questa configurazione riscontro un sacco di problemi nell'inserire menù "dinamini" creati con CSS (menù realizzati tramite spostamento della posizione background dell'immagine del div css)!

non riesco a venire a capo della situazione, 99% è un problema di fixend - relative -absolute e concatenazione di div!

Potresti rendermi disponibile lo scheletro di annidazione del CSS utilizzato sul forum? quello del sito lo ho già reperito e lo sto studiando!

grazie mille!