Pagina 1 di 1
 
 

Messaggio [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#1  HaoAsakura Sabato, 08 Mag 2010, 11:31

Questa guida si vi spiegherà le basi per realizzare una Template per il Vostro Icy Phoenix in stile "HaoAsakura".
Cosa intendo per stile "HaoAsakura"?
Semplicemente una Template simile a quelle dei 3 siti su cui ho lavorato:
- www.souleateritalia.it
- www.fmaitalia.net
- www.bakanashumi.it
... creando uno stile tutto mio completamente estraneo dall'aspetto originale di Icy Phoenix.

La guida è scritta presupponendo che abbiate un minimo di dimestichezza con le varie funzioni di Icy Phoenix (il CMS sopratutto) e conosciate CSS, HTML e Grafica (per queste tre cose il web può fornirvi ottimi tutorial, così come i Siti di supporto di IP, italiano ed internazionale.
Link alla raccolta delle guide su icyphoenix.it > Link





- INCOMINCIAMO... -


La Template di esempio allegata a questo topic è una "semplice" White Pearl" rinominata e modificata per ottenere la homepage nel mio stile (tutti i files originali, immagini e quant'altro, non editati di questa template sono presenti nell'archivio).
Metto a disposizione di tutti la template in modo che la possiate studiare e migliorare in base alle vostre esigenze.
Io ho usato in questo caso la "White Pearl" ma nessuno vi vieta di usare le altre Template Icy Phoenix... dovete solo usare la fantasia ed adattare "lo schema" a seconda delle occasioni.
Ricordo che le immagini sono solo esempi!!!
Analizzerò passo passo ogni files modificato presente all'interno della root della mia Template.

DOWNLOAD ALLA FINE DEL TOPIC





Il "common.css" è lo stesso presente nella root > template > default ma con una semplice modifica.
La voce
#content {
    padding: 2px 7px 5px 7px;
    text-align: center;
}

E' stata cambiata in
#content {
    padding: 0px 0px 0px 0px;
    text-align: center;
}


Il "style_sample.css" contiene invece le istruzioni per la larghezza del Sito, l'altezza del Header e la gestione delle 2 colonne del layout.
La prima modifica è il richiamo del "common.css" che non è più quello di default ma è quello presente nella root della mia Template.
La voce
@import url("../default/common.css");

E' stata cambiata in
@import url("common.css");

La larghezza del Sito è impostata a 900px.
E' una misura "corretta" ed in media con la larghezza standard della maggior parte dei Siti nel web.
La voce
#global-wrapper {
/*
    width: 980px !important;
    clear: both;
    margin: 0 auto;
*/
}

E' stata cambiata in
#global-wrapper {
    width: 918px !important;
    clear: both;
    margin: 0 auto;
}

Perché 918px e non 900px come ho scritto poc'anzi?
Semplicemente perché bisogna tenere presente le 2 colonne shadow (rightshadow e leftshadow) che la "White Pearl" originale ha di larghezza 9px/cad.
9px x 2 = 18px + 900px = 918px
Se la vostra intenzione è quella di avere colonne più larghe dovete fare lo stesso ragionamento, moltiplicando per 2 la larghezza della colonna e sommarla a 900px per ottenere la larghezza totale del Sito.
Se disegnate colonne più larghe ricordatevi di modificare la voce
#wrapper-inner {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 9px;
    padding-right: 9px;
}

L'altezza del Header è impostata a 300px.
Ritengo che sia importantissimo avere un'altezza proporzionata alla larghezza della colonna di sinistra (in questo caso di 250px).
La voce
#top_logo {
    border: 0px solid #e8e8e8;
    background: #ffffff url('images/p_white/top_header.gif') repeat-x;
    height: 115px;
}

E' stata cambiata in
#top_logo {
    border: 0px solid #e8e8e8;
    /*background: #ffffff url('images/p_white/top_header.gif') repeat-x;*/
    height: 300px;
}

Nella parte finale del CSS è presente la voce per la gestione della "colonna" della HaoAsakura Style Template.
/* INIZIO - LAYOUT 2 COLUMN [HAOSTYLE] */
#background_index {
    background: url('images/sample/skin/bg_index.png') repeat-y;
    height: 100%;
    width: 100%;
    float: left;
}

