Chatbox spéciale Halloween

Bonjour, bonsoir à vous.

Avant toutes choses, ce LS est réalisable sur toutes les versions, il y a seulement quelques différences notable dans le CSS d'une version à une autre. Cependant, par soucis de simplicité, le code fournis ci-dessous n'est que pour PHPBB2 tâchez donc d'avoir la bonne version. Dans le cas contraire, vous pouvez toujours tenter de modifier ce qui ne va pas vous même ou avec l'aide des gens du forum dans "Problème avec mon code" par exemple. Vous pouvez aussi poster ci-dessous pour me signaler votre désir que j'adapte le code à telle version, s'il y a un certain nombre de demande je le ferais pour la version demandée.

Cette chatbox a été créer spécialement pour s'adapter à un thème d'Halloween, cependant en le modifiant un peu vous pouvez l'adapter pour n'importe quoi, ce LS est surtout là à titre d'exemple pour montrer ce qui est réalisable avec uniquement du CSS. Si vous avez le moindre problème avec ce LS ça se passe >> ici <<

Les personnalisations peuvent être beaucoup plus poussé que ça, libre à vous de chercher sur internet ou sur le forum d'autres LS ou des tutos pouvant vous aider à, par exemple, personnaliser les messages de connexion/déconnexion.

Voici un visuel du LS actuel dans une grande fenêtre : https://i.imgur.com/QGefZsJ.png

---

Il vous suffit donc juste de répérer le code correspond à votre version et de le copier/collier dans votre feuille de style CSS. Les autres indications seront en commentaire dans le code CSS pour vous aidez à comprendre quoi correspond à quoi et ce que vous pouvez toucher (ou non).

Il vous suffit maintenant de vous rendre dans votre feuille de style CSS et de rentrer le code suivant puis de "valider" tout simplement.
Pour rappeler : Panneau d'administration > Affichage > Couleurs > Feuille de style CSS

Code:

/* ---------------------------------------- Chatbox Halloween PHPBB2 -------------------------------------------------- */

#chatbox_header,
#chatbox_footer {
  /* Influence sur la barre en haut et en bas de la chatbox */
  background: rgb(255, 155, 0);
}

#chatbox_header a,
#chatbox_header label,
#chatbox_header li {
  /* Influence sur les balises a, label et li de la barre en haut et en bas */
  color: #000;
}

body.chatbox {
  /* Influence sur la chatbox total */
  background: rgb(19, 0, 27);
}

#chatbox_members .member-title {
  /* Influence toute la partie gauche, titres et membres connectés */
  background: rgb(161, 0, 255);
  color: rgb(255, 255, 255);
}

#chatbox_members {
  /* Influence la partie gauche de la liste des membres connectés de la chatbox */
  border-right-color: rgb(161, 0, 255);
}

#chatbox p {
  /* Influence les balises P de la chatbox, normalement la zone où apparait les messages */
  background: none;
  color: rgb(255, 255, 255);
  line-height: 1;
}

.chatbox .fontbutton,
div#divcolor,
div#divsmilies,
#message,
input#submit_button,
div#help-button {
  /* Influence les boutons de la barre en bas */
  background: rgb(161, 0, 255) no-repeat center;
  border: 1px solid rgb(0, 0, 0);
  color: #fff;
  vertical-align: top;
}

#message {
  /* Influence sur l'input permettant d'écrire son message */
  background: rgb(161, 0, 255);
  border: 1px solid rgb(0, 0, 0);
}

input#submit_button {
  /* Influence sur le bouton d'envoi des messages */
  margin: 2px 0 0 5px;
  padding: 2px;
  cursor: pointer;
}

label[for="message"] {
  /* Fait disparaître le texte "message :" derrière la zone d'envoi du message de la Chatbox */
  display: none;
}

.chatbox .fontbutton:hover,
input#submit_button:hover,
div#divcolor:hover,
div#divsmilies:hover,
div#help-button:hover {
  /* Influence les boutons survolé et sélectionné de la barre en bas */
  background: rgb(35, 0, 55) no-repeat center;
  border: 1px solid rgb(0, 0, 0);
}

#message:focus,
input#submit_button:focus {
  /* Influence les boutons "envoyer" et le champ de texte où l'ont n'écrit notre message quand celui-ci est cliqué par la souris */
  background: rgb(35, 0, 55);
  border: 1px solid rgb(0, 0, 0);
}

