Aide pour Signature codée

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Aide pour Signature codée

Message par Lisy Nila le Sam 22 Nov 2014 - 2:20

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : En essayant le code...
Lien du forum : http://lalliance-des-dragon.forumsrpg.com/

Description du problème

Bonsoir,
Je sais qu'il y a plusieurs sujet de ce genre, mais aucun n'a les réponses que je cherche malheureusement. A vrai dire, je viens surtout vous demander votre aide.

Avant de commencer mon explication, ma feuille CSS, on ne sait jamais. Les codes qui s'y trouvent ne sont pas utilisés pour la suite, mais peut être y a-t-il quelque chose qui interfère, même si j'en doute... Enfin, j'imagine que rien ne coûte de vérifier.
Code:
body {
  background-image:url(http://i39.servimg.com/u/f39/18/51/75/88/fond_d10.jpg);
  background-size: 100% auto;
}

/* MISE EN FRORME CATEGORIES ET FORUM */
.description
{
  display: block;
  width: 606px;
  margin: auto;
  height: 78px;
  overflow: hidden;
  border: 2px solid #9c9c9c;
  box-shadow: 1px 1px 1px #191817;
  -moz-box-shadow: 1px 1px 1px #191817;
  -htm-box-shadow: 1px 1px 1px #191817;
  -webkit-box-shadow: 1px 1px 1px #191817;
  -o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
  position: absolute;
  display: block;
  width: 596px;
  height: 68px;
  overflow: auto;
  background-color: #191817;
  font-size: 10px;
  color: #9c9c9c;
  text-align: justify;
  padding: 5px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

Voilà, en cherchant des idées pour mon forum (qui est en phpBB2), je suis tombée sur ça :
http://fanstasy-graph.eklablog.net/signature-codee-a46890787
et je trouve cette signature géniale, surtout pour du RP ^^
Mais, je n'arrive pas à l'installer. Il faut dire que je comprends à peine le CSS et l'HTML, donc ça n'aide pas...
Et j'ai activé BBCode, HTML et JAVASCRIPT






J'ai fait le test avec le code donner par la créatrice, qui est le suivant.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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>

     

  <style type="text/css">

.onglet,

.onglet_0 {display:inline-block;

          width: 150px;

          background: #a34626;

          margin:auto;

          margin-bottom: -1px;

          padding:3px;

          border:1px solid black;

          border-top: 4px solid black;

          border-radius: 10px 10px 0 0;

          font-family : Impact;

          letter-spacing: 3px;

          text-align: center;

          -webkit-transition: 300ms;

          -moz-transition: 300ms;

          transition: 300ms;

}

 

.onglet:hover {background: #bd5f2b

      }

 .contenu_onglet{ font-size : 14px ;

          background: #a34626;

          border-radius : 20px;

          border: 1px solid #000000;

          border-left: 6px solid black;

          border-right: 6px solid black;

          box-shadow: 0 0 10px black, inset 0 0 10px black;

          padding: 10px;               

          display:none;

          height : 200px;

          width : 600px;

          overflow : auto;

          color: #e7c3b7;

          text-shadow : 1px 1px 0px black;

}

      .cadre { border-radius: 10px;

          background: rgba(0, 0, 0, 0.3);

          width: 400px;

          height: 187px;

          float: right;

          text-align: left;

          padding: 5px;

          box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

          overflow : auto;

}

.contact {border: 1px solid black;

          border-left: 3px solid black;

          border-right: 3px solid black;

          background: rgba(238, 120, 55, 0.6);

          padding: 5px;

          margin-top: 10px;

          color: black

}

      a {color: black;

          text-decoration: none;

          text-shadow: none;

          font-weight:bold;

      }

</style>

</head>

    <body>

        <div class="onglets">

<center><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');">ANCIENS KITS</span>

<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

</center>

        </div>

          <center> <div class="contenu_onglet" id="contenu_onglet_1er">

<img src="http://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

          <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

              <img src="http://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

              <img src="http://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

</div>

          <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

              <div style="float:left"><img src="http://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

              <div class="cadre"><p>Je suis Nagalia!<br/>

                  16 ans, terminale S et voulant devenir web-designeuse ^^

                  <br/><br/>

                  J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                  Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                  Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

        <script type="text/javascript">

        //<!--

                var anc_onglet = '3eme';

                change_onglet(anc_onglet);

        //-->

        </script>           

</body>

</html>

Je l'ai enregistré sur mon forum à partir de la gestion des pages HTML dans le Panneau d'administration, et j'ai obtenu l'URL suivant :

http://lalliance-des-dragon.forumsrpg.com/h1-signaturehtml

Puis ! La créatrice à donner l'iframe suivant à mettre dans la signature :

Code:
<iframe style="width: LARGEURpx ; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>

Que j'ai rempli comme suit :

Code:
<iframe style="width: 600px; height: 300px; display: block; margin-left: auto; margin-right: auto;" src="http://lalliance-des-dragon.forumsrpg.com/h1-signaturehtml" frameborder="no" scrolling="no" width="320" height="240"></iframe>

Pour les tailles, je ne suis pas sûre d'avoir mit les bonnes dimensions, en essayant et en décryptant le code j'ai obtenu ces deux là mais c'est imprécis je trouve.

J'ai fais un test en le postant sur un sujet, et dans la signature... Le résultat final est le même pour les deux, il y a juste l'iframe qui s'affiche tel quel.

Cependant, pour le sujet, lorsque je fais une prévisualisation, j'obtiens quelque chose comme cela.





Je ne peux d'ailleurs pas faire défiler.
De plus, lorsque j'édite les messages de mon forum, la case ''Désactiver le HTML dans ce message '' est cochée, je la décoche, et elle est à chaque fois recochée... Ce que je ne comprends pas du tout.

Comme dit, je découvre tout juste le HTML, je peux y comprendre deux trois bases, mais ça s'arrête là. J'ai compris par exemple que le code rassemblait en une fois de l'HTML, du CSS et du JAVASCRIPT... et voyant qu'il y a des espaces spéciales à chaque type de codes dans le panneau d'administration, j'en suis venue à me demander si c'était pas tout simplement qu'il vaut mieux séparer les codes CSS et Javascript de l'HTML... Mais bon, comme dit je n'y comprends rien, et je ne saurais même pas comment faire donc bon. ^^

Voilà, je crois avoir tout dit... si y a besoin d'autres infos j'essaierais de répondre du mieux que je peux. ^^

J'imagine que c'est un gros boulot, donc je vous remercie déjà de porter attention à ce message, en espérant que l'on trouvera ce qui ne marche pas.
Encore merci.


Dernière édition par Lisy Nila le Sam 22 Nov 2014 - 10:37, édité 1 fois

Lisy Nila
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 31/05/2014

http://lalliance-des-dragon.forumsrpg.com/
Lisy Nila a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Milouze14 le Sam 22 Nov 2014 - 6:40

Salut Lisy Nila ,

tout fonctionne correctement, seulement quand tu as créé la page en mode simple (WYSIWYG) alors qu'il faut passer par le mode Création en mode avancé (HTML)


On reprend tout Zen ! Very Happy

Création en mode avancé (HTML)

Titre * : Le titre de la signature
Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Colles ce contenu:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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>

     

  <style type="text/css">

.onglet,

.onglet_0 {display:inline-block;

          width: 150px;

          background: #a34626;

          margin:auto;

          margin-bottom: -1px;

          padding:3px;

          border:1px solid black;

          border-top: 4px solid black;

          border-radius: 10px 10px 0 0;

          font-family : Impact;

          letter-spacing: 3px;

          text-align: center;

          -webkit-transition: 300ms;

          -moz-transition: 300ms;

          transition: 300ms;

}

 

.onglet:hover {background: #bd5f2b

      }

 .contenu_onglet{ font-size : 14px ;

          background: #a34626;

          border-radius : 20px;

          border: 1px solid #000000;

          border-left: 6px solid black;

          border-right: 6px solid black;

          box-shadow: 0 0 10px black, inset 0 0 10px black;

          padding: 10px;               

          display:none;

          height : 200px;

          width : 600px;

          overflow : auto;

          color: #e7c3b7;

          text-shadow : 1px 1px 0px black;

}

      .cadre { border-radius: 10px;

          background: rgba(0, 0, 0, 0.3);

          width: 400px;

          height: 187px;

          float: right;

          text-align: left;

          padding: 5px;

          box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

          overflow : auto;

}

.contact {border: 1px solid black;

          border-left: 3px solid black;

          border-right: 3px solid black;

          background: rgba(238, 120, 55, 0.6);

          padding: 5px;

          margin-top: 10px;

          color: black

}

      a {color: black;

          text-decoration: none;

          text-shadow: none;

          font-weight:bold;

      }

</style>

</head>

    <body>

        <div class="onglets">

<center><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');">ANCIENS KITS</span>

<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

</center>

        </div>

          <center> <div class="contenu_onglet" id="contenu_onglet_1er">

<img src="http://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

          <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

              <img src="http://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

              <img src="http://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

</div>

          <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

              <div style="float:left"><img src="http://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

              <div class="cadre"><p>Je suis Nagalia!<br/>

                  16 ans, terminale S et voulant devenir web-designeuse ^^

                  <br/><br/>

                  J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                  Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                  Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

        <script type="text/javascript">

        //<!--

                var anc_onglet = '3eme';

                change_onglet(anc_onglet);

        //-->

        </script>           

</body>

</html>


Cliques sur le bouton Valider

Repères le lien de ta page web , puis déposes là dans l'iframe
Code:


<iframe style="width: 700px; height: 400px; display: block; margin-left: auto; margin-right: auto;" src="LE LIEN DE LA PAGE WEB" frameborder="no" scrolling="no"></iframe>

Puis déposes enfin dans ta signature ;) .

Ta c.s.s ne peut intervertir sur l'affichage de ta page html pour information car elles sont bien distinctes ;)

a++



Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Lisy Nila le Sam 22 Nov 2014 - 9:00

Nop, désolée.
Le code fonctionne en prévisualisation, mais pas une fois posté. ::moitimide::


Lisy Nila
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 31/05/2014

http://lalliance-des-dragon.forumsrpg.com/
Lisy Nila a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Milouze14 le Sam 22 Nov 2014 - 9:42

Re,
sur ce lien le bloc fonctionne parfaitement chez moi:
http://lalliance-des-dragon.forumsrpg.com/t79-contexte-clans-et-tribus#269

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Lisy Nila le Sam 22 Nov 2014 - 9:48

Ok... Bon, ben depuis mon compte Narrateur je peux pas le voir, même dans la signature d'un autre. ^^' Par contre avec un compte joueur je peux. Étrange... si vous avez une explication je la veux bien, mais bon, ça marche. Smile

Lisy Nila
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 31/05/2014

http://lalliance-des-dragon.forumsrpg.com/
Lisy Nila a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Milouze14 le Sam 22 Nov 2014 - 9:54

Re,
je viens de m'inscrire sur ton fofo , peux tu le temps de l'intervention me passer dans le même
statut que toi, une fois le soucis résolu tu pourras supprimer mon compte Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Lisy Nila le Sam 22 Nov 2014 - 10:00

Je t'ai mis dans le groupe des Admin, c'est suffisant?

Lisy Nila
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 31/05/2014

http://lalliance-des-dragon.forumsrpg.com/
Lisy Nila a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Milouze14 le Sam 22 Nov 2014 - 10:04

Re,
oui c'est suffisant merci, tu n'as aucun script dans la gestion du même nom,
donc ton navigateur doit être responsable car je vois bien les signatures Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Lisy Nila le Sam 22 Nov 2014 - 10:05

D'accord... Bon ben l'important est que ça marche. Merci pour tout, je peux indiqué comme résolu je penses. ^^
Encore merci. Very Happy

Lisy Nila
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 31/05/2014

http://lalliance-des-dragon.forumsrpg.com/
Lisy Nila a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Milouze14 le Sam 22 Nov 2014 - 10:07

Re,
dernière chose, j'ai posté sur ton fofo te demandant de déposer l'iframe Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour Signature codée

Message par Chacha le Sam 22 Nov 2014 - 10:46

..
Bonjour et Bienvenue
sur le Forum des Forums ForumActif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49762
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum