La date/heure actuelle est Mar 17 Oct 2017 - 13:25 - créer un forum

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

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: 1, 2, 3, 4  >

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


Hors ligne
Invité




MessagePosté le: Dim 16 Nov 2008 - 23:35    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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




Dernière édition par An0nyme le Ven 9 Jan 2009 - 14:59; édité 6 fois
Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Lun 17 Nov 2008 - 09:03    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

bonjour

effectivement bonne idée de tuto

bien réussi
_______________________


Forum
Auteur Message
Twilight


Hors ligne
Invité




MessagePosté le: Lun 17 Nov 2008 - 15:27    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Lun 17 Nov 2008 - 15:28    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

bonjour

que veux tu dire par bloc que veux tu faire
_______________________


Forum
Auteur Message
Twilight


Hors ligne
Invité




MessagePosté le: Lun 17 Nov 2008 - 15:29    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

themalin a écrit:
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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Lun 17 Nov 2008 - 15:37    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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
Auteur Message
Twilight


Hors ligne
Invité




MessagePosté le: Lun 17 Nov 2008 - 15:46    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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

Auteur Message
med-dz
Membre


Hors ligne
Membre

Inscrit le: 26 Mai 2008
Messages: 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

MessagePosté le: Mer 10 Déc 2008 - 14:28    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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
Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Mer 10 Déc 2008 - 14:31    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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
Auteur Message
med-dz
Membre


Hors ligne
Membre

Inscrit le: 26 Mai 2008
Messages: 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

MessagePosté le: Mer 10 Déc 2008 - 14:37    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

ç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
Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Mer 10 Déc 2008 - 14:43    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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


Forum
Auteur Message
med-dz
Membre


Hors ligne
Membre

Inscrit le: 26 Mai 2008
Messages: 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

MessagePosté le: Mer 10 Déc 2008 - 14:48    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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
Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Mer 10 Déc 2008 - 15:09    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

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


Forum
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 02:46    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

Twilight a écrit:
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


Auteur Message
Tuserapas


Hors ligne
Invité




MessagePosté le: Dim 11 Jan 2009 - 12:59    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum Répondre en citant

Bonjour ,

Enfaite mon problème est que je n'est pas "<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">" mais
Code: Sélectionner - Agrandir

<div id="page">
<center>
<form style="display: inline; margin:6;">
<select style="background: #ffffff;" onchange="chooseStyle(this.options[this.selectedIndex].value);">
<option>Choisir une image de fond</option>
<option value="1">Fond 1</option>
</select>
</form>
</center>

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

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



Donc comment je dois faire? :/

Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 13:25    Sujet du message: [TUTO]Ajouter un cadre d'images autour de votre forum

Montrer les messages depuis:   
Répondre au sujet Page 1 sur 4 Aller à la page: 1, 2, 3, 4  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401