#chatbox .msg span[style="color:undefined"] {
  /* Influence les /me et le message après un clear */
  color: gold;
}

#chatbox .msg span[style="color:undefined"] em {
  /* Influence les kick, ban, déban et don de droit de modo de la chatbox */
  color: chocolate;
}

.chatbox span[style^="color:green"] {
  /* Influence les messages de connexion */
  color: orange!important;
}

.chatbox span[style^="color:red"] {
  /* Influence les messages de déconnexion */
  color: orangered!important;
}

#chatbox_contextmenu {
  /* Influence sur le bloc qui apparait au clic droit sur un pseudo dans la partie gauche */
  background: rgb(24, 11, 32);
}

#chatbox_contextmenu .close {
  /* Influence sur la partie haute de ce bloc où se trouve le pseudo de l'utilisateur et la croix pour fermer */
  text-align: center;
}

#chatbox_contextmenu p {
  /* Influence les balises P de cette partie, notamment les lignes en dessous du nom */
  background: rgb(60, 35, 77);
  border-bottom-color: rgb(0, 0, 0);
}

#chatbox_contextmenu a {
  /* Influence les liens de cette même partie */
  color: rgb(255, 255, 255);
}

#chatbox_contextmenu p.hover {
  /* Influence les balises P de cette même partie au survol de celles-ci */
  background: rgb(146, 26, 228);
}

#chatbox_members li>span,
.user strong{
  /* Influence les @ de la chatbox */
  font-size: 0;
}

.user strong:after{
 /* Permet de remettre les ":" après le pseudo dans les messages */
  content: ':';
  font-size: 12px;
}

#chatbox_members li>span:before,
.user strong:before {
  /* Permet l'ajout d'un contenu précédent les @ de la chatbox */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414319546-pumpkin-16.png);
  position: relative;
  top: 4px;
  right: 2px;
  font-size: 10px;
}

#chatbox_members li span span,
.user strong span {
  /* Influence les pseudo de la chatbox */
  font-size: 12px;
}

#chatbox {
  /* Influence la partie où sont affichés les messages de la chatbox */
  overflow-x: hidden;
  /* Empêche la scrollbar du bas d'apparaître */
  word-break: break-word;
  /* Force le texte à retourner à la ligne lorsqu'il dépasse la largeur allouée */
}

#chatbox .user,
#chatbox .date-and-time {
  /* Influence les pseudo et la date/heure dans les messages de la chatbox */
  white-space: nowrap;
  /* Force le texte à rester sur une seule ligne */
  color: #ffe67e;
  /* Influence la couleur de la date/heure et des pseudo sans couleur */
}

#chatbox::-webkit-scrollbar {
  /* Influence la scrollbar de la chatbox */
  width: 5px;
}

#chatbox::-webkit-scrollbar-track-piece {
  /* Influence le fond de la scrollbar de la chatbox */
  background: rgb(255, 155, 0);
}

#chatbox::-webkit-scrollbar-thumb {
  /* Influence la partie "mouvante" de la scrollbar de la chatbox */
  background-color: rgb(39, 9, 56);
}

label[title="Gras"] {
  /* Influence l'image du bouton "gras", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-b-gras-cb.png)!important;
  font-size: 0;
}

label[title="Ital."] {
  /* Influence l'image du bouton "italique", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-i-italique-cb.png)!important;
  font-size: 0;
}

label[title="Soulig."] {
  /* Influence l'image du bouton "souligné", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-u-souligne-cb.png)!important;
  font-size: 0;
}

label[title="Barré"] {
  /* Influence l'image du bouton "barré", ici nous permet l'ajout d'une image différente */
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-s-barre-cb.png)!important;
  font-size: 0;
}

div#divcolor {
  /* Influence la première image du bouton "couleur", ici nous permet l'ajout d'une image différente */
  position: relative;
  background-image: url(http://image.noelshack.com/fichiers/2014/43/1414340785-a-couleur-cb.png);
  font-size: 0;
  height: 18px;
}

#divcolor-preview {
  /* Influence sur la prévisualisation de la couleur de votre texte sur la chatbox */
  position: absolute;
  bottom: 2px;
  width: 96%;
}

#divsmilies img:first-child {
  /* Influence la première image du bouton "smilies" , ici nous permet l'ajout d'une image différente */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414339034-smiley-cb.png);
}

