tuto - [Tuto codage] Modifier le contenu de sa signature codée

Sujet: [Tuto codage] Modifier le contenu de sa signature codée

tuto - [Tuto codage] Modifier le contenu de sa signature codée Empty

Mar 22 Déc - 16:19

Salut à tous,

comme prévu, voilà le tuto pour modifier les signatures codées. Accrochez-vous, ce n'est pas si simple que ça quand on n'y connaît rien en code.
Tout d'abord, il vous faut un forum avec les droits d'administrateur, sur lequel est uploadée votre signa. Pour cela, voir le tuto sur l'hébergement d'une signa codée.

ETAPE 1 : ACCEDER AU CODE

Connectez-vous sur le forum, allez tout en bas, et vous aurez normalement un lien « Panneau d'administration ».

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799544-01

Cliquez dessus. Vous arriverez sur l'accueil du panneau d'administration. Là, allez dans l'onglet « module » en haut.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-02

Descendez, et dans la section HTML/Javascript à gauche, allez dans « Gestion des pages HTML ».

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-03

Vous allez tomber sur une liste de pages HTML, qui gèrent vos signas, mais aussi des modules nécessaires du forum, donc ne modifiez rien d'autre que ce que je vous dis.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799963-04

Chaque page dispose de son adresse (1), d'un nom qui vous permettra de savoir quelle page est votre signa (2) et de petites icônes permettant de modifier le code (3).

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-05

Pour modifier le code, cliquer sur l'icone de modification avec écrit « HTML » dessus.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-06

Vous devrez tomber sur une page de code en couleur avec des chiffres sur le côté. Le bouton « Valider » enregistrera vos modifications. Le bouton « Prévisualisation » ouvrira un nouvel onglet avec un aperçu du code mais n'enregistrera pas vos modifications.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799610-07

ETAPE 2 : EXPLICATION DE LA STRUCTURE DU CODE

Tout d'abord, explication rapide de la structure du code (pour ceux que ça intéresse).

Le document se divise en 2 parties : le « head », qui détermine les données du document, son apparence et sa structure, entre les balises

Code:: <head> </head>

et le « body », qui correspond au contenu de la signa, entre les balises

Code:: <body> </body>

I. LE HEAD

1. Les données du document

Tout en haut, il y a les données du document (obligatoire dans tout code HTML). Elles vont permettre aux navigateurs de reconnaître la page de code.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-08

2. Le code Javascript

