Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
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 :)