.chatbox-title a,
.chatbox .cattitle {
  /* Influence le nom de la chatbox, ici nous permet l'ajout d'une image à la place */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414341163-manoir-cb.png);
  margin-top: -5px;
}

.chatbox:before {
  /* Influence le contenu "précédent" la chatbox, ici nous permet l'ajout d'une image qu'on placera sur la barre en haut */
  content: url(http://image.noelshack.com/fichiers/2014/43/1414342736-texte-cb.png);
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

#chatbox_main_options {
  /* Influence tous les boutons de la barre en haut à droite, ici nous permet de la place au dessus de l'image affiché précédement et de lui donner une couleur de fond de manière à ce qu'ils soient toujours visible même quand l'écran est petit */
  position: absolute;
  z-index: 1;
  width: 400px;
  right: 0;
  font-size: 11px;
  margin: .7em .5em .5em;
}

#chatbox_footer:after {
  /* Influence la partie "suivante" de la barre en bas de la chatbox, ici nous permet l'ajout d'une image qu'on placera en bas à droite */
  content: url(http://image.noelshack.com/fichiers/2014/44/1414438889-trick-of-treat-cb.png);
  position: absolute;
  top: 5px;
  left: 30px;
}

#chatbox_option_co,
#chatbox_option_disco {
  /* Influence sur le bouton "connexion" et "déconnexion" */
  font-size: 0;
}

#chatbox_option_co:before {
  /* Influence le contenu "précédent" le bouton "connexion", ici nous permet l'ajout d'un texte différent */
  font-size: 11px;
  content: "Entrer dans le manoir";
}

#chatbox_option_disco:before {
  /* Influence le contenu "précédent" le bouton "déconnexion", ici nous permet l'ajout d'un texte différent */
  font-size: 11px;
  content: "Sortir du manoir";
}

.chatbox table,
.chatbox td {
  /* Permet de retirer la couleur de fond et la bordure des tableaux sous PHPBB2 */
  background: none;
  border: none;
}

.chatbox a {
  /* Retire le soulignement des liens de la chatbox, inutile si vous avez déjà sur la totalité du forum */
  text-decoration: none!important;
}

.forumline + table td[align="right"] img[style^="cursor"] {
  position: relative;
  top: -23px;
  right: 3px;
}


Il y a matière à faire autour de la Chatbox, mais après je n'ai pas cherché à pousser les choses comme personnaliser ce qui entoure le texte, ou autre, je reste dans le basique pour le premier LS. A vous de faire la suite, vous avez tout ce qu'il vous faut entre les mains pour la rendre propre à votre forum :)

Yo... Ce qu'il y a de sûr c'est que si on est en mal de lecture on peut venir voir tes propositions de LS. On sera servi x)

Alors je commente au fur et à mesure que je lis sinon je vais en oublier. Déjà si tu pouvais mettre le lien vers la section appropriée, ce serait super. Parce que tout le monde ne connait pas le forum de fond en comble x).

Après j'ai un soucis ~ Comme tu as proposé ce LS avant les modifications de FA il y a certains trucs qui ne vont plus. Je te laisse un aperçu, tu verras donc que le bouton en bas à gauche, l'espère d'aide est superposé au texte. Et qu'en haut sur nightmare il y a un carré orange (qui normalement correspond à chatbox je crois ).
Je n'ai testé que le phpBB2 pour l'instant. Mais je pense que c'est effectif pour les autres aussi.

