Chatbox personnalisée #1 par Cheshire Cat

Coucou o/

Elle est jolie comme tout cette CB

Cheshire Cat a écrit:Si vous rencontrez des problèmes n'hésitez pas à m'en faire part ici ou bien par MP ^^

Il me semble qu'on a pas le droit de préciser cela pour les MP ♥︎ (source)

J'ai une petite suggestion, j'ai remarqué que les 2 codes "Version avec avatar" et "Version sans avatar" sont très similaires (il y a juste quelques lignes de différence).
Est ce que cela ne vaudrait pas le coup de poster le CSS pour la version sans avatar (le plus long) et ensuite rajouter juste en dessous le rajout à mettre si c'est la version avec avatar ?

Pourquoi je dis ça ?
Déjà, si il y a une modification à faire dans le LS un jour, on a besoin de la faire qu'à un seul endroit (vive la flemme ) et surtout, je me dis que si quelqu'un personne sa CB puis veut changer de version (avec ou sans avatar), il sera peut-être un peu embêté ?  
Ou bien ptet que je me prends trop la tête XDDD

J'ai testé le code sur un forum en phpbb2, et j'ai un petit soucis avec le header
Comme j'ai une image de titre dans le panneau d'admin, elle apparait en haut de la CB (header) et dans le footer
C'est un petit truc de rien du tout :

Code:

/* Enlever image de fond par défaut */
.chatbox .catBottom { background: transparent; }

J'ai eu un soucis avec les avatars à un moment, mais il a disparu d'un coup, j'attendrai qu'il se remanifeste pour prendre une screen éè

D'ailleurs, c'est normal que tes screens ne soient pas les mêmes pour la version avatar ? (je pense à la seconde screen dans "Avec avatar" dont le rendu n'est pas le même qu'avec le code)

Voilà voilà, j'ai pas encore vraiment regardé le code, simplement essayé sur mon fow test o/ (et elle rend vraiment bien )

Merci du partage

Coucou Nihil :3

Déjà j'ai modifié pour le début du message, j'ai mis le truc habituel. Là j'avais la flemme donc bon j'ai oublié XD

Du coup oui c'est mieux je pense, je vais faire ça du coup :)

Et merci pour le truc de l'header, comme ça y'aura moins de bugs !

Oui c'est normal, mon screen a le sida du cancer parce que j'ai fait je sais plus quelle manip et du coup bah voilà '-'
Je referai le screen.

J'attends pour les avatars du coup et je modifie le reste en attendant :)

Merci pour les compliments au passage !

EDIT: J'ai rajouté un truc pour le clic droit sur le pseudo qui te donne un menu avec les actions que tu peux faire, par exemple envoyer un MP ou voir le profil :)

Super

Pour le clic droit, oui, j'avais déjà vu huhu <3. D'ailleurs, je pense que tu pourrais faire un LS juste pour ça en plus si tu veux :3 (comment personnaliser cette zone là)
Au fait, ce bout de code est présent 2 fois :

Code:

#chatbox_contextmenu{
  background:#FFF;
  font-size:15px;
}

---

Si tu refais une screen, je me dis que ça peut être sympa d'avoir sur la screen un message de connexion, et un message en /me (pour voir comment se place les éléments). Pense à préciser aussi dans les infos que le @ des modérateurs est enlevé dans les messages pour le CSS "avec avatar" :)
Sinon on va se retrouver avec des gens paniqués. Ou ptet pas.  

---

J'ai vu qu'ici tu modifiais la couleur de "chatbox_row_2", je pense qu'il faudrait changer aussi celle de "chatbox_row_1" (car c'est la même que celle définie dans le panneau d'admin pour "Table Rangée Couleur 1" sinon >-<)

Code:

.chatbox_row_2{ background:#f4ece8!important; }

---

Attention à cette ligne là :

Code:

#text_editor_iframe, input, select, textarea{ border:1px solid #6f6660!important; }

Comme ça sera ajouté dans le CSS de tout le forum... Ca va s'appliquer paaaartout

---

Ici il manque un petit truc au padding, non ? Tu peux supprimer la ligne je pense, car elle n'est pas prise en compte par le navigateur vu qu'elle est non valide :)

Code:

#chatbox_members .member-title{
  color:#FFF;
  padding:3;
  margin-top:10px;
  margin-bottom:5px;
}

---

Concernant les avatars, le problème se manifeste quand je regarde les archives. Les images sortent du cadre : (phpbb2 / Chrome)

Je pense que c'est un soucis lié à Chrome, un petit tricks qui marche souvent, c'est d'ajouter au CSS de #chatbox .cb-avatar cette petite ligne :

Code:

transform: translateZ(0); /* empeche bug Chrome */

---

