Créer une IframeQuelle en est l'utilité ? La première chose à savoir c'est qu'un fois votre page HTML édité, celle-ci, insérée dans votre iframe sera mise à jour partout. Ceci est donc très pratique pour les publicités des forums par exemple qui n'ont pas besoin d'être remises à jour tout le temps, une fois suffit, le reste c'est automatique. Un second point très pratique, c'est que ça ne connait aucune limite de caractère, ainsi, si vous la glissez en page d'accueil, en message d'accueil ou autre, vous ne rencontrerez pas le genre de déconvenue désagréables que donne un message avec pour réponse "le nombre de caractère est trop grand". Enfin, selon vos réglages personnels, aucune mise en page de forum ne déformera votre iframe, elle restera telle que vous l'avez créée.
IMPORTANT : Pour suivre ce tutoriel, il vous faut connaître quelques bases HTMLVoici quelques exemples de ce que vous pouvez réaliser grâce à ce système d'iframe et son contenu personnalisé :
Exemple 1 Exemple 2 Exemple 3 ÉTAPE I : CRÉER UNE PAGE HTMLPour se faire, rendez-vous dans votre panneau d'administration. Puis, cliquez dans les onglets horizontaux sur "modules", ensuite, dans le menu verticale de gauche dans
HTML, cliquez sur "gestion des pages HTML". Là, vous arrivez sur votre page de gestion. Vous cliquez donc sur "créer une nouvelle page HTML".
Jusqu'à présent, pas de problème, tout est simple. C'est ensuite que cela se complique quelque peu. Une page HTML c'est un peu comme un enfant, chaque chose que vous voulez qu'elle face, il vous faut le lui dire mais cela, textuellement, par exemple si vous n'écrivez pas
- Code:
-
<br>
votre texte ne reviendra pas à la ligne. Il vous faudra mettre
- Code:
-
<br><br>
pour un saut de ligne.
Voici à quoi doit ressembler votre page HTML vide :
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
</head>
<body>
</body></html>
À noter que ce tutoriel a pour vocation de vous apprendre à en créer, non de réaliser le contenu tel que vous le montre les exemples
Passons à quelques explications, car un code c'est bien, mais si on ne comprend rien, ça sert à rien.
Entre les balises
- Code:
-
<style type="text/css">
</style>
C'est votre CSS que vous devez inclure pour signifier à votre page que vous voulez telle couleur de police, telle taille, tel effet etc. Vous ne devez absolument pas mettre de codage HTML entre elles, simplement votre CSS.
Entre les balises
- Code:
-
<body>
</body>
Vous devez placer impérativement votre contenu au format HTML et surtout pas en BBcode. Notons que tous les caractères spéciaux ne sont pas prit en compte.
A vous de mettre entre ces balises ce que vous souhaitez placer en iframe. Soit, si l'on prend l'exemple des panneaux coulissant, leurs contenu.
Vous prévisualisez votre travail et vous l'enregistrer une fois satisfait.
ÉTAPE II : MISE EN PLACE DE L'IFRAME DANS UN TOPICVous l'aurez peut-être remarqué mais une fois votre page enregistrée, vous arrivez sur un tableau :
Page ID URL du lien Titre Date de modification Action X
Il vous faut, dans ce tableau, récupérer l'url de votre iframe.
Ensuite, vous ouvrez un sujet/répondez à un message ou autre vous devez procéder comme suit :
- Code:
-
<iframe src="URL DE VOTRE IFRAME" target="_blank"></iframe>
Ce qui donne par exemple pour moi qui ai souhaité afficher les noms des couleurs, leurs codes et un aperçu ceci par exemple :
Si vous souhaitez régler vous-même ma longueur et la largeur pour avoir ceci par exemple :
Il vous suffit d'ajouter ceci :
- Code:
-
<iframe src="URL DE VOTRE IFRAME" target="_blank" height="VOTRE HAUTEURpx" width="VOTRE LARGEURpx"></iframe>
Une signature en onglets
Bonjour tout le monde ! Aujourd'hui je vais tenter de vous expliquer comment faire une signature en onglets.
Attention, il vous faudra quelques connaissances en html ! Pourquoi ? Simplement parce que c'est vous qui gérerez le contenu : donc si vous ne savez pas faire de lien, d'image, de tableau ou de liste à puce, ça ne sert à rien.
>> Comment ça marche ?
Malheureusement, on ne peut pas coder ça directement dans la signature. Il va falloir passer par une iframe ; ce qui implique sa création. Eh oui, ça ne marche pas vraiment comme une PA. E.T. possède déjà un tuto pour créer une iframe et très bien expliqué :
il vous suffit de suivre d'abord ce tutoriel.La structure
>> Le javascript
La première étape est du javascript : en effet, pour que le système d'onglets marche, il faut mettre un peu de js. Nous le mettrons directement dans le document ; je vous ferai bien un fichier mais j'ai tendance à toujours effacer des trucs et j'aimerais pas vous mettre dans la panade !
Donc, entre ces deux parties :
- Code:
-
<head>
<style type="text/css">
Insérez ce script :
- Code:
-
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
Mais ce n'est pas fini ! A la fin du document, juste avant :
- Code:
-
</body></html>
Insérez :
- Code:
-
<script type="text/javascript">
//<!--
var anc_onglet = 'un';
change_onglet(anc_onglet);
//-->
</script>
>> Le HTML
Attaquons-nous au coeur du sujet : les onglets et leur contenu ! En fait c'est plutôt simple. Partons sur une base à trois onglets ; après votre balise body, et avant votre script en fin de document, insérez ceci :
- Code:
-
<span class="onglet_0 onglet" id="onglet_un" onclick="javascript:change_onglet('un');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_deux" onclick="javascript:change_onglet('deux');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_trois" onclick="javascript:change_onglet('trois');">Nom de l'onglet</span>
Si vous voulez rajouter un onglet, il vous suffira de copier l'une des trois lignes et de replacer le chiffre (un, deux, trois) par ce que vous voulez.
Ensuite, le contenu ! A la suite du code que vous venez de mettre, ajoutez :
- Code:
-
<div class="contenu_onglet" id="contenu_onglet_un">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_deux">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_trois">Contenu de l'onglet</div>
Là encore, si vous avez ajouté des onglets, copiez une des trois lignes de contenu et remplacez le chiffre (un, deux, trois) par le nom correspondant aux onglets ajoutés.
>> Euh, c'est moche !
Bah oui, c'est là qu'intervient le CSS ! Je vous donne un truc tout cuit, vous n'aurez qu'à le modifier vous même en fonction des commentaires mis dedans. Donc, entre les balises
- Code:
-
<style type="text/css">
</style>
Insérez moi ce joli pavé !
- Code:
-
/* style du panel onglets, tous ensemble */
.onglet {
display:inline-block; /* cela les met en ligne */
margin-left:3px; /* marge exterieure gauche, modifiez à votre guise*/
margin-right:3px; /* marge exterieure droite, modifiez à votre guise*/
padding:3px; /* marge interieure */
cursor:pointer; /*facultatif, mais pour le fun... */
}
/* style de vos onglets non actifs */
.onglet_0 {
background-color: #96CCEE; /* vous pouvez bien sur changer la couleur ou mettre une image */
border-bottom: 3px dotted #FCFBF7;
font-size: 12px; /* la taille du texte */
font-family: Arial; /* votre typo */
color:white; /* et sa couleur */
}
/* style de votre onglet actif */
.onglet_1 {
background-color: #FCFBF7;
border-bottom:3px dotted #96CCEE;
padding-bottom:4px;
font-size: 12px;
font-family: Arial;
color:#96CCEE;
}
/* vous devinez au nom, style du contenu identique a chaque onglet */
.contenu_onglet
{
background-color:#FCFBF7;
border:2px solid #96CCEE;
margin-top:-1px;
padding:5px;
font-family: arial;
display:none; /* ne pas modifier cette ligne */
width: 420px; /* votre largeur, important */
height: 180px; /* votre hauteur, important aussi */
}
Dernière étape !
>> Votre iframe
Déjà ! Voilà ce à quoi ressemble mon iframe au css un peu basique :
Vous n'avez plus qu'à insérer votre iframe. Enregistrez votre fichier, et copiez le lien donné par FA en guise de nom du fichier. Pour rappel je vous redonne le code :
- Code:
-
<iframe src="URL_DU_FICHIER_HTML" name="nom de l'iframe" scrolling="auto" frameborder="no" height="HAUTEURpx" width="LARGEURpx"></iframe>
Oh, et une dernière chose ! Un iframe peut être utilisé n'importe ou : dans une sign oui, mais aussi dans un post ou une PA… Vous pouvez utiliser cette technique pour plein de choses utiles !
>> Merci d'avoir lu !
J'espère que ce tuto vous aura été utile. N'hésitez pas à posez des questions, notamment au niveau du css si vous ne savez pas trop comment faire tel ou tel effet, je serai ravie de vous aider ! ^^
Accueil 
Portail 
Sujet: faire une signature en onglet/Ifram 