/* FINE - LAYOUT 2 COLUMN [HAOSTYLE] */

Il file "bg_index.png" è l'immagine che crea la colonna di sinistra.
In questo caso nella cartella "skin" è presente un'immagine PNG di dimensione 250px x 1px.
La dimensione non è vincolante e potete sbizzarrirvi come meglio credete.





- HEADER -


Per il Header usiamo un'immagine (di qualsiasi formato, in questo caso PNG) di dimensione 900px x 300px.
Nella mia Template l'immagine pronta si trova nella cartella "skin" e si chiama "bg_header.png".
L'immagine va inserita nel CMS > Blocchi Globali
Si crea un nuovo blocco nominandolo come più vi aggrada nella posizione "Header Centro (Sinistra)" disabilitando (se fossero spuntati) le voci "Mostra bordi", "Mostra barra del titolo", "Localizza barra titolo" e "Mostra sfondo".
Ora avete 2 possibilità!
O inserire l'immagine come bbcode
[align=center][img]/templates/haostyle/images/sample/skin/bg_header.png[/img][/align]

O inserirla con codice HTML
<table width="900" height="300" border="0" align="center" cellpadding="0" cellspacing="0" background="/templates/haostyle/images/sample/skin/bg_header.png">
            <tr>
              <td></td>
            </tr>
        </table>

Io consiglio il codice HTML in quanto è la base di partenza per poter creare un fantastico Header con pulsanti "annessi".


Nel "overall_header.tpl" è stato eliminato il codice
<tr>
    <td width="100%" class="forum-buttons" colspan="3">
        <a href="{FULL_SITE_PATH}{U_PORTAL}">{L_HOME}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <a href="{FULL_SITE_PATH}{U_INDEX}">{L_INDEX}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- BEGIN switch_upi2db_off -->
        <a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- END switch_upi2db_off -->
        <!-- BEGIN switch_upi2db_on -->
        <span style="vertical-align: top;">{L_POSTS}:&nbsp;</span><a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a><span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_U}<span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_M}<span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_P}&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- END switch_upi2db_on -->
        <!-- IF S_LOGGED_IN -->
        <a href="{FULL_SITE_PATH}{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- ENDIF -->
        <!-- IF S_HEADER_DROPDOWN -->
        <a href="{FULL_SITE_PATH}{U_SEARCH}" onMouseOver="dropdownmenu(this, event, menu1, '250px');" onMouseOut="delayhidemenu();">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- ELSE -->
        <a href="{FULL_SITE_PATH}{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- ENDIF -->
        <a href="{FULL_SITE_PATH}{U_FAQ}">{L_FAQ}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- IF not S_LOGGED_IN -->
        <a href="{FULL_SITE_PATH}{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
        <!-- ENDIF -->
        <a href="{FULL_SITE_PATH}{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT2}</a>
    </td>
</tr>

Avendo cancellato queste righe di codice consiglio caldamente di attivare nel forum, da CMS > Pagine Standard > Forum, il blocco "Nav Header" (file blocco "nav header [Intestazione]") posizionandolo in "Cima Pagina Centrale".
Nulla però vi nega la possibilità di trovare una soluzione alternativa più comoda alle vostre esigenze e gusti!


Il file "overall_inc_body.tpl" è stato editato in modo che nella homepage non appaia il riquadro di notifica di messaggio privato.
Modifica importantissima per evitare che la notifica "spacchi" il Header dal corpo centrale del Sito.
La voce
    <!-- IF S_LOGGED_IN --><div class="popup{PRIVMSG_IMG}"><a href="{FULL_SITE_PATH}{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div><!-- ENDIF -->

E' stata cambiata in
    <!-- IF S_LOGGED_IN -->
    <?php if ($_SERVER['SCRIPT_NAME'] == "/index.php" ): ?>
    <?php else: ?>
    <div class="popup{PRIVMSG_IMG}"><a href="{FULL_SITE_PATH}{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div>
    <?php endif; ?>
    <!-- ENDIF -->






- FOOTER -


La prima cosa da decidere è l'altezza che deve avere il footer.
In questo caso l'altezza è di 100px e quindi l'immagine usata ha dimensione 900px x 100px.

