PDA

Voir la version complète : Comment créer un style : Header , footer & corps (2ème partie)

suleiman
14/03/2007, 20h19
Nous avons terminer dans le tuto antérieur comment découper un design .

Comment introduiser les "table"s en Vbulletin .

http://www.rasarit.com/lesson/mon_style/tuto_2/2_1.jpg

Ajoutez au milieu des tables :

<p align="center">

http://www.rasarit.com/lesson/mon_style/tuto_2/2_2.gif

Attention

- Maintenant nous devons découper ce "table" en deux parties :

1 - Première partie pour le HEADER (en bleu).
2 - Deuxième partie pour le FOOTER (en rouge).

http://www.rasarit.com/lesson/mon_style/tuto_2/2_3.jpg

Allez maintenant à votre admincp >> Styles & Templates >> Gestionnaire de styles >> Ajouter un nouveau style

http://www.rasarit.com/lesson/mon_style/tuto_2/2_4.jpg

Après : Styles & Templates >> Gestionnaire de styles >> Go

http://www.rasarit.com/lesson/mon_style/tuto_2/2_5.gif

Vous voyez le header :


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output


Remplacez par


<!-- logo -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="30"><img border="0" src="mon_style/style/haut_gauche_fixe.jpg" width="30" height="175"></td>
<td background="mon_style/style/haut_fond.jpg">
<div align="center"><img border="0" src="mon_style/style/haut_banner.jpg" width="717" height="175"></div></td>
<td width="30"><img border="0" src="mon_style/style/haut_droite_fixe.jpg" width="30" height="175"></td>
</tr>
<tr>
<td width="30" background="mon_style/style/gauche.jpg">&nbsp;</td>
<td>
<p align="center">
<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output


C.a.d : Entre <!-- logo --> et <!-- /logo --> mettez la partie bleu de notre table .
Vous voyez le footer :
Mettez tout en bas c.a.d
Après :


<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>


Mettez la partie rouge de notre table :


</td>
<td width="30" background="mon_style/style/droite.jpg">&nbsp;</td>
</tr>
<tr>
<td width="30"><img border="0" src="mon_style/style/bas_gauche_fixe.jpg" width="30" height="114"></td>
<td background="mon_style/style/bas_fond.jpg">
<div align="right"><img border="0" src="mon_style/style/bas_banner.jpg" width="243" height="114"></div></td>
<td width="30"><img border="0" src="mon_style/style/bas_droite_fixe.jpg" width="30" height="114"></td>
</tr>
</table>


Maintenant :

Tailles et dimensions :

Modifiez cette partie comme image (seulement ce qui est en rouge)

http://www.rasarit.com/lesson/mon_style/tuto_2/2_6.jpg

Chemins des images

Tout d'abord , dans votre Folder du forum , vous avez créé déjà un folder avec le nom : mon_style .

Dans "mon_style" vous avez mis un autre Folder (style) ou vous avez mis les images fixe et mobiles .

Maintenat : copiez le folder images (upload/images) dans mon_style/ .
C.a.d forum/mon_style/images (images = le default folder du vbulletin)
et forum/mon_style/style (ou ils sont les images fixes et mobiles)
Alors : Chemins des images :
Ajoutez dans toutes les champs mon_style/

ex.
Image de titre :
- Avant : images/misc/vbulletin3_logo_white.gif
- Après : mon_style/images/misc/vbulletin3_logo_white.gif

Divers

Laissez sans modifiez .

Corps
Modifiez comme image :

http://www.rasarit.com/lesson/mon_style/tuto_2/2_7.jpg

http://www.rasarit.com/lesson/mon_style/tuto_2/2_13.jpg

Arrière-plan : pour Corps & Arrière-plan de la page

- C'est plus joli si sont de même couleur , cette couleur est la même comme le fond de notre design .

Couleur de police : pour Corps & Arrière-plan de la page
- C'est la couleur d'écriture dans le forum :
Ex.
Dans la page index

http://www.rasarit.com/lesson/mon_style/tuto_2/2_8_1.gif

http://www.rasarit.com/lesson/mon_style/tuto_2/2_8_2.gif

http://www.rasarit.com/lesson/mon_style/tuto_2/2_9.jpg

