Images ombragées sur les boards de votre forum:

[Deaz]

--------------Tutoriel by Overdoz/Deaz---------------



Type de la modification: Modification graphique
Description: Ce tutoriel va vous permettre de place des images ombragés (ou autres) sur les bords gauche et droite de votre forum.
Logiciel: Photoshop (ou autres) et vBulletin (toutes versions).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Ouvrez votre logiciel Photoshop et créer un nouveau document de 15*3 pixels et zoomez au maximum (CTRL+ESPACE+CLIC DROIT):

http://img263.imageshack.us/img263/3286/89574997nn8.th.png (http://img263.imageshack.us/my.php?image=89574997nn8.png)

Choisissez une couleur dans votre nuancier ou double cliquez sur la couleur de premier plan et dans le champs de couleur hexadécimale, définissez le code du fond de votre forum.

Une fois la sélection de couleur faite, faites ALT+SUPPR pour remplir votre zone de travail:

http://img152.imageshack.us/img152/4079/56418294gc6.th.png (http://img152.imageshack.us/my.php?image=56418294gc6.png)

Nous allons maintenant faire l'ombre de votre forum.
Prenez l'outil dégradé http://img107.imageshack.us/img107/9509/degradeoy8.png et cliquez sur http://img126.imageshack.us/img126/1766/couleurdegradelj6.png et sélectionnez ceci http://img408.imageshack.us/img408/7741/typedegradeqe6.png puis validez en cliquant sur OK.

De là il vous suffit de faire votre dégradé de droite à gauche légérement.

Si vous le souhaitez, vous pouvez également faire sur le board droit de votre image une ligne d'un pixel d'une certaine couleur.

Une fois votre image finie, faites:
Image > Mode > Couleur indexée > OK
Puis:
Fichier > Enregistrer sous > left.gif

Pour créer votre image pour le côté droit, il vous suffit d'allez dans:
Image > Rotation de la zone de travail > Symétrie horizontale
Enregistrer ensuite:
Fichier > Enregistrer sous > right.gif

Vous voici désormais avec les deux images qui vont vous permettre de réaliser vos bords ombrés.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Avant de modifier quoique ce soit, uploader vos images (left.gif et right.gif) dans le dossier "misc" de votre style (via ftp).

Allez dans votre admincp puis suivez cette direction:
Admincp > Styles & Templates > Gestionnaire de style
Choisissez ensuite le style que vous souhaitez modifier:
Votre-style > Toutes les options de styles > GO

Dans la box "Templates communs" dans la partie "header", chercher:

<a name="top"></a>

Ajoutez en dessous:

<table width="950" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="15" style="background-image:url(images/Votre-style/misc/left.gif)"><img src="images/Votre-style/misc/left.gif" width="15" border="0" alt="" /></td>
<td width="100%">

<table width="950" - 950 doit ètre modifier par la largeur fixe de votre forum.

Dans la box "Templates communs" dans la partie "footer", chercher:

<if condition="$show['dst_correction']">

Ajoutez au dessus:

</td>
<td width="15" style="background-image:url(images/Votre-style/misc/right.gif)"><img src="images/Votre-style/misc/right.gif" width="15" border="0" alt="" /></td>
</tr>
</table>

Il ne vous reste plus qu'à enregistrer, votre forum possède maintenant des côtés ombrés.


http://img528.imageshack.us/img528/3539/finjv7.th.png (http://img528.imageshack.us/my.php?image=finjv7.png)









--------------Tutoriel for Deaz.fr - vBulletin-Ressources - vB-Hacks---------------

[Ombre]

Merci pour ce tuto :)

il sera utile pour des membres :)

[Allan]

Joli, merci du partage Deaz ;)

[arroser]

<td width="15" style="background-image:url(images/Votre-style/misc/left.gif)"><img src="images/Votre-style/misc/left.gif" width="15" border="0" alt="" /></td>
1°/ pourquoi appliquer un style à un <td> contenant une image codée en dur ? ça fait doublon....

Mieux ne vaudrait il pas créer une class spécifique dans le css ?
et ne rien coder en dur ?

c'est dans les préconisation que les images de "décorations" soient des background... cela évite aussi les balises ALT vides.

http://pompage.net/pompe/bien-utiliser-le-texte-alternatif/#images_arriere-plan

2°/ pour un forum fixed et pour obtenir un résultat telque celui qui est sur la capture d'écran ci dessus, il pourrait être plus simple de créer une unique image de fond de 980px (15+950+15) et la centrer.
L'image de fond sera appliquée dans le body (traduit par "corps" dans vB)
body
{
background: #tacouleur url(tonstyle/images/misc/fond_body.gif) repeat-y top center;

} certe, dans ce cas, l'image ombragée va aller jusqu'en bas de la page du navigateur (et englober le copyright vB qui est placé tout en bas)

un peu comme il a été fait ici : http://www.vbulletin-ressources.com/forum/showthread.php?t=6472

3°/ j'ai un doute, mais le chemin n'est il pas : /Votre-style/images/misc/left.gif plutôt que
images/Votre-style/misc/left.gif :blush2: