It is currently Wed 28 Sep 2016 - 02:01 - créer un forum

[TUTO]Ajouter un cadre d'images autour de votre forum

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4  >

[TUTO]Ajouter un cadre d'images autour de votre forum
Author Message
An0nyme


Offline
Guest




PostPosted: Sun 16 Nov 2008 - 23:35    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

PublicitéSupprimer les publicités ?
Informations sur le tutoriel
NomAjouter un cadre d'images autour de votre forum
AuteurAn0nyme (Contactez-moi)
Version1.0.0
DescriptionCe Tuto va vous servir à rajouter un cadre autour de votre forum pour ceux qui n'en ont pas, deux types de cadres existent, les cadres classiques (unicolore) et les cadres images (des images vont venir encadrer votre forum), la majorité, si ce n'est tous possèdent des cadres classiques, nous allons donc voir comment les améliorer en cadres d'imges.

En deuxième partie (à venir bientôt) nous allons voir comment faire un cadre d'images avec des coins (8 images).
Exemple





Défaut(s)
  • Aucun encore répertorié

Difficulté
  • Installation: novice/initié/adepte
  • Compréhension: novice/initié/adepte

Templates à modifier
  • overall_header.tpl
  • overall_footer.tpl

Testé sur
  • Navigateurs
    • Firefox 3.0.3
    • Internet Explorer 7.0.6

  • Thèmes Xooit
    • ZenGarden


A utiliser avec
  • Aucun spécifiquement.

A ne pas utiliser avec
  • Aucun encore répertorié.

Notes
  • Munissez-vous de préférence d'images différentes afin que l'effet soit rendu optimal.




I- bordure en 4 côtés




Installation
Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl


Cherchez
Code: Sélectionner - Agrandir

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

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

<table width="92%" cellspacing="0" cellpadding="10" border="0" align="center"> 
    <tr>




Ajoutez après :
Code: Sélectionner - Agrandir

            <td width="100%"> 
             <table width="100%" cellspacing="0" cellpadding="0"> 
              <tr> 
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" width="100%" style="background-image: url('LIEN DE VOTRE IMAGE DU HAUT');">&nbsp;</td> 
              </tr> 
             </table>
             <table width="100%" cellspacing="0" cellpadding="0">
              <tr> 
                <td  width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN DE VOTRE IMAGE DE GAUCHE');">&nbsp;</td>




Sauvegardez


Ouvrez le template overall_footer.tpl


Cherchez
Code: Sélectionner - Agrandir

      </td> 
   </tr> 
</table> 
 
</body> 
</html>




Remplacez par :
Code: Sélectionner - Agrandir

                </td> 
                <td width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE DE DROITE');">&nbsp;</td> 
           </tr>
           </table>
           <table width="100%" cellspacing="0" cellpadding="0"> 
           <tr> 
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" width="100%" style="background-image: url('LIEN IMAGE DU BAS');">&nbsp;</td> 
   </tr> 
      </table> 
    </td> 
  </tr> 
</table>
</body> 
</html>




Sauvegardez



II- bordure en 4 côtés et 4 coins




Installation
Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl


Cherchez
Code: Sélectionner - Agrandir

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

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

<table width="92%" cellspacing="0" cellpadding="10" border="0" align="center">
    <tr>




Ajoutez après :
Code: Sélectionner - Agrandir
            <td width="100%">
             <table width="100%" cellspacing="0" cellpadding="0">
              <tr>
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COIN HAUT GAUCHE'); background-position: bottom right;">&nbsp;</td>
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COTÉ HAUT'); background-position: bottom;">&nbsp;</td>
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COIN HAUT DROIT'); background-position: bottom left;">&nbsp;</td>
              </tr>
              <tr>
                <td  width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COTÉ GAUCHE'); background-position: right;">&nbsp;</td>



Sauvegardez


Ouvrez le template overall_footer.tpl


Cherchez
Code: Sélectionner - Agrandir

      </td>
   </tr>
</table>
 
</body>
</html>




Remplacez par :
Code: Sélectionner - Agrandir
                </td>
                <td width="LARGEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COTÉ DROITE'); background-position: left;">&nbsp;</td>
           </tr>
           <tr>
                <td width="LARGEUR EN PX DE VOTRE IMAGE" height="HAUTEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COIN BAS GAUCHE'); background-position: top right;">&nbsp;</td>
                <td height="HAUTEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COTÉ BAS'); background-position: top;">&nbsp;</td>
                <td width="LARGEUR EN PX DE VOTRE IMAGE" height="HAUTEUR EN PX DE VOTRE IMAGE" style="background-image: url('LIEN IMAGE COIN BAS DROIT'); background-position: top left;">&nbsp;</td>
          </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>



Sauvegardez




Last edited by An0nyme on Fri 9 Jan 2009 - 14:59; edited 6 times in total
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sun 16 Nov 2008 - 23:45    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Tuto Génial
Par contre sur un de mes fofo de test j'obtiens cela http://yskander8.xooit.com/index.php
Est-il possible à ton avis de rajouter une image différente pour les angles si on veux mettre quelque chose d'arrondis ou avec une forme particulière ?
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Mon 17 Nov 2008 - 09:03    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