Il "overal_inc_footer.tpl" è stato editato per permettere alla colonna di sinistra di "incastrarsi" col footer.
Il TPL originale era
    <!-- IF SWITCH_CMS_GLOBAL_BLOCKS -->
    <!-- IF TC_BLOCK --><div style="vertical-align: top;"><!-- BEGIN tailcenter_blocks_row -->{tailcenter_blocks_row.CMS_BLOCK}<!-- END tailcenter_blocks_row --></div><!-- ENDIF -->
    </td>
    <!-- IF TR_BLOCK --><td width="5"><img src="{SPACER}" alt="" width="5" height="10" /></td><td width="{FOOTER_WIDTH}" style="width: {FOOTER_WIDTH}px !important;" valign="top"><!-- BEGIN tailright_blocks_row -->{tailright_blocks_row.CMS_BLOCK}<!-- END tailright_blocks_row --></td><!-- ENDIF -->
    </tr>
    </table>
    <div style="vertical-align: top;"><!-- BEGIN tail_blocks_row -->{tail_blocks_row.CMS_BLOCK}<!-- END tail_blocks_row --></div>
    <!-- ENDIF -->

    {CMS_ACP}
    <div style="text-align: center;"><br /><span class="admin-link">{ADMIN_LINK}</span><br /><br /></div>

    </td>
</tr>
<!-- IF FOOTER_BANNER_BLOCK -->
<tr><td width="100%" colspan="3">{FOOTER_BANNER_BLOCK}</td></tr>
<!-- ENDIF -->

Editato è diventato
<!-- IF FOOTER_BANNER_BLOCK -->
<tr><td width="100%" colspan="3">{FOOTER_BANNER_BLOCK}</td></tr>
<!-- ENDIF -->

Così facendo è stato eliminato da questo file le voci "CMS" e "ACP" dal fondo del Sito.
Visto che sono indispensabili devono essere reinserite.


Nel "overall_footer.tpl" inserire le voci tolte nell'altro TPL editandolo secondo i nostri gusti.
Nel mio TPL sono state tolte le statistiche di generazione pagina.
Se decidete di seguire la mia stessa strada nel vostro Sito vi consiglio di disattivare queste statistiche da ACP.
Non ho molto da dire sulle modifiche apportate.
La "composizione" del Footer è limitata solo alla vostra fantasia.
Chiedo cortesemente che vengano mantenuti i crediti (non importa in quale posizione del Footer).





- "BLOCCO" CENTRALE -


La parte complicata (è più corretto dire elaborata) della mia Template è il "blocco" centrale.
Non esiste uno standard applicabile ai blocchi da usare nella parte centrale del Sito: i blocchi standard NON VANNO BENE COSI' COME SONO!
La mia "visione" di Sito e quindi relativa realizzazione di basa sul concetto abbinata Menu Laterale + News.
Le combinazioni, mantenendo fisso il Menu Laterale, sono molteplici.
Tutto sta alla vostra fantasia e voglia di sperimentare.
Per facilitare le cose ho creato due blocchi di esempio:
- menu laterale
- news
Una cosa molto importante che dovete ricordarvi è la larghezza della colonna di sinistra e, conseguentemente, quella più grande di destra.
In questo caso il Menu Laterale è composto da una tabella con larghezza fissa di 250px mentre il blocco News ha larghezza fissa di 650px (250px + 650px = 900px > larghezza del Sito).

TEMPLATE > HAOSTYLE  > BLOCKS > haostyle_menu_laterale_block.tpl
<div style="text-align:center; padding-top:10px; padding-bottom:5px;"><img src="/templates/haostyle/images/sample/skin/ml_banner.png" /></div>
<table border="0" width="250px" cellspacing="0" cellpadding="0">
 <tr>
<td align="left">&nbsp;&nbsp;<a href="/index.php">Homepage</a></td></tr>
 <tr>
<td align="left">&nbsp;&nbsp;<a href="/forum.php">Forum</a></td></tr>
</table>

E' un blocco molto semplice composto da un'immagine (consigliata avente la stessa larghezza della colonna) e voci di selezione racchiuse in una tabella con larghezza fissa di 250px.
Il blocco è una bozza quindi non esente da eventuali errori.
A voi l'onore di creare un fantastico Menu Laterale.
Nessuno vi vieta di "prendere" i blocchi "standard" ed adattarli all'esigenza della vostra Template, fixando sempre la larghezza.