Bref je te laisse modifier ça (:

Salut Alice, heureusement que je suis passé par là par pur hasard sinon j'aurais presque oublié ce LS XD

Bref, alors oui, j'ai songé depuis longtemps qu'avec la nouvelle bobox de FA beaucoup de truc risquent de bugger chez moi, d'autant plus que celle-ci n'était pas opti, et que je sais bien pouvoir faire mieux ^^

Du coup, je MAJerais sans doute tout ça quand je rentrerais le 6 Mai minimum, parce que ça va me prendre un ti temps, mais bon, j'ai encore du temps avant le prochain Halloween et que les gens en veuille ^^

Merci d'avoir testé en tout cas :)

Je t'aurais MP

Prends ton temps, je modifie juste le titre en conséquence.

Je veux bien voir ça moi, même l'ancienne version (=

Coucou ^^

Je poste juste pour signaler que je suis entrain de corriger le LS, j'ai déjà édité et corrigé la version PunBB, je vais m'occuper des autres après, en espérant que ça prenne pas trop de temps, le plus dur était de corriger une première fois je pense

J'éditerais ce message pour tenir au courants s'il n'y a pas de nouveaux messages d'ici là ^^

Edit 1 : Modification du code PHPBB3 qui marchait quasi correctement de base, ainsi qu'ajout d'une version Invision différente de celle de PHPBB3. Les deux versions ayant dorénavant une chatbox un peu différente, j'ai divisé le code en deux pour éviter d'avoir du code inutile.

Edit 2 : Modification du code PHPBB2 qui marche maintenant correctement. J'avais oublié à quel point c'était complexe cette version, bien qu'au final les changements étaient infimes, le code marchait déjà à peu près correctement comparé à PunBB qui m'a donné du file à retordre... Le problème vient surtout des nombreux tableaux de cette version et de la complexité... Quand je vois à côté comment c'est simple de modifier en Invision je regrette pas le changement enfin bref...

Il se peut qu'il y est des morceaux de codes inutiles, puisque avec les changement de Chatbox qui ont mine de rien pas mal changé depuis, j'ai dû changer des choses, ajouté des trucs, en retirer, mais j'ai juste modifié mon code de base jusqu'à ce que ça marche, il y a donc peut-être des trucs pas utiles dedans.

J'ai aussi majé le screen avec les nouveautés, le code a été légèrement allégé sur certains points mais plus complexe sur d'autres. Je n'ai pas testé avec d'autres navigateurs, configuration ou quoi, mais en théorie ça devrait marcher partout sous Google Chrome.

Je verrais pour profiter du fait que le topic est encore là (si c'est le cas) pour éventuellement modifier mon premier post, faire moins paver, expliquer mieux les choses etc.

Dans un avenir plus ou moins lointain j'essayerais de faire une version Tuto du LS ainsi qu'une version Toutes Version confondu, le risque est d'avoir des morceaux de code qui ne vont pas servir sur une version etc. mais ce sera plus simple à comprendre malgré tout.

Bref, voilà voilà fini mon pavés et fini la correction du LS (il était temps)

Hello Alzu :)

Ton titre de sujet indique encore "En cours", c'est le cas ou pas ?
Sinon, je n'ai pas lu le pavé, mais est-ce-que c'est vraiment nécessaire tout ce texte ? O_____O
J'ai peur qu'il y ait tellement de phrases qu'on ne trouve plus celles qui sont vraiment importantes ^^''

Dans ta dernière réponse, tu parles de morceaux de codes inutiles, si tu as le courage, n'hésite pas à les chercher toi même dans ton LS pour les enlever ^___^

Salut salut ^^

Ah oui, le "en cours" mmh un oubli de ma part vu que ce n'était pas moi qui l'avait rajouté je crois... ou alors je perds la mémoire

Dans tous les cas, je vais essayer de corriger au moins le blabla inutile du premier post, c'est vrai que je parle beaucoup pour rien mais en me relisant j'avais eu la flemme de corriger ça.

Pour les bout de codes potentiellement inutile je verrais. Dans tous les cas en ce moment je suis pas trop présent, étant en plein déménagement pas forcément facile d'autant plus que je suis plus trop actif dans le coin en ce moment ><'

Salustucru,

J'ai édité le blabla inutile pour rendre ça beaucoup plus simple et court, j'ai enlevé les morceaux de codes inutiles (en fait, il n'y en avait qu'un, normalement certains semblent inutiles seules mais sont indispensable avec d'autres bout de codes, cependant j'en ai peut-être oublié) et j'ai modifié légèrement le LS.

Il n'y a maintenant plus que le code pour PHPBB2 vu que ça reste la version la plus utilisée, c'est beaucoup plus simple pour éditer le LS par la suite. J'ai malgré tout préciser que si il y a beaucoup de demande, je fournirais le code pour une autre version demandée, et au gros pire du pire, si j'ai le courage je ferais un tuto.

J'ai retiré le "En cours" du pseudo et ça devrais maintenant être bon J'avoue avoir eu du mal à éditer ce LS puisque je n'étais plus forcément dans la même ambiance et le même esprit que quand je l'avais fais en étant sur la CB de NU un jour XD

Salut!

Ça m'a l'air de fonctionner alors je valide ce LS qui sera bientôt transféré dans le Libre Service ^^

Merci du partage !