Sinon, ça marche impec chez moi (en phpbb2, j'ai fait un tour sur Chrome, Firefox et Safari) :3

Ce qui suit, ce sont des conseils, tu en fais ce que tu veux, en appliquer une partie, faire du feu de bois, danser à la pleine lune autour, ne pas le lire

Spoiler:

Bonne journée <3
J'ai dis plein de petits trucs, mais c'est vraiment pas pour t'embêter (Ne me déteste pas et ne pars pas), plus pour essayer de penser aux problèmes qu'on pourra avoir ensuite

Coucou :3

Déjà pour le premier bout de code en double, il est supprimé. Sinon je sais pas si j'en ferai un nouveau LS ou pas. J'avoue j'ai la flemme '-'

Le screen pour les /me:

Pour .chatbow_row_1, j'ai mis un fond transparent. Comme ça les gens pourront modifier à leur guise.

Pour la ligne avec input, select, textarea, c'est fait. Et j'ai rajouté le px pour le #chatbox_members

Également pour les avatars des archives, c'est corrigé pour Chrome, j'ai même regardé.

Sinon pour les conseils, merci je vais modifier ça ^^

Pour le border-radius, j'avoue j'avais pas fais gaffe en codant °° D'habitude je mets 50%.

Et t'inquiètes pour m'embêter, ça me dérange pas le moins du monde xD
Au contraire, depuis que je te vois le faire avec les autres personnes et moi, j'ai pris l'habitude de faire la même chose
Donc temps mieux.

Hello <3

A la base j'allais tester sur toutes les autres version de forum et t'indiquer pour chacun le soucis (+ ptet la correction), mais je me dis que c'est peut-être une perte de temps.

En effet, les LS d'élément de forum indiquent le plus souvent la version de forum pour laquelle ils sont faits.

Certaines personnes prennent le temps de faire un code pour chaque version, mais ça dépend si tu as envie de passer du temps dessus ou non.

Du coup, avant de tester sur les autres versions, je voudrais savoir si ce LS est juste pour phpbb2 ou les autres versions aussi ?

Ce que je vois qu'il reste
1 - éditer le premier message pour mettre la bonne screen

2 - Hahaha, j'avais mis une couleur pour rigoler dans mon précédent message, je pensais que tu verrais

Code:

/* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
#chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
  color: #ff17c9!important;
}

La couleur ff17c9 c'est du rose
Il faudrait mettre une autre couleur, je crois que sur tes screens c'est une nuance de gris très foncé  

3 - Est ce que tu as le courage de commenter un peu chaque partie avant ou pas ?

Par exemple :

Code:

/* Liste des membres */
#chatbox_members{
  width:181px;
  background:#e5d9d3;
  margin-bottom:-10px;
  border:none;
}

/* Liste des membres : titre */
#chatbox_members .member-title{
  color:#FFF;
  padding:3px;
  margin-top:10px;
  margin-bottom:5px;
}

/* titre liste des membres (EN LIGNE) */
#chatbox_members .online{ background:#80aa3e; }

/* titre liste des membres (ABSENTS) */
#chatbox_members .away{ background:#a03a2e; }

C'est pas obligatoire mais ça permet quand même de rendre le LS plus lisible
Après c'est une question de courage, on peut aussi se dire parfois que certains noms de classe / id sont vraiment clairs xD

4 - Petite erreur d'étourderie, il manque le 1 je pense :

Code:

.chatbox_row_{ background:transparent!important; }

5 - En fait en fouillant, je pense que ça venait d'un style pour le reste du fow ceci :

Code:

#text_editor_iframe, #text_editor_iframe input, #text_editor_iframe select, #text_editor_iframe textarea{ border:1px solid #6f6660!important; }

Du coup tu peux te contenter de ça :

Code:

/* Champ pour écrire le message */
.chatbox input { border:1px solid #6f6660!important; }

6 - Sur phphbb3 j'ai vu qu'il y a des marges sur les p de la CB

Code:

#chatbox > p { border:none!important; }

Peut devenir :

Code:

#chatbox > p {
  margin: 0; /* phpbb3 => enlever les marges par défaut */
  border:none!important;
}

7 - Enfin, une petite question

Ici :

Code:

#chatbox{
  background:#FFF;
  margin-bottom:-10px;
}

Tu as mis le margin-bottom pour annuler l'espace vide qu'il y avait en bas c'est ça ?

C'est cool n'empêche, en testant ce LS j'découvre des trucs sur la CB de forumactif

Coucou toi :3
Du coup j'ai tout modifié, j'ai juste pas trop compris pour "changer pour le bon screen". Je mets celui avec les /me et tout ? Mais dans ce cas j'vais devoir faire un autre screen vu que c'est pas les couleurs que je donne XD

Sinon pour ta question, oui c'est pour cela. Par contre après ça cache un p'tit peu le bas de l'overflow. C'est pas très grave mais bon.

J'ai bien commenté le CSS également et puis j'ai optimisé la partie sans avatars en enlevant la partie de la mise en forme des avatars du posteur.

Du coup je veux bien tester sous Invision comme tu as déjà dû regarder sous PHPBB3 et moi PHPBB2. J'aimerai que le LS soit accessible à tous :)

EDIT: Je rencontre un bug actuellement. Chez moi l'avatar n'est plus arrondi du tout °°

Salut!

Je viens aux nouvelles, quel est l'état de ce LS? (Merci d'éditer pour mettre la bonne icône)

En cours (pas terminé, à corriger, etc.)

En pause (pas terminé et l'auteur a d'autres obligations)

Terminé (complété, en attente de validation d'un responsable)

Abandonné (ou refusé pour une raison quelconque)

Bah en fait j'attends qu'on me réponde donc bon :x

Up
Du coup je ne sais pas si c'est validé ou non au final :)

Salut @Cheshire_Cat ! (Et zut le système de tag qui t'aime pas T_T)

J'ai regardé ton LS et j'ai vu ton échange avec Nihil et les modifications que tu as apporté. Je n'ai rien à ajouter, pour moi ton code est bien :)

Merci donc pour ce LS qui s'ajoute aux autres LS de CB qui sont plutôt appréciés des membres ♥

Je valide et je déplace donc :)

Merci pour le partage !

merci beaucoup !

Bouh!

J'ai corrigé le bug avec les avatars non-arrondi, cela devrait maintenant être tout ok ^^

Merci pour ces codes !!

Les couleurs sont tellement mignonnes ! Merci <3

Merci à toi, c'est vraiment très beau ^^

Merci bien !

C'est original avec les avatars :3

Merci pour le partage !

Merci beaucoup !

danke ♥♥♥

Merci !