TEMPLATE > HAOSTYLE  > BLOCKS > haostyle_news_block.tpl
Il blocco che trovate è un normale news_block.tpl a cui ho imposto la larghezza di 650px.
La voce
<table class="empty-table" width="100%" cellspacing="0" cellpadding="0" border="0">

E' cambianta in
<table class="empty-table" width="650px" cellspacing="0" cellpadding="0" border="0">

Lavorando su questo blocco e sullo style_?.css è possibile creare un proprio blocco News personalizzato.





- PANNELLO ADMIN CMS -


CMS > Pagine CMS > ...
Dovete assolutamente togliere la spunta alla voce "Navigazione" da ogni pagina del Sito e salvare.





- FORUM -


Il Forum può essere lasciato così com'è!
Mi sembra però insensato non "metterci mano" dopo aver speso ore alla realizzazione della nuova Template.
Per il Forum non ho consigli specifici da dare se non quello di cercare nel supporto tutto ciò che avete bisogno.
Ricordo che il Header ed il Footer saranno gli stessi della Homepage.







- CONCLUSIONI -


Realizzare la "HaoAsakura Style Template" non è un lavoro semplice ma neanche impossibile.
Sono stato il più preciso possibile in questa guida anche se la possibilità che mi sia sfuggito qualcosa c'è.
Quello che manca lo dovrete mettere Voi così come la fantasia per adattare il tutto ai vostri gusti.
Nulla è impossibile se c'è la volontà di provare e riprovare!
Ai Webmaster utilizzatori del CMS Icy Phoenix posso solo dire questo:
"Nessuno nasce "imparato", l'importante è la determinazione e la voglia di fare!!!"




Grazie per aver scelto il mio "stile" ^^

HaoAsakura








Citazione:
Grazie per aver letto la guida fino alla fine.
Mi scuso se ci dovessero essere grossolani, se non imperdonabili, errori nell'italiano usato ma avendola scritta "a più riprese" possono esserci orrori indicibili XD
Vabbé dai... almeno l'ho scritta ^^'

 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Non più utilizzatore di Icy Phoenix
 
Ultima modifica di HaoAsakura il Sabato, 16 Ottobre 2010, 20:21, modificato 6 volte in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 36
Registrato: Giugno 2008
Messaggi: 514
  • Torna in cima Vai a fondo pagina
 


Messaggio Re: [GUIDA] HaoAsakura Style Template

#2  fucile Sabato, 08 Mag 2010, 11:45

Complimenti Ottima Guida ma solo un particolare ----- C'è la password al file del template. Ricordo che questa è una community libera e tutto quello che è inserito qui dentro dovrebbe essere di pubblico dominio.  Sono consapevole del fatto che c'è stato un problema non voluto ma ti invito a ripristinare il file.
 




Versione di IP: Versione 2.0.0.86

Server: Linux

____________
Nun c'è peggior sordo de chi nun vò sentì
 
avatar
italia.png fucile Sesso: Uomo
Fabrizio Di Silvestro
Staff
Staff
Attenzione! Sono carico!
 
Età: 53
Registrato: Mag 2007
Residenza: Roma
Messaggi: 1566
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template

#3  HaoAsakura Sabato, 08 Mag 2010, 11:48

Hai perfettamente ragione O_O
Ho criptato l'archivio involontariamente... ops!
Mi cospargo il capo di cenere... ed ho aggiornato il link  
Che figuraccia T_T



Edit 08/05/2010 ore 08:33

Aggiunto "- PANNELLO ADMIN CMS -"
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Non più utilizzatore di Icy Phoenix
 
Ultima modifica di HaoAsakura il Domenica, 09 Mag 2010, 08:34, modificato 4 volte in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 36
Registrato: Giugno 2008
Messaggi: 514
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#4  Andrea75 Domenica, 09 Mag 2010, 09:24

Ottimo lavoro Hao!

Grazie!
 




Versione di IP: 2.0.0.86

Server: Linux

____________
My Icy forum: www.lineameteo.it
Staff Member @ Icy Phoenix.it & Icy Phoenix.com
 
avatar
italia.png Andrea75 Sesso: Uomo
Amministratore
Amministratore
bel tempo con possibili rovesci
 
Età: 42
Registrato: Mag 2007
Residenza: Perugia
Messaggi: 3984
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#5  Salvo89 Domenica, 09 Mag 2010, 11:42