Dans une page autre que index (ex navbar ) :

http://www.rasarit.com/lesson/mon_style/tuto_2/2_10_1.gif

http://www.rasarit.com/lesson/mon_style/tuto_2/2_10_2.gif
Forumdisplay :

http://www.rasarit.com/lesson/mon_style/tuto_2/2_11.jpg

http://www.rasarit.com/lesson/mon_style/tuto_2/2_12.jpg
Karline
14/03/2007, 20h29
Hô tu nous gâtes merci

Super ton tuto et bien expliqué !
Cliques! (http://www.hodel.li/images/merci.jpg)
Sofia
14/03/2007, 20h32
Wawww :p Motivé, Suleiman ;) Merci infiniment :)
Fred
14/03/2007, 20h40
héhé bon boulot l'ami tu gére ;)
Allan
14/03/2007, 21h47
Ha, superbe, merci pour toutes ces infos Suleiman, bien joué ;)
stasze
05/04/2007, 19h31
Bonsoir Suleiman et encore merci pour ces superbes tuto...
J'ai quand même un petit soucis. J'ai exactement fait comme tu le disais mais voilà j'ai un décrochement dans les angles en haut et en bas sur les parties du design fixe?
Je joints l'image à mes paroles pour être plus explicite.
Quelqu'un pourrait-il me dire d'où vient le problème?
Merci d'avance...byby
stasze
14/04/2007, 14h28
Toujours personne pour me venir en aide...tampis, je vais encore patienter...Merci par avance...byby
suleiman
14/04/2007, 17h27
1- Est ce que tu as un : &nbsp; en plus ?
2- Dans <td width="x"> , ce x est le meme que pour l'image <img> ?
3- Dans le table <table> tu as cellpadding & cellspacing = 0 ?
stasze
14/04/2007, 19h26
1- Est ce que tu as un : &nbsp; en plus ?
2- Dans <td width="x"> , ce x est le meme que pour l'image <img> ?
3- Dans le table <table> tu as cellpadding & cellspacing = 0 ?

Voici ce que contient mon Header:
<!-- logo -->
<table border="0" cellpadding="0" cellspadding="0" width="100%">
<tr>
<td width="45" height="214"><img border="0" src="vikingland_style2/style/haut_gauche_fix2.jpg" width="45" height="214"></td>
<td background="vikingland_style2/style/haut_fond2.jpg">
<div align="center"><img border="0" src="vikingland_style2/style/haut_banner2.jpg" width="687" height="214"></div></td>
<td width="45" height="214"><img border="0" src="vikingland_style2/style/haut_droit_fix2.jpg" width="45" height="214"></td>
</tr>
<tr>
<td width="45" background="vikingland_style2/style/gauche2.jpg">&nbsp;</td>
<td>
<p align="center">&nbsp;


<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

Et voici ce que contient mon Footer:
<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />

$spacer_close
<!-- /content area table -->

<form action="$vboptions[forumhome].php" method="get">

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
<tr>
<if condition="$show['quickchooser']">
<td class="tfoot">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="$vbphrase[quick_style_chooser]">
$quickchooserbits
</optgroup>
</select>
</td>
</if>
<if condition="$show['languagechooser']">
<td class="tfoot">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="$vbphrase[quick_language_chooser]">
$languagechooserbits
</optgroup>
</select>
</td>
</if>
<td class="tfoot" align="$stylevar[right]" width="100%">
<div class="smallfont">
<strong>
<if condition="$show['contactus']"><a href="$vboptions[contactuslink]" rel="nofollow">$vbphrase[contact_us]</a> -</if>
<if condition="$vboptions['hometitle']"><a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -</if>
<if condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>
<if condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>
<if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
<if condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>
<a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
</strong>
</div>
</td>
</tr>
</table>

<br />

<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>

<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

$vboptions[copyrighttext]
</div>
</div>

</form>

<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php?do=dst" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->

</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
</td>
<td width="45" background="vikingland_style2/style/droite2.jpg">&nbsp;</td>
</tr>
<tr>
<td width="45" height="113"><img border="0" src="vikingland_style2/style/bas_gauche_fix2.jpg" width="45" height="113"></td>
<td background="vikingland_style2/style/bas_fond2.jpg">
<div align="right"><img border="0" src="vikingland_style2/style/bas_banner2.jpg" width="224" height="113"></div></td>
<td width="45" height="113"><img border="0" src="vikingland_style2/style/bas_droit_fix2.jpg" width="45" height="113"></td>
</tr>
</table>