Dans le « head », on trouve le code javascript qui va gérer les animations de la ban (changement d'onglets quand on sélectionne un onglet différent en haut). Cette partie-là est situé entre les balises

Code:: <script type="text/javascript">

Code:: </script>

Il ne faut pas y toucher du tout.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799608-09

Code:: <script type="text/javascript">
//
  </script>

3. Le code CSS

On trouve également dans le « head » le CSS. Il s'agit de l'apparence et de la structure de la signa. Sans le CSS, la signa ne serait qu'une suite d'images et de textes et n'aurait pas la forme d'onglets que nous avons. Le CSS est situé entre les balises

Code:: <style type="text/css">

Code:: </script>

A moins de savoir à quoi chaque balise correspond, il ne faut également rien modifier.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799609-10

Code:: <style type="text/css">

   /*onglets*/
.onglet,

.onglet_0
   {
   z-index: 1;
   width: 125px;
   display:inline-block;
   position: relative;
   background: #edfaff;
   margin:auto;
   margin-bottom: -2px;
   padding: 5px;
   border: 2px dotted #ffffff;
   border-radius:8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-radius: 8px 8px 0 0;
   letter-spacing: 3px;
   text-align: center;
   font-variant: small-caps;
   font-style: bold;
   color: #006AA3;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;
   }
.onglet_1
   {
   z-index: 2;
   width: 125px;
   display:inline-block;
   position: relative;
   background: #edfaff;
   margin:auto;
   margin-bottom: -2px;
   padding: 5px;
   border: 2px dotted #ffffff;
   border-radius:8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-radius: 8px 8px 0 0;
   letter-spacing: 5px;
   text-align: center;
   font-variant: small-caps;
   font-style: bold;
   color: #006AA3;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;
   }
.onglet:hover
   {
   background: #ccf5ff
   }

   /*contenu des onglets*/
.contenu_onglet
   {
   z-index: 3;
   height : 200px;
   width : 545px;
   font-family : "Times New Roman";
   background: #edfaff;
   border: 2px dotted #ffffff;
   padding: 10px;
   display:none;
   overflow : auto;
   color: #006AA3;
   }
#contenu_onglet_1er
   {
   font-size : 12px ;
   font-variant: small-caps;
   }
#contenu_onglet_2eme
   {
   font-size : 14px ;
   font-variant: small-caps;
   font-style: bold;
   text-decoration:underline;
   }

   /*lien de bas de signa*/
.links
   {
   width : 565px;
   height : 32px;
   border: 2px dotted #ffffff;
   margin-top: -2px;
   border-radius:0 0 8px 8px;
   -moz-border-radius: 0 0 8px 8px;
   -webkit-border-radius: 0 0 8px 8px;
   background: #edfaff;
   text-align: center;
   color: #008AD4;
   font-variant: small-caps;
   text-decoration: none !important;
   }
.button img
   {
   width: 75px;
   height:auto;
   padding-left:30px;
   padding-right:30px;
   top:0px;
   }
.button2 img
   {
   width: 75px;
   height:auto;
   padding-left:30px;
   padding-right:30px;
   padding-top: 5px;
   margin-bottom:-5px
   }

   /*intérieur onglet présentation de la IOT*/
.avatar
   {
   max-width: 100px;
   max-height: 100px;
   padding:10px;
   }
div.infobulle
   {
   position: relative;
   cursor:pointer;
   }
div.infobulle > div
   {
   display: none;
   }
div.infobulle:hover
   {
   background: none;
   z-index: 500;
   }

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div
   {
   display: block;
   width:90px;
   position: absolute;
   top: 110px;
   left:10px;
   background: #ccf5ff;
   padding: 3px;
   border: 2px dotted #ffffff;
   text-align:center;
   color: #008AD4;
   font-variant: small-caps;
   text-decoration: none !important;
   font-size : 12px ;
   font-style: bold;
}
.texte_infobulle
   {
   color: #008AD4 !important;
   }

   :*onglet présentation perso*/
.presentation
   {
   position: relative;
   width: 85%;
   }
.prez-titre
   {
   margin-bottom: 10px;
   text-align: center;
   font-size: 1.6em;
   font-style: bold;
   font-variant: small-caps;
   }
.prez-image
   {
   position: absolute;
   z-index: 4;
   top: 80px;
   left:40px;
   width: 150px;
   height: 150px;
   border-radius: 8px;
   background-size: cover;
   background-position: top;
   }
.prez-contenu
   {
   left: 190px;
   width: 300px;
   max-height:136px;
   padding: 10px 15px;
   border-radius: 8px;
   font-size: 14px;
   line-height: 1.5;
   position: relative;
   background: #ccf5ff;
   border: 2px dotted #ffffff;
   border-radius: 8px;
   }
.prez-overflow
   {
   max-height: 137px;
   overflow: auto;
   }
.prezname
   {
   font-style: bold;
   font-variant: small-caps;
   text-decoration: underline;
   }
.prez-image2
   {
   top: 80px;
   left:40px;
   max-width: 0px;
   max-height: 0px;
   }
.prez-image2 img
   {
   padding-top: 5px;
   max-width: 175px;
   max-height: 175px;
   }
   /*scrollbar sur chrome */
.contenu_onglet::-webkit-scrollbar,
.prez-overflow::-webkit-scrollbar
   {
   width: 5px;
   }
.contenu_onglet::-webkit-scrollbar-track,
.prez-overflow::-webkit-scrollbar-track
   {
   background: rgba(121, 119, 115, 0.3);
   border-radius: 5px;
   }
.contenu_onglet::-webkit-scrollbar-thumb,
.prez-overflow::-webkit-scrollbar-thumb
   {
   background: rgba(121, 119, 115, 0.8);
   border-radius: 5px;
   }
a:link
   {
   text-decoration: none;
   color: #008AD4;
   }
a:hover
   {
   text-decoration: none;
   color: #0FABFF;
   }
  </style>

La longueur du CSS varie selon la complexité du document. Le CSS va se rattacher à des indicateurs (« class » ou « id ») placés dans le code HTML, et va définir leur apparence.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799607-11ter

Remarque : Les indications entre /* et */ ne sont pas du code mais des commentaires pour mieux comprendre le code. Leur seul utilité est de faciliter la lecture du code.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799608-12

II. LE BODY

Le « body » contient le code HTML qui correspond au contenu du document. C'est ici que vous effectuerez vos modifications.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799611-13

Code:: 
  <div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Signature</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Userbars</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">IOT</span>
<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">Prez'</span>
   </div>


   <div class="signa">
   <div class="contenu_onglet" id="contenu_onglet_1er" align="center">
   <img src="http://image.noelshack.com/fichiers/2015/48/1448817539-ban-alex-by-death.jpg" alt=""></br>
   Thanks Deathfire</br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986833-banniere-blood-lad-2.jpg" alt=""></br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986835-banniere-lol-petite.jpg" alt=""></br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986833-banniere-not-a-sound-in-my-world.jpg" alt=""></br>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_2eme" align="center">
   Films</br>
   <img src="http://nsa33.casimages.com/img/2014/10/19/141019055939354998.gif" alt="Star Wars Fan"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986456-harry-potter-fan.gif" alt=""></br>
   <img src="http://nsa33.casimages.com/img/2014/10/19/141019121613237320.gif" alt="Slytherin House"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986453-lord-of-the-rings-fan.gif" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986455-the-hobbit-fan.gif" alt=""></br>
   Séries</br>
   <img src="http://image.noelshack.com/fichiers/2015/38/1442273443-dominion-fan.jpg" alt="Dominion Fan"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986445-avatar-the-last-airbender-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986446-legend-of-korra-fan.jpg" alt=""></br>
   Jeux vidéos</br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-ii-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-iii-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-v-fan.jpg" alt=""></br>
   Divers</br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986437-iot-fan.gif" alt="IOT Fan"></br>
   <img src="http://nsa34.casimages.com/img/2014/10/19/141019060815674490.jpg" alt="Sora's Twin"></br>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_3eme">
   <div class="presentation">
   <div class="prez-image2"><img src="http://image.noelshack.com/fichiers/2015/49/1449015234-logo-2.png" alt=""></div>
   <div class="prez-titre">La IOT</div>
   <div class="prez-contenu">
   <div class="prez-overflow">
   La Imagination Overflow Team est une team d'AMVs et de graphisme créé le 5 mai 2013 par KazeShin, Umi et Keintseru. Elle comprend actuellement 11 membres, 8 AMV-makers et 3 graphistes dont 2 codeurs.</br>
   <span class="button2"><a href="https://www.youtube.com/user/ImaginationTeamAmvs" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span>
   <span class="button2"><a href="https://www.facebook.com/imaginationoverflowteam/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span>
   </div>
   </div>
   </div>
   <table align="center">
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448913337-avatarkeint.jpg" alt="avatar Keintseru" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u4" target="_blank">Profil</a> | <a href="https://www.youtube.com/channel/UCGXZ5HefgMwTYIFpfMMgilw" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887502-avatarlachevrolait.jpg" alt="avatar Lachèvre" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u100" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Lachevrolait" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448886953-avatarama.jpg" alt="avatar Amariyo" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u98" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Amaryio" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448899809-avatarluubioo.jpg" alt="avatar LuubiOo" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u32" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/LuubiOo" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887405-avataretov2jpg.jpg" alt="avatar ETO" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u119" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/tehCruumby" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449055543-avatar-azazel.jpg" alt="avatar Azazel" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u58" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/ahmedjarid" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449055542-avata-soulness.jpg" alt="avatar SoulNess" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u31" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Soul2Ness" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054916-avatar-xeno.jpg" alt="avatar Xeno" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u30" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/02Lyric" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/48/1448739391-avatarteam.jpg" alt="avatar Deathfire" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u117" target="_blank">Profil</a> | <a href="http://deathfireiot.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg" alt="avatar Alexielios" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u45" target="_blank">Profil</a> | <a href="http://alexielios.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054914-avatar-yu-kun.jpg" alt="avatar Yu-Kun" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u3" target="_blank">Profil</a> | <a href="http://yuu-graphique.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="" alt="" />
   <div class="texte_infobulle"><a href="" target="_blank">Profil</a> | <a href="" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   </table>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_4eme">
   <div class="presentation">
   <div class="prez-image" style="background-image: url('http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg')"></div>
   <div class="prez-titre">Présentation</div>
   <div class="prez-contenu">
   <div class="prez-overflow">
   <span class="prezname">Pseudo</span> : Alexielios (ou Alex')</br>
   <span class="prezname">Age</span> : 24 ans</br>
   <span class="prezname">Fonction</span> : Graphiste, codeuse, administratrice du forum et prof de français</br>
   <span class="prezname">Hobbies</span> : grapher, coder (un peu), traduire des fanfictions, jouer et composer de la musique, dessiner, coloriser et collectionner un paquet de trucs (souvent inutiles)</br>
   <span class="prezname">Autre</span> : N'hésitez pas à me contacter si vous avez un problème sur le forum ou simplement si vous avez besoin d'un coup de main dans mes domaines de compétence <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></br>
   </div>
   </div>
   </div>
   </div>
   </div>


<div class="links">
<table align="center" class="button_table">
   <tr>
   <td><span class="button"><a href="https://www.facebook.com/alexielios" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="facebook" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span></td>
   <td><span class="button"><a href="http://alexielios.deviantart.com/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png" alt="deviantart" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-deviantart-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png';" /></a></span></td>
   <td><span class="button"><a href="http://alexielios.blogspot.fr/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010092-blogger.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-blogger-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010092-blogger.png';" /></a></span></td>
   <td><span class="button"><a href="https://www.youtube.com/user/Alexielios" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span></td>
   </tr>
   </table>
   </div>

Remarque : Comme pour le CSS, les indications entre

Code::

sont des commentaires pour aider à la lisibilité du code.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799608-13bis

ETAPE 3 : MODIFICATION DU CODE

Allez dans la partie code HTML, qui est juste après la balise

Code:: <body>

Là, vous verrez des indications entre

Code::

qui vous permettront de savoir de quel onglet il s'agit.

I. MODIFICATION DU TITRE DES ONGLETS

Pour modifier le nom des onglets, allez dans la section et modifier leur titre qui est juste avant la balise

Code:: </span>

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799610-18

II. MODIFICATION DES ONGLETS 1 ET 2

Pour modifier le contenu des onglets 1 et 2, allez dans la section du HTML appropriée.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799611-19

Vous pouvez à loisir modifier tout ce qui est entre

Code:: <div class="contenu_onglet" id="contenu_onglet_1er" align="center">

Code:: </div>

sans toucher à ces deux balises.

Code:: <div class="contenu_onglet" id="contenu_onglet_1er" align="center">
CONTENU DE L'ONGLET
</div>

Explication des balises les plus courantes :

si vous voulez retourner à la ligne, il faut mettre un

Code:

<br/>

à la fin de votre ligne (sauf si celle-ci commence par une balise « div » ou « span »)
pour sauter une ligne entre deux éléments (image ou texte), il faut également mettre

Code:

<br/>
pour ajouter une image, vous devez mettre le code :

Code:

<img src="LIEN DE VOTRE IMAGE" alt="NOM DE L'IMAGE (pas obligatoire)"/>
pour ajouter un lien, vous devez mettre le code :

Code:

<a href="VOTRE LIEN" target="_blank">NOM DU LIEN</a>

Remarque : « target="_blank" » signifie que le lien s'ouvrira dans un nouvel onglet.
pour mettre un lien sur une image, il suffit de combiner les deux, ce qui donne :

Code:

<a href="VOTRE LIEN" target="_blank"><img src="LIEN DE VOTRE IMAGE" alt="NOM DE L'IMAGE (pas obligatoire)"></a>

III. MODIFICATION DE L'ONGLET 4

Pour modifier votre présentation, allez dans la section HTML du 4ème onglet.

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799611-21

Votre présentation est écrite entre

Code:: <div class="prez-overflow">

Code:: </div>

Vous pouvez écrire ce que vous voulez entre ces balises ^^

tuto - [Tuto codage] Modifier le contenu de sa signature codée 1450799610-22

Code:: 
   <div class="contenu_onglet" id="contenu_onglet_4eme">
   <div class="presentation">
   <div class="prez-image" style="background-image: url('http://r28.imgfast.net/users/2817/54/60/86/avatars/4-12.jpg')"></div>
   <div class="prez-titre">Présentation</div>
   <div class="prez-contenu">
   <div class="prez-overflow">
   VOTRE PRESENTATION
   </div>
   </div>
   </div>
   </div>
   </div>

Voilà, normalement vous pouvez modifier votre signa comme vous voulez maintenant ^^

Note : Si vous voulez ajouter ou supprimer un onglet, changer les liens en bas de la signa ou changer les liens de votre chaîne YT dans le 3ème onglet de présentation des membres, contactez-moi.

Dernière édition par Alexielios le Mar 24 Mai - 15:13, édité 10 fois

Messages : 3377
Date d'inscription : 27/09/2013
Age : 32

Alexielios3377
27/09/2013
32