grandeeeeee ammazza che lavorone
 






____________
2irqbsz
 
avatar
blank.gif Salvo89 Sesso: Uomo
Interessato
Interessato
 
Cartellini gialli: 1 
Età: 29
Registrato: Luglio 2008
Messaggi: 472
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#6  devil Lunedì, 10 Mag 2010, 09:47

Complimenti!!! Ottimo lavoro.
Potrebbe essere un'altra ottima base per ulteriori personalizzazioni...
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
firma_001 devil
 
Ultima modifica di devil il Lunedì, 10 Mag 2010, 09:49, modificato 1 volta in totale 
avatar
italia.png devil Sesso: Uomo
Interessato
Interessato
 
Età: 48
Registrato: Settembre 2009
Residenza: Palermo
Messaggi: 246
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#7  eternauta Lunedì, 10 Mag 2010, 13:41

ottimo lavoro Thomas
 





 
avatar
 eternauta Sesso: Uomo
Utente
Utente
 
Età: 48
Registrato: Ottobre 2009
Messaggi: 9
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#8  HaoAsakura Lunedì, 10 Mag 2010, 14:04

Grazie a tutti per l'apprezzamento!
Ritengo che la parte "difficile" di questo tipo di template sia la grafica  

Chiedo la disponibilità di qualcuno per la traduzione in inglese per poterla condividere anche sul supporto internazionale!
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Non più utilizzatore di Icy Phoenix
 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 36
Registrato: Giugno 2008
Messaggi: 514
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#9  BlackDragonGTA Lunedì, 10 Mag 2010, 18:44

grande guida... vedro' di divertirmi un po' anchio!
 





Server: Linux
 
avatar
italia.png BlackDragonGTA Sesso: Uomo
Frequentatore
Frequentatore
 
Età: 29
Registrato: Dicembre 2007
Residenza: Grado
Messaggi: 163
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#10  buldo Lunedì, 10 Mag 2010, 21:57

Mi accodo ai complimenti, bravo HaoAsakura!

Grazie per aver condiviso i "segreti" del tuo template...     saranno un ottimo spunto e punto di partenza per molti utenti.
 




Versione di IP: 2.0.0.86

Server: Linux

____________
~~~ Andrea ~~~
Coltiva GNU/Linux, Windows si pianta da solo!
"Le password sono come le mutande: non devi lasciarle in bella vista, devi cambiarle frequentemente, non devi prestarle a nessuno"
 
avatar
italia.png buldo Sesso: Uomo
Andrea Libralato
Amministratore
Amministratore
mio fratello è un BUG
 
Età: 41
Registrato: Mag 2007
Residenza: Borgo San Michele
Messaggi: 2156
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#11  Vassili Martedì, 11 Mag 2010, 11:54

Sinceri Complimenti!
 





Server: Windows
 
avatar
blank.gif Vassili Sesso: Uomo
Visitatore
Visitatore
 
Età: 46
Registrato: Aprile 2008
Messaggi: 21
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#12  Marfo Martedì, 11 Mag 2010, 20:10

Ottimo lavoro come sempre Hao XD

chissà mai, magari è la volta buona che il padabakawan si da da fare sul serio e fa una sua template XD

per ora ti posso offrire solo questo

Spoiler: [ Mostra ]


codice:
Spoiler: [ Mostra ]

 




Versione di IP: 1.3.0.53a

Server: Windows+Linux

____________
marfirmaszewnkr
 
Ultima modifica di Marfo il Martedì, 11 Mag 2010, 22:27, modificato 1 volta in totale 
avatar
italia.png Marfo Sesso: Uomo
Visitatore
Visitatore
 
Età: 27
Registrato: Luglio 2009
Messaggi: 43
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#13  HaoAsakura Martedì, 11 Mag 2010, 20:16

Grazie Marfo per la traduzione ^^
Mittico!
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Non più utilizzatore di Icy Phoenix
 
Ultima modifica di HaoAsakura il Martedì, 11 Mag 2010, 20:18, modificato 2 volte in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 36
Registrato: Giugno 2008
Messaggi: 514
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#14  playarmy Giovedì, 06 Gennaio 2011, 23:51

Avrei una domanda, vorrei intraprendere  il progetto di una nuova versione del mio sito e per ciò che ho in mente questa template mi sembra ottima, e devo dire ottimo lavoro.

Ho applicato tutto come dice la, cioè ho scaricato il pacchetto e l'ho applicato, ora prima di partire mi sono accorto di una cosa, http://prove666.altervista.org/forum.php, come vedete qua a destra del forum è un po spostato, cioè manca il margine destro, (se usate Google Chrome o Internet Explorer mentre con Firefox va bene) ora la home va bene in tutti i casi, con Google Chrome ho notato che se diminuisco la dimensone con ctrl + '-' si sistema, mentre per Internet Explorer no, cosa posso fare?

e un altra cosa la dici che nell'header con l'html si possono fare cose belle, ho qualche idea, mi è piaciuta la cosa dei pulsanti Home e Forum, mi potresti linkare qualcosa che mi spieghi bene, ho trovato qualcosa ma non spiegano molto bene....

Grazie mille in anticipo.
 




Versione di IP: Icy Phoenix 1.3.0.53b

Server: Linux
 
avatar
italia.png playarmy Sesso: Uomo
Visitatore
Visitatore
 
Età: 26
Registrato: Giugno 2010
Messaggi: 59
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#15  HaoAsakura Venerdì, 07 Gennaio 2011, 12:43

Allora...

Il perché faccia quello scherzo non saprei dirtelo, purtroppo!
C'è da sistemare qualcosa nel CSS... ma cosa non saprei proprio visto che non ci sono tool come quelli per browser diversi da firefox (che io sappia, se ci sono ditemelo pure ^^)
Sistemare le cose con artifizi non serve a niente.
Il codice va ottimizzato al massimo per la stragrande maggioranza dei browser (quelli che tu hai elencato... io ci metterei dentro anche safari per i mac)

Per l'header... o studi un poco di html (tabelle, stili e quant'altro) o parti usando programmi come dreamviewer e le sue tabelle.
Inizialmente saranno strutturate male ma poi piano piano riuscirai a raffinare il tutto.
Alla fine io ho imparato provando e riprovando.
Mica ho studiato queste cose a scuola... sono un geometra che fa l'impiegato  
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Non più utilizzatore di Icy Phoenix
 
Ultima modifica di HaoAsakura il Venerdì, 07 Gennaio 2011, 12:44, modificato 1 volta in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 36
Registrato: Giugno 2008
Messaggi: 514
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#16  playarmy Venerdì, 07 Gennaio 2011, 14:44

HaoAsakura ha scritto: [Visualizza Messaggio]
Allora...

Il perché faccia quello scherzo non saprei dirtelo, purtroppo!
C'è da sistemare qualcosa nel CSS... ma cosa non saprei proprio visto che non ci sono tool come quelli per browser diversi da firefox (che io sappia, se ci sono ditemelo pure ^^)
Sistemare le cose con artifizi non serve a niente.
Il codice va ottimizzato al massimo per la stragrande maggioranza dei browser (quelli che tu hai elencato... io ci metterei dentro anche safari per i mac)

Per l'header... o studi un poco di html (tabelle, stili e quant'altro) o parti usando programmi come dreamviewer e le sue tabelle.
Inizialmente saranno strutturate male ma poi piano piano riuscirai a raffinare il tutto.
Alla fine io ho imparato provando e riprovando.
Mica ho studiato queste cose a scuola... sono un geometra che fa l'impiegato  

Grazie, si safari l'ho fatto controllare e sembra andare bene, beh già sapere il nome dei programmi è un grande aiuto, cioè su google si trovano spesso le soluzione però altre volte si trova tanta confusione.

Per google chrome se clicchi col destro puoi fare ispezione elemento che è simile a firebug però firebug è migliore...

Grazie per l'aiuto se mi serve qualche altra cosa ve lo faccio sapere.

EDIT 1: Per il problema dei forum spostato, può essere causato dal fatto che mancando le immagini delle icone del tipo forum attivo chiuso ecc., e dato che visualizza immagini con a scritta dnetro , può essere questo a causare i problemi?

EDIT 2: risolto il problema con gli altri browser, ho messo delle immagini di prova dove avevo detto nelle'EDIT 1 e ora va bene sia con google che con internet exploere
 




Versione di IP: Icy Phoenix 1.3.0.53b