bonjour

effectivement bonne idée de tuto

bien réussi
_______________________


Forum
Author Message
Twilight


Offline
Guest




PostPosted: Mon 17 Nov 2008 - 15:27    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Bonjour,

Joli tutoriel en effet, à voir l'effet rendu sur les forums, chacun aimant ou pas. Mais pour ma part, si on peut "encadrer" pas seulement le forum, mais plutôt des blocs, alors il sera adapté. Merci bien cher AnonYme. Wink


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Mon 17 Nov 2008 - 15:28    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

bonjour

que veux tu dire par bloc que veux tu faire
_______________________


Forum
Author Message
Twilight


Offline
Guest




PostPosted: Mon 17 Nov 2008 - 15:29    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

themalin wrote:
bonjour

que veux tu dire par bloc que veux tu faire


Themalin, ça presse pas, mais en fait, ça serait plus pour encadrer des blocs du portail, ou alors les messages de bienvenue, mais je trouverais bien comment faire, suffit juste de rajouter les plus de ce tutoriel sur les cellules concernées. Wink


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Mon 17 Nov 2008 - 15:37    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

tu peux faire la même chose il suffit de changer les templates modportal/....... et de faire la même modif sauf que tu n'auras pas les body à chercher tu regardes les table et tu fais les modifs à ce niveau
_______________________


Forum
Author Message
Twilight


Offline
Guest




PostPosted: Mon 17 Nov 2008 - 15:46    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Ok, merci bien Themalin toujours aussi rapide et clair. Wink

Author Message
med-dz
Membre


Offline
Membre

Joined: 26 May 2008
Posts: 39
Niveau:
Point(s): 39
Moyenne: 1.00
Windows XP (ou plus ancien) Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Wed 10 Dec 2008 - 14:28    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Bonjour à tous,
Dans le thème creamy white je ne trouve pas le code:



 
Code: Sélectionner - Agrandir
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 
<a name="top"></a>
 
<table width="92%" cellspacing="0" cellpadding="10" border="0" align="center"> 
    <tr> 
 

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 
<a name="top"></a>
 
<table width="92%" cellspacing="0" cellpadding="10" border="0" align="center"> 
    <tr>   

_______________________
http://med-dz.xooit.com/


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 10 Dec 2008 - 14:31    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

bonjour

sur ton forum as toi c'est ici
Code: Sélectionner - Agrandir

</script>
<link rel="shortcut icon" href=" http://img119.imageshack.us/img119/4499/1228757310ce0.png "> <!-- ]]>"')}*/ //--><!--</script>--><!--//--><script type="text/javascript" src="http://img3.xooimage.com/files/c/1/5/common-424e3c.js?2_20080531"></script></head>
<center><body>
<a name="top"></a>
<table class="bodyline" width="86%" cellspacing="0" cellpadding="0" border="0">
<tr>


tu mets le code donné après ça
_______________________


Forum
Author Message
med-dz
Membre


Offline
Membre

Joined: 26 May 2008
Posts: 39
Niveau:
Point(s): 39
Moyenne: 1.00
Windows XP (ou plus ancien) Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Wed 10 Dec 2008 - 14:37    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

ça c'est pour le premier code et je mets après c'est ça?!
et pour la largeur je mets combien pour avoir un cadre comme celui de l'exemple?
_______________________
http://med-dz.xooit.com/


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 10 Dec 2008 - 14:43    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

oui tu mets le code donné après ce que je t'ai indiqué
_______________________


Forum
Author Message
med-dz
Membre


Offline
Membre

Joined: 26 May 2008
Posts: 39
Niveau:
Point(s): 39
Moyenne: 1.00
Windows XP (ou plus ancien) Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Wed 10 Dec 2008 - 14:48    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Voici l'image que je veux mettre :
 

et je prends quelles hauteur et largeur pour avoir un aspect comme l'exemple du tuto!
_______________________
http://med-dz.xooit.com/


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 10 Dec 2008 - 15:09    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

celle que tu as semble déjà etre à la bonne taille 
_______________________


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 02:46    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum Reply with quote

Twilight wrote:
Joli tutoriel en effet, à voir l'effet rendu sur les forums, chacun aimant ou pas. Mais pour ma part, si on peut "encadrer" pas seulement le forum, mais plutôt des blocs, alors il sera adapté. Merci bien cher AnonYme. Wink


Euh non pas possible de préciser une démarche bien précise pour les novices en HTML malheureusement donc je m'en suis tenu à la démarche pour le cadre du forum.
Le truc c'est qu'il n'y a pas moyen de convertir cela proprement dans une classe CSS donc pas moyen de généraliser sans perdre en chemin les novices.

EDIT : maintenant vous pouvez faire un cadre avec 4 côtés et 4 coins. Wink


Author Message
Contenu Sponsorisé





PostPosted: Today at 02:01    Post subject: [TUTO]Ajouter un cadre d'images autour de votre forum

Display posts from previous:   
Reply to topic Page 1 of 4 Goto page: 1, 2, 3, 4  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401