Chatbox personalisée
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Chatbox personalisée
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
Re: Chatbox personalisée
Bonjour yoyiecats,
Ajouter le code CSS suivant dans votre feuille de style.
Remplacer le code de la chatbox par :
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>
Re: Chatbox personalisée
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 ?
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 ?
Re: Chatbox personalisée
La largeur minimale de la chatbox est 550px ( body.chatbox ), mais vous pouvez utiliser le CSS suivant pour adjuster la largeur :
Bonne journée et à bientôt.
- 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.
Re: Chatbox personalisée
Merci c'est vraiment parfait ! ^^ C'est super !
Encore merci beaucoup !
Sujet résolu ! ^^
Encore merci beaucoup !
Sujet résolu ! ^^
Sujets similaires
» Balise personalisée
» Categorie ronde personalisée
» Recherche google personalisee
» Description des forums personalisée. Onglets
» Couleur de fond de page personalisée (image)
» Categorie ronde personalisée
» Recherche google personalisee
» Description des forums personalisée. Onglets
» Couleur de fond de page personalisée (image)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum