Chatbox personalisée

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

Résolu Chatbox personalisée

Message par yoyiecats le Dim 27 Sep 2015 - 11:15

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sword-light.forums-rpg.com/

Description du problème

Bonjour,

J'aimerai personnalisée ma chatbox comme ceci :

Spoiler:

Voici les codes qui me permettent d'afficher ma chatbox tel qu'elle est actuellement :

Code:
  <table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;">
        
   <tbody>
           
      <tr>
            
         <td style="vertical-align: bottom;">
                <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';" />   
         </td>
              
         <td>
                <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"> </iframe>   
         </td>
                
      </tr>
           
   </tbody>
</table>

Code:
#chatbox_header .cattitle strong {
display: none;
}

#chatbox_header .cattitle:before {
content: "Taverne";
}


        body.chatbox {
        background-image: url('http://www.zupimages.net/up/15/33/g9f3.jpg');
        }

J'ai trouver quelques codes qui pourrait m'aider à réaliser ce que je souhaite, mais je n'ai pas su les utiliser pour obtenir le bon résultat.
(#chatbox | #chatbox_membres)

Est-ce que quelqu'un aurait des pistes d'avancement à me fournir s'il vous plait ?

Merci d'avance !


Dernière édition par yoyiecats le Dim 27 Sep 2015 - 19:44, édité 1 fois

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox personalisée

Message par Ange Tuteur le Dim 27 Sep 2015 - 11:49

Bonjour yoyiecats,

Ajouter le code CSS suivant dans votre feuille de style.
Code:
#chatbox {
  top:180px;
  left:0;
}

#chatbox_members {
  width:100%;
  height:150px;
  position:relative;
  bottom:0;
  top:0;
}

.online-users, .away-users {
  width:50%;
  margin:0 !important;
  position:absolute;
  top:26px;
  bottom:0;
  border-bottom:1px solid #333;
}

.online-users {
  left:0;
  border-right:1px solid #333;
}

.away-users {
  right:0;
}

.member-title {
  position:absolute;
  top:0;
  width:50%;
}

.member-title.online {
  display:block !important;
  left:0;
}

.member-title.away {
  display:block !important;
  right:0;
}

Remplacer le code de la chatbox par :
Code:
<table style="position: fixed; bottom:0px; right: 0px;background-color: #ffffff;z-index:10000;">
       
  <tbody>
         
      <tr>
           
        <td style="vertical-align: bottom;">
                <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';" /> 
        </td>
             
        <td>
                <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 700px; height: 500px; display: none;" marginwidth="0" marginheight="0" frameborder="0"> </iframe> 
        </td>
               
      </tr>
         
  </tbody>
</table>

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox personalisée

Message par yoyiecats le Dim 27 Sep 2015 - 12:00

WAAAAAaaaaaah !

C'est parfait c'est génial !

J'aurais juste une dernière question, j'aimerai rédure la chatbox à environ 360px de largeur, seulement quand j'effectue la démarche dans l'iframe, il réduit bien la largeur complète, mais pas celle des éléments intérieur, je change avec les pourcentage dans le css ?

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Chatbox personalisée

Message par Ange Tuteur le Dim 27 Sep 2015 - 19:17

La largeur minimale de la chatbox est 550px ( body.chatbox ), mais vous pouvez utiliser le CSS suivant pour adjuster la largeur :
Code:
#chatbox_header, #chatbox_members, #chatbox, #chatbox_footer {
  width:360px;
}

#message { width:200px !important }

#divcolor, #divsmilies, #help-button, .format-message + label {
  position:absolute;
  top:-25px;
}

#divsmilies { right:5px }
#divcolor { right:30px }
label[for="format-strike"] { right:55px }
label[for="format-underline"] { right:80px }
label[for="format-italic"] { right:105px }
label[for='format-bold'] { right:130px }

Bonne journée et à bientôt. Smile

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox personalisée

Message par yoyiecats le Dim 27 Sep 2015 - 19:43

Merci c'est vraiment parfait ! ^^ C'est super !

Encore merci beaucoup !

Sujet résolu ! ^^

yoyiecats
**

Féminin
Messages : 51
Inscrit(e) le : 30/04/2011

http://sword-light.forums-rpg.com/
yoyiecats 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