Optimisation chatbox

par Sakuri Mer 16 Déc 2015 - 17:40

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : Toujours
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,plusieurs membres du forum utilisent leur téléphone pour aller dessus et je souhaiterais savoir si il ya possibilité d'optimiser la CB afin qu'elle soit plus facile d'accés via mobile,par un code ou un template j'sais pas.

Merci de vos futures réponses.

par MlleAlys Mar 22 Déc 2015 - 22:19

Bonjour,
J'ai pour ma part recréé une page html avec la chatbox en iframe pour utiliser initial-scale=1 en balise méta, ce qui déjà règle une bonne partie du problème ^^
Puis j'ai personnalisé la disposition de la cb en fonction de la taille de l'écran en ajoutant un certain nombre de codes dans le css personnalisé.
Au final, c'est peut être un peu du bidouillage parce que c'est la première et seule fois où je me suis intéressée à un design responsive, mais ça fonctionne plutôt bien il me semble ! Wink

La chose à penser à la fin étant que, s'ils veulent profiter du nouvel affichage, les membres doivent aller sur la nouvelle page html et non sur la chatbox normale !

Par étapes :

- Dans modules > gestion des pages html > créer une nouvelle page en mode avancé (HTML)
- titre : par exemple "chatbox mobile"
- Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
- Utiliser cette page en tant que page d'accueil ? NON
- Contenu de la page :

Code:: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport"/> <style> iframe#m-cb-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; } </style> </head> <body> <iframe id="m-cb-content" src="/chatbox"> </iframe> </body> </html>

- Valider.

Cette page ressemblera à la chatbox normale, et c'est le but, mais son affichage sera différent sur un téléphone.
Vous pouvez récupérer l'adresse de cette nouvelle chatbox dans la liste des pages html, et la communiquer à vos membres.

Pour améliorer la disposition en fonction de la taille de l'écran, aperçu :
Optimisation chatbox J59s

- Dans affichage > couleurs > onglet feuille de style css, ajoutez le code suivant :

Code:: /*******************************************DEBUT CHATBOX MOBILE********************/ @media only screen and (max-device-width:700px), only screen and (max-width:700px) { #chatbox_footer { height: 30px !important; } body.chatbox { min-width: initial !important; } #chatbox_header .cattitle, #help-button, #chatbox_messenger label, #divcolor, #divsmilies, .cb-avatar, .date-and-time { display:none !important; } #chatbox .user, #chatbox .msg { display: inline !important; } #chatbox_members { width: 25%; } #chatbox { left: 26%; } } @media only screen and (max-device-width:500px), only screen and (max-width:500px) { .chatbox-options, #chatbox_footer table.text-styles { float: left !important; text-align: left; width: 100%; border-collapse: collapse !important; } #message { width: 75% !important; } #chatbox_members { position: static; width: auto; max-width: none; border: 1px solid rgb(176, 2, 57); border-width: 0 0 1px 0; height: 45px; line-height: 20px; padding: 0 5px 0 5px; } #chatbox_members h4[style="display: block;"] { margin: 0; padding: 0 !important; display: inline !important; white-space: nowrap; background-color: transparent; } #chatbox_members h4:before { content: " • "; } #chatbox_members h4:after { content: " : " } #chatbox_members ul, #chatbox_members li { display: inline !important; margin: 0; } #chatbox_members li span { white-space: nowrap; font-size: 12px; } #chatbox_members li:after { content: ', '; } #chatbox { top: 76px; left: 0; bottom: 30px; right:0; } .chatbox_row_1, .chatbox_row_2, .chatbox_row_3 { font-size: 11px; } } /*******************************************************FIN CHATBOX MOBILE*******/

- Enregistrez

Vous n'avez plus qu'à communiquer l'adresse de la nouvelle cb à vos membres ! Wink

par Sakuri Jeu 24 Déc 2015 - 15:54

Merci beaucoup pour cette astuce bien pratique.

Optimisation chatbox