Server: Linux
 
Ultima modifica di playarmy il Venerdì, 07 Gennaio 2011, 17:39, modificato 2 volte in totale 
avatar
italia.png playarmy Sesso: Uomo
Visitatore
Visitatore
 
Età: 26
Registrato: Giugno 2010
Messaggi: 59
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [GUIDA] HaoAsakura Style Template IP 1.3.0.53a

#17  playarmy Sabato, 08 Gennaio 2011, 15:50

Scusate il doppio post  

Sono riuscito infine a mettere i pulsanti nell'header utilizzando il sistema delle tabelle. In tutti i browser viene visualizzato tutto perfettamente, ma in Chrome i pulsanti "illuminati" si spostano leggermente dalla posizioni dei pulsanti "standard".

Ecco il codice che ho scritto, magari puoi aiutarmi:

<table width="900" height="400" border="0" align="center" cellpadding="0" cellspacing="0" background="/templates/haostyle/images/sample/skin/Bottoni/LogoRaviente_Simple.png">

<tr height="313"></tr>

<tr>
<!-- TD 1 --> <td width="153"><a href="index.php"><img src="/templates/haostyle/images/sample/skin/Bottoni/Home.png" name="img"
onMouseOver="document.img.src='/templates/haostyle/images/sample/skin/Bottoni/Home_Luce.png';"
onMouseOut="document.img.src='/templates/haostyle/images/sample/skin/Bottoni/Home.png'; "border="0" ></a></td>
<!-- TD 3 --> <td width="150"><a href="forum.php"><img src="/templates/haostyle/images/sample/skin/Bottoni/Forum.png" name="img2"
onMouseOver="document.img2.src='/templates/haostyle/images/sample/skin/Bottoni/Forum_Luce.png';"
onMouseOut="document.img2.src='/templates/haostyle/images/sample/skin/Bottoni/Forum.png'; "border="0" ></a></td>
<!-- TD 5 --> <td width="178"><a href="/viewtopic.php?f=1&t=17"><img src="/templates/haostyle/images/sample/skin/Bottoni/Regolamento.png" name="img3"
onMouseOver="document.img3.src='/templates/haostyle/images/sample/skin/Bottoni/Regolamento_Luce.png';"
onMouseOut="document.img3.src='/templates/haostyle/images/sample/skin/Bottoni/Regolamento.png'; "border="0" ></a></td>
<!-- TD 7 --> <td width="155"><a href="/profile.php?mode=register"><img src="/templates/haostyle/images/sample/skin/Bottoni/Iscriviti.png" name="img4"
onMouseOver="document.img4.src='/templates/haostyle/images/sample/skin/Bottoni/Iscriviti_Luce.png';"
onMouseOut="document.img4.src='/templates/haostyle/images/sample/skin/Bottoni/Iscriviti.png'; "border="0" ></a></td>
<!-- TD 9 --> <td width="164"><a href="login_ip.php?redirect=forum.php"><img src="/templates/haostyle/images/sample/skin/Bottoni/Login.png" name="img5"
onMouseOver="document.img5.src='/templates/haostyle/images/sample/skin/Bottoni/Login_Luce.png';"
onMouseOut="document.img5.src='/templates/haostyle/images/sample/skin/Bottoni/Login.png'; "border="0" ></a></td>
<!-- TD x --> <td width="*">&nbsp;</td>
</tr>
</table>

 




Versione di IP: Icy Phoenix 1.3.0.53b

Server: Linux
 
avatar
italia.png playarmy Sesso: Uomo
Visitatore
Visitatore
 
Età: 26
Registrato: Giugno 2010
Messaggi: 59
  • Torna in cima Vai a fondo pagina
 


NascondiQuesto argomento è stato utile?
Condividi Argomento
Segnala via email Facebook Twitter Windows Live Favorites MySpace del.icio.us Digg SlashDot google.com LinkedIn StumbleUpon Blogmarks Diigo reddit.com Blinklist co.mments.com
technorati.com DIGG ITA linkagogo.com meneame.net netscape.com newsvine.com yahoo.com Fai Informazione Ok Notizie Segnalo Bookmark IT fark.com feedmelinks.com spurl.net
Inserisci un link per questo argomento
URL
BBCode
HTML

Pagina 1 di 1
 









  

 

cron