Merci d'avance pour ton aide...byby
suleiman
14/04/2007, 22h23
Le Header :

<!-- logo -->
<table border="0" cellpadding="0" cellspadding="0" width="100%">
<tr>
<td width="45" height="214"><img border="0" src="vikingland_style2/style/haut_gauche_fix2.jpg" width="45" height="214"></td>
<td background="vikingland_style2/style/haut_fond2.jpg"><center><img border="0" src="vikingland_style2/style/haut_banner2.jpg" width="687" height="214"></center></td>
<td width="45" height="214"><img border="0" src="vikingland_style2/style/haut_droit_fix2.jpg" width="45" height="214"></td>
</tr>
<tr>
<td width="45" background="vikingland_style2/style/gauche2.jpg">&nbsp;</td>
<td>
<p align="center">

<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output


Le footer :

<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />
$spacer_close
<!-- /content area table -->
<form action="$vboptions[forumhome].php" method="get">

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
<tr>
<if condition="$show['quickchooser']">
<td class="tfoot">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="$vbphrase[quick_style_chooser]">

$quickchooserbits</optgroup>
</select>
</td>
</if>
<if condition="$show['languagechooser']">
<td class="tfoot">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="$vbphrase[quick_language_chooser]">

$languagechooserbits</optgroup>
</select>
</td>
</if>
<td class="tfoot" align="$stylevar[right]" width="100%">
<div class="smallfont">
<strong>
<if condition="$show['contactus']"><a href="$vboptions[contactuslink]" rel="nofollow">$vbphrase[contact_us]</a> -</if>
<if condition="$vboptions['hometitle']"><a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -</if>
<if condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>
<if condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>
<if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
<if condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>
<a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
</strong>
</div>
</td>
</tr>
</table>
<br />
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>

<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php?do=dst" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
</td>
<td width="45" background="vikingland_style2/style/droite2.jpg">&nbsp;</td>
</tr>
<tr>
<td width="45" height="113"><img border="0" src="vikingland_style2/style/bas_gauche_fix2.jpg" width="45" height="113"></td>
<td background="vikingland_style2/style/bas_fond2.jpg" align="right"><img border="0" src="vikingland_style2/style/bas_banner2.jpg" width="224" height="113"></td>
<td width="45" height="113"><img border="0" src="vikingland_style2/style/bas_droit_fix2.jpg" width="45" height="113"></td>
</tr>
</table>


N.B. Si la problème persiste , alors verifie si tu as decoupé bien les images
stasze
15/04/2007, 11h34
Il n'y a aucune amélioratioin et mes images sont très bien découpées et correpondent en tout point aux valeurs entrées dans le code...Je ne comprends pas du tout mais je vais essayer de chercher....Par contre si tu as une autre idée, je veux bien de ton aide...Je peux également te poster les images que j'ai découpé si cela peut t'aider...byby
suleiman
15/04/2007, 11h41
oui , s.t.p.
Si tu veux par p.m. ou bien ici ..
stasze
15/04/2007, 14h43
oui , s.t.p.
Si tu veux par p.m. ou bien ici ..

Et bien, je vais te les mettre ici:

http://www.lpirates.com/vikingland_style2/style/bas_banner2.jpg bas_banner2.jpg

http://www.lpirates.com/vikingland_style2/style/haut_banner2.jpg haut_banner2.jpg

http://www.lpirates.com/vikingland_style2/style/bas_droit_fix2.jpg bas_droit_fix2.jpg http://www.lpirates.com/vikingland_style2/style/bas_gauche_fix2.jpg bas_gauche_fix2.jpg http://www.lpirates.com/vikingland_style2/style/haut_droit_fix2.jpg haut_droit_fix2.jpg http://www.lpirates.com/vikingland_style2/style/haut_gauche_fix2.jpg haut_gauche_fix2.jpg

