[guida] Come ho fatto questo sito

dedicato a chi si diletta nelle creazioni su web, per scambiare consigli su phpBB, Joomla, ecc.

[guida] Come ho fatto questo sito

Messaggioda Nico » sab 5 gen 2008, 20:14

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:
progetto01.png

1) è diventato l'header dove poi è stato posizionato via css il menù
Immagine
2) è diventato lo sfondo che viene ripetuto in verticale quante volte serve
Immagine
3) è diventato il footer
Immagine

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.
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: [guida] Come ho fatto questo sito

Messaggioda @L3 » dom 6 gen 2008, 11:42

grazie Nico....ne faremo tesoro delle tue informazioni!!! ;)
Avatar utente
@L3
Cangurino
Cangurino
 
Messaggi: 4
Iscritto il: mer 2 gen 2008, 15:34

Re: [guida] Come ho fatto questo sito

Messaggioda Stea » ven 11 gen 2008, 21:01

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 8)
Il diavolo fa le pentole, che io gli progetto e con l'acciaio che gli fornisco.
E' più difficile che un cammello passi per cruna di un ago, che riesca a passarci io.
Chris Benoit e Eddy Guerrero: leggende sempre.
There is no peace among the stars.
Avatar utente
Stea
Moderatore globale
Moderatore globale
 
Messaggi: 589
Iscritto il: mer 12 ott 2005, 20:52
Località: Zena Tower Dungeon

Re: [guida] Come ho fatto questo sito

Messaggioda spymode » mer 6 feb 2008, 21:06

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

Ciao Nico,
scusa la mia ignoranza :|, quale file css bisogna modificare :?:
spymode
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: mer 6 feb 2008, 18:43

Re: [guida] Come ho fatto questo sito

Messaggioda Nico » gio 7 feb 2008, 12:59

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");


;)
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: [guida] Come ho fatto questo sito

Messaggioda spymode » ven 8 feb 2008, 20:04

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..." :D

consiglio di dare un'occhiata al filmato, tra l'altro queste cose accadono per davvero ;)
spymode
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: mer 6 feb 2008, 18:43

Re: [guida] Come ho fatto questo sito

Messaggioda Nico » ven 8 feb 2008, 20:13

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.
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: [guida] Come ho fatto questo sito

Messaggioda spymode » ven 8 feb 2008, 20:23

Nico ha scritto:erano assidui giocatori di The Gate.

io non ho mai giocato a The Gate...in cosa consiste :?: :oops:
spymode
Cangurino
Cangurino
 
Messaggi: 3
Iscritto il: mer 6 feb 2008, 18:43

Re: [guida] Come ho fatto questo sito

Messaggioda kasx93 » gio 30 ott 2008, 15:33

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?
kasx93
Cangurino
Cangurino
 
Messaggi: 4
Iscritto il: sab 18 ott 2008, 22:25

Re: [guida] Come ho fatto questo sito

Messaggioda Nico » gio 30 ott 2008, 15:56

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)
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: [guida] Come ho fatto questo sito

Messaggioda kasx93 » gio 30 ott 2008, 16:27

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!
kasx93
Cangurino
Cangurino
 
Messaggi: 4
Iscritto il: sab 18 ott 2008, 22:25

Re: [guida] Come ho fatto questo sito

Messaggioda Nico » lun 3 nov 2008, 11:57

kasx93 ha scritto: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..
I miei amici immaginari mi hanno abbandonato perchè i loro amici non credono che io esista..

And somewhere out there, some asshole has my sword.
(George R.R. Martin - 27 ottobre 2008)
Avatar utente
Nico
Il Signore dei Canguri
Il Signore dei Canguri
 
Messaggi: 1639
Iscritto il: mer 12 ott 2005, 1:42
Località: Patavium

Re: [guida] Come ho fatto questo sito

Messaggioda kasx93 » lun 3 nov 2008, 15:35

ok, in effetti è cento volte più semplice!!
kasx93
Cangurino
Cangurino
 
Messaggi: 4
Iscritto il: sab 18 ott 2008, 22:25

Re: [guida] Come ho fatto questo sito

Messaggioda Lix » ven 26 dic 2008, 10:13

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, :lol: ).Non so programmare in css.
Lix
Cangurino
Cangurino
 
Messaggi: 2
Iscritto il: gio 25 dic 2008, 18:25

Re: [guida] Come ho fatto questo sito

Messaggioda matte89thebest » lun 30 mar 2009, 12:47

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!
matte89thebest
Cangurino
Cangurino
 
Messaggi: 1
Iscritto il: lun 30 mar 2009, 12:36

Prossimo

Torna a Come ti riduco il web

Chi c’è in linea

Visitano il forum: Nessuno e 0 ospiti

cron