http://www.lpirates.com/vikingland_style2/style/droite2.jpg droite2.jpg http://www.lpirates.com/vikingland_style2/style/gauche2.jpg gauche2.jpg http://www.lpirates.com/vikingland_style2/style/haut_fond2.jpg haut_fond2.jpg http://www.lpirates.com/vikingland_style2/style/bas_fond2.jpg bas_fond2.jpg

J'espère que tu arriveras à trouver le problème...Encore merci pour tout ton aide...byby
suleiman
15/04/2007, 15h15
J'ai verifié , c'est bien comme images .

c'est le header :

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="45"><img border="0" src="haut_gauche_fix2.jpg" width="45" height="214"></td>
<td background="haut_fond2.jpg" align="center"><img border="0" src="haut_banner2.jpg" width="687" height="214"></td>
<td width="45"><img border="0" src="haut_droit_fix2.jpg" width="45" height="214"></td>
</tr>
<tr>
<td width="45" background="gauche2.jpg">&nbsp;</td>
<td><p align="center">


le footer

</td>
<td width="45" background="droite2.jpg">&nbsp;</td>
</tr>
<tr>
<td width="45"><img border="0" src="bas_gauche_fix2.jpg" width="45" height="113"></td>
<td background="bas_fond2.jpg" align="right"><img border="0" src="bas_banner2.jpg" width="224" height="113"></td>
<td width="45"><img border="0" src="bas_droit_fix2.jpg" width="45" height="113"></td>
</tr>
</table>


Le header pour vb

<!-- logo -->
<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="45"><img border="0" src="haut_gauche_fix2.jpg" width="45" height="214"></td>
<td background="haut_fond2.jpg" align="center"><img border="0" src="haut_banner2.jpg" width="687" height="214"></td>
<td width="45"><img border="0" src="haut_droit_fix2.jpg" width="45" height="214"></td>
</tr>
<tr>
<td width="45" background="gauche2.jpg">&nbsp;</td>
<td><p align="center">
<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output


Le footer pour vb

<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />
$spacer_close
<!-- /content area table -->
<form action="$vboptions[forumhome].php" method="get">

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
<tr>
<if condition="$show['quickchooser']">
<td class="tfoot">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="$vbphrase[quick_style_chooser]">

$quickchooserbits</optgroup>
</select>
</td>
</if>
<if condition="$show['languagechooser']">
<td class="tfoot">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="$vbphrase[quick_language_chooser]">

$languagechooserbits</optgroup>
</select>
</td>
</if>
<td class="tfoot" align="$stylevar[right]" width="100%">
<div class="smallfont">
<strong>
<if condition="$show['contactus']"><a href="$vboptions[contactuslink]" rel="nofollow">$vbphrase[contact_us]</a> -</if>
<if condition="$vboptions['hometitle']"><a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -</if>
<if condition="$show['admincplink']"><a href="$admincpdir/index.php$session[sessionurl_q]">$vbphrase[admin]</a> -</if>
<if condition="$show['modcplink']"><a href="$modcpdir/index.php$session[sessionurl_q]">$vbphrase[mod]</a> -</if>
<if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
<if condition="$vboptions[privacyurl]"><a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> -</if>
<a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
</strong>
</div>
</td>
</tr>
</table>
<br />
<div align="center">
<div class="smallfont" align="center">
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
</div>

<div class="smallfont" align="center">
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->

$vboptions[copyrighttext]
</div>
</div>
</form>
<if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php?do=dst" method="post" name="dstform">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</if>
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
</td>
<td width="45" background="droite2.jpg">&nbsp;</td>
</tr>
<tr>
<td width="45"><img border="0" src="bas_gauche_fix2.jpg" width="45" height="113"></td>
<td background="bas_fond2.jpg" align="right"><img border="0" src="bas_banner2.jpg" width="224" height="113"></td>
<td width="45"><img border="0" src="bas_droit_fix2.jpg" width="45" height="113"></td></tr></table>
stasze
15/04/2007, 20h59
Merci beaucoup Suleiman, le problème est résolu...Où était mon erreur, que cela puisse m'aider pour la suite...?:fool:
Encore 1000 fois merci de ton aide...:yahoo::yahoo::yahoo:
stiwords
16/07/2007, 16h34
Félicitation c'est un bon travail je souhaite une bonne chance !