AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


13 résultats trouvés pour chatbox

CHATBOX - Rajouter la couleur du groupe derrière les pseudos - Lun 2 Oct 2017 - 9:08

CHATBOX - Rajouter la couleur du groupe derrière les pseudos




Pensez à faire un petit remerciement à Never Utopia pour l'aide apportée :hug:

Hello,
Voici un petit tuto pour apprendre à mettre une couleur de fond derrière certaines couleurs de pseudo sur la chatbox.
Ce tutoriel suppose d'avoir déjà quelques pré-requis en HTML / CSS / être à l'aise avec le code :)

Normal :
Tag chatbox sur Never Utopia - graphisme, codage et game design ZizIIpF

En changeant en fonction de la couleur de groupe :
Tag chatbox sur Never Utopia - graphisme, codage et game design P9nuNIa

Exemple pour un groupe :
Code:
/* Chatbox - changer couleur de fond du pseudo
pour le groupe de couleur verte (#16A085) */
.user-msg .user[style*="#16A085"] {
  background: #16A085; /* couleur de fond */
  color: white!important; /* couleur texte */
  padding: 2px; /* marges intérieures */
  border-radius: 3px; /* arrondi */
  margin-right: 5px; /* espace à droite avant le message */
}



D'autres exemples pour montrer des idées :
Spoiler:



---------------------

Explications


Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).

Prérequis CSS


Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)

Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :

  • Sélectionner une classe.
    Code:
    .msg { }

    Code:
    <span class="msg"></span>


  • Sélecteur de descendance. (.toto qui se dans un élément avec la classe "msg")
    Code:
    .msg .toto { }

    Code:
    <div class="msg"><div class="toto">exemple</div></div>


  • Sélecteur d'attribut :
    Code:
    a[href="#top"]

    Code:
    <a href="#top">Retour en haut</a>



Le HTML


Voilà à quoi ressemble la structure HTML d'un message sur la chatbox :
Code:
<p class="chatbox_row_1 clearfix">
    <span class="date-and-time" title="01 Oct 2017">[19:41:53]</span>
    <span class="user-msg">
        <span class="user" style="color:#16A085;">
            <strong><span class="chatbox-username chatbox-message-username" data-user="1">Pseudo</span> : </strong>
        </span>
        <span class="msg"><span style="color: #000000">Message</span></span>
    </span>
</p>

La classe "chatbox_row_1" est remplacé un message sur 2 pour être "chatbox_row_2"

La partie qui va le plus nous intéresser est cette ligne là :
Code:
<span class="user" style="color:#16A085;">
    <strong><span class="chatbox-username chatbox-message-username" data-user="1">Pseudo</span> : </strong>
</span>


Sur la première ligne, si on regarde bien il y a la couleur du pseudo de la personne #16A085 :
Code:
<span class="user" style="color:#16A085;">


On va commencer par sélectionner l'élément avec la classe "user" :
Code:
.user {
    background: red;
}

On rajoute un fond rouge pour être sûrs de remarquer où notre code est mis.
Pour l'instant, on peut voir que tous nos pseudos ont un fond rouge.
Tag chatbox sur Never Utopia - graphisme, codage et game design MT5uTKu

La classe CSS "user" peut se trouver à plein d'endroits du forum. Si on ajoute ce code directement, on prend le risque de changer des endroits non souhaités. Pour être sûrs de ne cibler sur la chatbox, nous pouvons rajouter .user-msg devant. De cette manière, nous ne ciblons que les .user qui se trouvent dans un élément avec la classe "user-msg".
Code:
.chatbox .user-msg .user {
    background: red;
}




Maintenant, nous allons sélectionner seulement ceux qui ont l'attribut style avec la couleur #16A085
Code:
.chatbox .user-msg .user[style="color:#16A085"] {
    background: red;
}

Tag chatbox sur Never Utopia - graphisme, codage et game design IFDtfZ1
TAAAADAAA (avouez, c'est trop beau)


Attention à recopier parfaitement le code couleur "16A085", en prenant en compte les majuscules et les minuscules.
En effet, forumactif remet exactement le même code couleur que celui inscrit dans le panneau d'admininistration. Il est possible de dire au CSS "ne fait pas attention si la couleur est en minuscule ou en majuscule", mais cela ne fonctionne pas sur IE et sur Edge Sad

Les plus attentifs d'entre vous auront remarqué que je n'ai pas utilisé [style="color:#16A085"] mais [style*="#16A085"] dans mon CSS fourni tout au début.

*= n'est pas la même chose que =.

[style*="#16A085"] signifie "il faut qu'on trouve "#16A085" dans l'attribut style".

[style="color:[b]#16A085"] signifie il faut que l'attribut style ai exactement comme valeur "[style="color:#16A085"]" .

Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple. On pourrait même juste mettre [style*="16A085"]. De mon côté je laisse le dièse car je trouve ça plus joli Very Happy

La documentation de MDN pour en savoir beaucoup plus : CSS > Sélecteurs d'attribut


Une fois qu'on a réussi à sélectionner le bon élément, il n'y a plus qu'à changer le style comme on veut ! Ici, un peu de padding, la couleur du texte et une petite marge :)

Personnaliser


Ajouter plusieurs groupes


Si vous avez la flemme, vous pouvez simplement copier le code :
Exemple pour 3 groupes :
Code:
.user-msg .user[style*="#8e44ad"] {
  background: #8e44ad;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}

.user-msg .user[style*="#e74c3c"] {
  background: #e74c3c;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}


.user-msg .user[style*="#16a085"] {
  background: #16a085;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}


Le problème, c'est que le jour où on voudra changer l'arrondi, ou d'autres éléments en commun, cela sera bien fatigant x)
On peut donc mettre en commun le code pour tous les groupes de couleurs qu'on souhaite modifier :
Code:

/* Code en commun pour tous les groupes */
.user-msg .user[style*="#8e44ad"],
.user-msg .user[style*="#e74c3c"],
.user-msg .user[style*="#16a085"] {
  background: #8e44ad;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}

/* On sépare seulement la partie différence */
.user-msg .user[style*="#8e44ad"] {
  background: #8e44ad;
}

.user-msg .user[style*="#e74c3c"] {
  background: #e74c3c;
}

.user-msg .user[style*="#16a085"] {
  background: #16a085;
}

Les lignes qui se répètent se retrouve en haut, en commun pour les 3 styles, en dessous nous ne mettons que l'élément qui change : la couleur de fond.

Si ce genre de technique vous intéresse, vous pouvez aussi aller voir le tuto basé sur le même principe : Chatbox - Styliser les messages de connexion / déconnexion (CSS)

Maintenant vous n'avez plus qu'à personnaliser !

Merci beaucoup pour votre attention, j'espère que ce tuto a pu vous être utile :hug:
En cas de soucis, je vous conseille d'aller poster dans la section Problème avec mon code

Comment personnaliser l'apparence de la chatbox - Mar 11 Avr 2017 - 22:06



Comment personnaliser l'apparence de la chatbox



Bonjour !

Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.

Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif

Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.




Le bloc de la chatbox


Voilà le bloc qui contient toute la chatbox :
Code:
/*Contient toute la CB*/
body.chatbox {
}



En-tête de la chatbox


Voilà l'en-tête de la chat-box :
Code:
/*Barre de titre*/
#chatbox_header .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 30px;
}

/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}

/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}



Pour remplacer le texte dans l'en-tête de la chatbox :
Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
  font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
  content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
  content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
  font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
  content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
  font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
  content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
  font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
  content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
  font-size: 12px;
}





La liste des membres de la chatbox


Voilà la liste des membres de la chat-box :
Code:
/*Bloc de la liste des membres*/
#chatbox_members {
  background-color: transparent; /*Enlève couleur de fond*/
  border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}

/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}

/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}



Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
  font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
  content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
  font-size: 12px;
  color: green; /*Couleur de la police*/
}

/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
  font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
  content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
  font-size: 12px;
  color: darkred; /*Couleur de la police*/
}





L'intérieur de la chatbox où il y a les messages


Voilà l'intérieur où il y a les messages :
Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}

/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
  margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
  margin: 0px;
}

/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

/* Mise en forme de la date */
#chatbox .date-and-time {
}

/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}

/*Le message du membre*/
#chatbox .msg {
}



Les avatars de la chatbox :
Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
  padding: 1px!important; /*Padding*/
  border: 1px solid #d5d5d5!important; /*Bordure*/
  width:30px!important; /*Largeur*/
  height:30px!important; /*Hauteur*/
  overflow:hidden; /*Cache ce qui dépasse*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
  transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
  width:30px!important;
  height:30px!important;
}





Barre de bas du forum


Voilà la barre du bas du forum :
Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
  height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}

/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}





C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Invité

Chatbox personnalisée kaki - Mer 1 Mar 2017 - 23:32

{#}css{/#} {#}css3{/#} {#}chatbox{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Créer un coin sympathique pour converser (chatbox en page html) - Jeu 2 Fév 2017 - 12:15


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


Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


Le code de la page HTML :


Pour commencer, il faut débuter une nouvelle page HTML :

Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

Maintenant insérez le code entier :

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titre de votre page.</title>
  <style type="text/css">
    body {
      margin: 0px;
      background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
    }

    .reglement_CB {
      height: 610px;
      width: 470px;
      padding: 10px;
      text-align: justify;
      color: black;
      font-size: 14px;
    }

    .cb_page {
      box-shadow: 0px 0px 2px black;
      margin-top: 5px;
      margin-left: 5px;
      width: 850px;
      height: 630px;
    }

    .cb_page,
    .reglement_CB {
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
  <div class="reglement_CB">
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</body>
</html>


Détail du code :


Code:
<style type="text/css">
  body {
    margin: 0px;
    background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
  }

  .reglement_CB {
    height: 610px;
    width: 470px;
    padding: 10px;
    text-align: justify;
    color: black;
    font-size: 14px;
  }

  .cb_page {
    box-shadow: 0px 0px 2px black;
    margin-top: 5px;
    margin-left: 5px;
    width: 850px;
    height: 630px;
  }

  .cb_page,
  .reglement_CB {
    display: inline-block;
    vertical-align: top;
  }
</style>

Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
Code:
<style type="text/css"></style>

Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


Code:
<iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>

Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


Code:
<div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>

J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


Faire venir les membres sur la page.


Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

Spoiler:


Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

Code:
<div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>


A vous de voir comment vous voulez rendre visible cette invitation à la papote.


Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

Cheshire Cat

Chatbox personnalisée #1 par Cheshire Cat - Mer 6 Juil 2016 - 1:18


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


Coucou !
Me re-voici donc pour un nouveau dépôt de LS, une chatbox personnalisée et personnalisable :3

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.


Avec avatar:


Sans avatar:


Pour choisir si votre chatbox affiche les avatars des membres ou non, il faut faire Panneau d'administration > Modules > Chatbox > Configuration > Afficher les avatars des utilisateurs dans la chatbox

Version sans les avatars des membres

Code:
/* CHATBOX PERSONNALISEE */
.chatbox{
  border:none;
}

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

/* Enlever image de fond par défaut */
.chatbox .catBottom { background: transparent; }
#chatbox_header{
  background:#b7a89f;
}
#chatbox_header strong{
  margin-left:10px;
  text-transform:uppercase;
}
#chatbox_header a{
  color: #FFF;
}

/* Liste des membres à droite */
#chatbox_members{
  width:181px;
  background:#e5d9d3;
  margin-bottom:-10px;
  border:none;
}
#chatbox_members .member-title{
  color:#FFF;
  padding:3px;
  margin-top:10px;
  margin-bottom:5px;
}

/* Menu au clic droit du pseudo à droite */
#chatbox_contextmenu{
  background:#FFF;
  font-size:15px;
}
/* Titre de la liste des membres (En ligne) */
#chatbox_members .online{ background:#80aa3e; }

/* Titre de la liste des membres (Hors ligne) */
#chatbox_members .away{ background:#a03a2e; }
/* Partie centrale de la chatbox */
#chatbox{
  background:#FFF;
  margin-bottom:-10px;
}
/* Fond des messages differents */
.chatbox_row_2{ background:#f4ece8!important; }
.chatbox_row_1{ background:transparent!important; }

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

/* Barre inférieure de la chatbox */
#chatbox_footer{
  background:#b7a89f;
  padding-bottom:4px;
}

/* Zone d'écriture du message de la chatbox */
.chatbox input{ border:1px solid #6f6660!important; }
#chatbox_footer #submit_button{
  padding-right:2px;
}



Version avec les avatars des membres
Il faut tout bêtement rajouter ce bout de code :)

Code:
/* Mise en forme de l'avatar du membre */
#chatbox .cb-avatar {
  padding:0!important;
  width:50px!important;
  height:50px!important;
  border-radius:50px!important;
  overflow:hidden!important;
  box-shadow: none!important;
  transform: translateZ(0); /* empeche bug Chrome */
}
#chatbox .cb-avatar > img {
  position:relative!important;
  top: -10px;
  width:50px!important;
  height:auto!important;
}

/* Mise en forme de la date */
#chatbox .date-and-time {
  display:inline-block;
  float:none!important;
  margin-left:2px!important;
  margin-top:2px!important;
  margin-bottom:3px!important;
  font-size:12px;
}

/* Mise en forme du pseudo du membre ayant poste */
#chatbox .user { float:left!important; }
#chatbox .user strong {font-size: 0;}
.chatbox-username.chatbox-message-username { font-size: 12px; }

Rajouter une Google Font sur les chatbox en iframe - Dim 2 Aoû 2015 - 16:14



Rajouter une Google Font sur les chatbox en iframe - phpbb2



On ne peut pour l'instant pas ajouter du javascript sur la page de la chatbox, vous n'aurez donc pas la modificaton sur cette page là.


Ce code ne fonctionne que sur une page où la chatbox est en iframe Wink

La première étape est de vous munir du code fourni par Google Fonts, par exemple pour la police Quicksand :
Code:
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' />


Ensuite, on ajoute un nouveau javascript
Panneau d'administration >> Modules >> Html & JavaScript >> Gestion des codes JavaScript >> Créer un nouveau javascript

On coche "sur l'index" si la CB est seulement sur l'index, sinon "sur toutes les pages" si elle est présente sur toutes les pages (merci Captain Obvious).

Le code Javascript :
Code:
$(function(){
    /* on attends que l'iframe de la CB soit chargée */
    $("iframe[src*='/chatbox']").load(function(){
        $(this).contents().find("head").append("<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>");
    });
});


Vous pouvez ensuite utiliser la police en question normalement, comme aux autres endroits de votre forum. Wink

Si vous rencontrez des problèmes, n'hésitez pas à poster dans le forum Problème avec mon code ou Personnalisations.

Invité

ChatBox en coin avec URL vers la grande CB - Lun 20 Juil 2015 - 15:23

{#}html{/#} {#}css{/#} {#}chatbox{/#} {#}effet_hover{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Alumine

Chatbox en panneau latéral - Ven 8 Mai 2015 - 18:58


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


Chatbox en panneau latéral




PHPBB2 - Aperçu - code légendé - CSS et templates - affichage uniquement sur la page d'accueil


/!\ Avant toute chose regardez bien comment ça marche: à l'ouverture la chatbox fait se décaler tout le forum ! Ca ne fonctionnera pas bien avec un forum trop large.



Cocher des trucs


Vous pouvez aussi afficher la CB en haut et en bas de page si vous le souhaitez. Rendez-vous dans votre panneau d'administration > Modules > ChatBox > Configuration et cochez les trucs comme suit !
Activer la CB: OUI
Afficher les avatars: OUI
Affichage de la CB: NE PAS AFFICHER
(oui c'est bizarre de l'activer sans l'afficher... mais celle que l'on va rajouter n'est pas gérée par ce bouton )



Template index_body


C'est la structure HTML de la page d'accueil. (Affichage > Templates > général > index_body)
Juste après le {JAVASCRIPT} qui est au début, ajoutez ceci:
Code:

<div id="cb">
  <iframe src="/chatbox/index.forum" style="width: 350px; height: 100%;" frameborder="0" cellspacing="0"></iframe>
</div>


Validez, publiez ! Donc là on vient de rajouter une chatbox supplémentaire uniquement sur la page d'accueil.



CSS


Affichage > Couleurs > feuille de style CSS
Ajoutez tout ça à votre code ! Tout est légendé pour que vous puissiez facilement changer les couleurs et les polices.
Code:
/*CHATBOX, par Alu pour Never-Utopia********************************************************************/
#cb, body{-webkit-transition:margin 2s ease, right 2s ease; transition:margin 2s ease, right 2s ease;}
#cb{height:100%; position:fixed; right:-350px; bottom:0; z-index: 999;}

body.chatbox{
  font-family:'sans-serif';/*police*/
  font-weight:200;/*epaisseur police(normal:enlever la ligne)*/
}
#chatbox_footer, #chatbox_footer .catBottom{height:60px !important;background-color:#C4FF6B; /*couleur du bas de la cb*/}
#chatbox_header{width:100%; position:absolute;background-color:#C4FF6B; /*couleur du haut de la cb*/}
.chatbox_row_2{background: #F0F0F0; /*couleur de la rangée message foncée*/}
.chatbox_row_1, #chatbox{ background:#FFFFFF;/*couleur du fond de la cb et de la rangée message claire*/}
#chatbox_members{width:100%; height: 50px;border:none; background-color:#68BF56 !important;/*couleur de fond de la partie membres en ligne*/ color:white;/*couleur du texte*/}

/*phrases de connexion et déconnexion*/
.msg span[style*="green"] strong{color:#68BF56; font-variant:small-caps; font-weight:normal;}
.msg span[style*="red"] strong {color:black; font-variant:small-caps; font-weight:normal;}

/*remplacer le titre de la chatbox*/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {content:"Discussions ♪♫";font-weight:200}

/*affichage des avatars*/
#chatbox .cb-avatar > img { height: 66px !important; width: 30px !important;}
#chatbox .cb-avatar {
  float: left;
  margin-right: 4px;
  background-color:white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 40px !important;
  width: 30px;
  vertical-align: middle;
  overflow:hidden !important;
}

/*Ne pas toucher*/
.chatbox td.catBottom{border:none !important;}
#chatbox{top:80px; left:0; bottom:50px;}
#chatbox_header .catBottom{height:30px;}
.chatbox_row_2, .chatbox_row_1{margin:5px 4px 4px; border-radius:2px; box-shadow: inset 0px 0px 30px 0px #EFEFEF;}
.text-styles td{vertical-align:top;}
.chatfootertable{display:block;width:100%; top:13px; position:relative;}
.text-styles td:last-child{display: block !important; position:absolute;right:10px; top:-27px;height:20px;}
.text-styles td:last-child label{display: none;}

.away-users li{display:inline;font-weight:400 !important;color:white !important;}
body.chatbox strong{font-weight:400; font-variant:small-caps;letter-spacing:1px;}
#chatbox .date-and-time {font-size:9px;}
#chatbox_members .member-title{color:white;font-weight:400;font-variant:small-caps;}
#chatbox > p {border-bottom: 1px solid #d5dde5;}

/*bouton de la chatbox*/
.bouton{
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  text-align:center;
  color:#FFFFFF;/*couleur du texte*/
  padding:5px 10px;
  border-radius:2px;
  border:none;
  font: 600 20px 'Amatic SC';/*police*/
  letter-spacing:2px;/*espacement des lettres*/
  text-shadow:0 1px 0 green;/*ombre du texte*/
  background-color:#68BF56;/*couleur de fond*/
  box-shadow: 0px 3px 0px 0px #3D992B;/*ombre*/
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease-in-out;
}
.bouton:hover {background-color: #54B341;/*couleur de fond au survol de la souris*/}
.bouton:active {box-shadow: 0px 1px 0px 0px #3D992B;padding-top:6px; padding-bottom:4px;}/*au moment du clic*/


Voilà... Donc là logiquement la chatbox est invisible. Normal on n'a pas encore mis le bouton qui permet de l'ouvrir !



Bouton


Vous pouvez le mettre où vous voulez, et même le mettre plusieurs fois si vous voulez. Le plus simple est de le mettre dans votre message de page d'accueil. (Affichage > Page d'accueil > Généralités) La partie script contient le javascript qui fait fonctionner l'apparition / disparition de la chatbox. Les deux boutons, ouvrir et fermer, s'intervertissent quand on clique. A vous ensuite d'intégrer et de customiser ce bouton via le CSS pour l'intégrer à votre forum (=
Code:
<script type="text/javascript">
function ouvrircb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='none';
  document.getElementById('fermer_cb_'+name).style.display='block';
  document.body.style.marginRight='350px';
  document.getElementById('cb').style.right='0';
  }
function fermercb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='block';
  document.getElementById('fermer_cb_'+name).style.display='none';
  document.body.style.marginRight='';
  document.getElementById('cb').style.right='';
  } 
</script>
<div class="bouton" id="ouvrir_cb_1" onclick="javascript:ouvrircb(1);" style="width:150px;">Ouvrir CB</div>
<div class="bouton" id="fermer_cb_1" onclick="javascript:fermercb(1);" style="width:150px;display:none;">Fermer CB</div>
 



Et voilà, c'est installé ! Si vous rencontrez des problèmes n'hésitez pas à passer dans la section "problème avec mon code" pour qu'un codeur vous aide ! Je vous demanderai aussi de mettre un crédit à N-U quelque part sur votre forum.

Alzufen

Chatbox spéciale Halloween - Sam 10 Jan 2015 - 19:45


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


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 :)

Chatbox - Styliser les messages de connexion / déconnexion (CSS) - Sam 27 Déc 2014 - 19:14



Chatbox
Changer le style des messages de connexion / déconnexion


Voici un petit libre service / tuto expliquant comment changer le style des messages de connexion et déconnexion sur la chatbox. Je fournis directement le code CSS, puis les explications suivent pour les intéressés :toto:

Rendu visuel
(en haut messages normaux, en dessous messages modifiés)

Tag chatbox sur Never Utopia - graphisme, codage et game design 1419703079-screen-cb-nu
Oui oui, je sais, c'est moche, je donne ici un exemple très simple avec très peu de CSS.

Le code n'est pas sous hide,
mais bien entendu un petit merci est toujours apprécié ♥

Code en libre service


CSS
PA > Affichage > Couleurs > Feuille de style CSS

Code:
/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #2980b9; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
    color: #8e44ad; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}


Explications


Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).

Prérequis


Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)

Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :

  • Sélectionner une balise.
    Code:
    strong { }


  • Sélectionner une classe.
    Code:
    .msg { }


  • Sélecteur de descendance.
    Code:
    .msg span { }


  • Sélecteur d'attribut :
    Code:
    a[href="#top"]




Le HTML


Voilà à quoi ressemble la structure HTML d'un message de connexion sur la chatbox (il y a juste la classe chatbox_row_1 qui change une ligne sur 2 pour être chatbox_row_2) :
Code:
<p class="chatbox_row_1 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:52:55]</span> 
    <span class="msg">
        <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:52</strong></span>
    </span>
</p>


Pour comparer:


La partie qui nous intéresse étant celle ci :
Code:
<span class="msg">
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
</span>


  1. Les messages sont dans une span avec la classe "msg".

  2. Ensuite pour les messages de connexion il y a une span avec du CSS directement appliqué : style="color:green" pour un message de connexion et style="color:red" pour un message de déconnexion.

  3. Et enfin, le texte est dans une balise strong qui permet de mettre en gras. C'est celle ci que nous allons tenter de cibler ♥

Le CSS


Il nous suffit de reprendre ce qu'il y a au dessus :


  1. Sélectionner une span avec la classe "msg" :
    Code:
    .msg


  2. Ensuite, on va sélectionner à l'intérieur de la classe "msg" une balise span :
    Code:
    .msg span


    Cette span a du CSS directement appliqué, avec l'attribut style (style="color:green")
    Pour sélectionner une span avec l'attribut style :
    Code:
    span[style]


    Pour sélectionner une span avec l'attribut style qui a une valeur (eh oui, on veut pouvoir sélectionner seulement les couleurs de connexions et de déconnexions !)
    Ici notre HTML est :
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>

    Le sélecteur CSS est donc :
    Code:
    span[style="color:green"]


  3. Et enfin... On veut sélectionner la balise strong à l'intérieur, ce qui donne donc :
    Code:
    .msg span[style="color:green"] strong {
       /* personnaliser ici */
    }




Les plus attentifs d'entre vous auront remarqué que j'ai pas utilisé [style="color"] mais [style*="green"] dans mon CSS fourni tout au début.

*= n'est pas la même chose que =.

[style*="green"] signifie "il faut qu'il y ait écrit "green" dans l'attribut style".

[style="color"] signifie il faut que l'attribut style ai exactement comme valeur "color:green" .

Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple.


Ensuite pour le message de déconnexion c'est exactement la même chose, il suffit de changer "green" en "red".

Aucun risque d'interférer avec la couleur des messages mises par les membres sur la CB. Pour ces messages là FA met la couleur grâce au code couleur en hexa. Du coup, si quelqu'un met son message en rouge il y a aura #FF0000 et non pas "red".

Empêcher les soucis des messages dans la Chatbox ForumActif - Mer 27 Aoû 2014 - 16:20



Bonjour, ou peut-être bonsoir si vous êtes du genre à aimer lire le soir Razz

La Chatbox de ForumActif (pour ne pas dire ForumActif tout court) offre son lot de soucis, pas tous très contraignant parfois même de simple de détails, mais ils peuvent quand même en déranger certains. Il n'est pas rare de voir quelqu'un qui envoi un long "AHHHHHHH[...]" qui créer une scrollbar en bas de la chatbox et que ça fasse râler les autres, ou même simplement parfois en postant un lien trop long. Il y a aussi le soucis des pseudo avec des espaces (C'est courant sur les forums RPG car généralement un pseudo est composé du nom et prénom) qui se coupent en deux (donc sur deux lignes) quand le message posté est trop loin. Il existe des solutions grâce au CSS pour palier à ce soucis, il vous faut donc être admin dû forum pour les mettre en place, ses astuces prennent peu de places et n'auront aucunes influences ailleurs. En clair, les mettre en place pourrait éviter que les gens demandent des clears à tout vas lorsqu'un @ est connecté à la CB Wink

Un long pavey d'introduction pour pas grand chose passons donc au premier soucis, celui des pseudo.

Fais ce que je t'ordonne de faire.


Le titre explique bien le principe du CSS que l'ont va utiliser ici, déjà pour savoir de quel soucis je parle, voici un exemple :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX] Machin
Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


Evidemment, si vous testez mes paroles sur votre chatbox cela ne va pas peut-être pas crée le soucis étant donné que je n'ai pas testé et que ça dépendra de la largeur alloué à la CB., L'idée est cependant là et l'explication est fidèle à ce qui se passe parfois, c'est assez rare mais l'éviter tout court peut-être mieux non ? Ca arrivait souvent sur mon propre forum quand on se tapait des gros délires et parfois pour des trucs idiots, j'ai donc voulu palier à ce soucis et j'ai testé.

Il vous faudra donc utiliser votre feuille de style CSS pour vous faire en sorte que le pseudo reste sur une seule ligne.

Rappel
Si vous ne savez pas, ou simplement pour vous rappelez, l'accès à la feuille de style CSS ce fait via le Panneau d'Administration, puis Affichage, Couleur et enfin Feuille de style CSS


Une fois que vous vous êtes rendu dedans, il vous faudra ajouter (où que vous voulez) le code suivant :

Code:
#chatbox .user{white-space: nowrap;}


Pourquoi sur une ligne ? J'estime que si on ajoute juste une propriété à quelque chose, une seule ligne suffit pour éviter de prendre 3 lignes de la feuille juste pour ça. A partir de ce moment-là, si vous utilisez juste ça, vous allez vous retrouver avec ça :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX]
Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


C'est déjà mieux, mais ce n'est toujours pas ce qu'on veut, alors comment régler le soucis maintenant ? Pour faire simple, il vous faudra aussi ajouter cette propriété à la date/l'heure, donc remplacer ce que je vous ai donné au dessus par :

Code:
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}


Normalement, avec ça vous devriez avoir :

[XX:XX:XX] Machin Chose: Bonsoir, je suis....
[XX:XX:XX] Machin Chose: TRUUUUUUUUUUUUUUUUUUUUUUCCCCCCCCCCCC


A titre informatif
"white-space: nowrap" permet de forcer le texte à rester sur une seule ligne, c'est une version simple de son utilité alors ne vous en servez pas pour rien, mais ça reste cependant très utile quand un texte ne veut pas rester sur une seule ligne sans savoir pourquoi.


Stop ! Route barrée, accès interdit !


Encore une fois, le titre illustre bien l'utilité du second code que je vais vous fournir. Cette fois-ci, il sert à faire en sorte que le texte ne dépasse pas la largeur qu'il lui est alloué, ce soucis a dû vous arrivez souvent, la petite barre de scroll (ou l'ascenseur) qui s'affiche en bas de la chatbox quand un membre écrit quelque chose de trop long ou envoi un lien trop long sans espace (ni tiret même si parfois ils ne changent rien). Généralement, votre solution est de vous dépêcher de clear ou de flooder pour faire disparaître cette vilaine barre énervante. Et si au lieu de faire ça, on faisait carrément en sorte qu'elle ne puisse pas exister ?

C'est ce que je vais vous apprendre ici, le code css suivant permet de forcer le texte à retourner à la ligne quand il est censé dépasser de la largeur alloué et donc créer cette vilaine scrollbar.


Retournez donc dans votre feuille de style CSS, si vous n'y êtes pas déjà est ajoutez ceci :

Code:
#chatbox .msg{word-wrap: break-word;}


A titre informatif
"word-wrap: break-word" permet de forcer le texte à retourner à la ligne s'il dépasse la largeur qui lui est alloué, comme expliqué plus haut. Evidemment, encore une fois c'est une version simplifié de la chose mais c'est fort utile pour la Chatbox où nous n'avons pas d'autres moyens de faire ça, du moins pas à ma connaissance.


Il n'y a rien à voir ici, circulez !


Cette astuce permet la même chose qu'au-dessus, cependant au lieu d'empêcher la barre d'exister en faisant en sorte que le texte retourne forcément à la ligne, on va plutôt masquer la barre. Le texte restera donc sur une seule ligne mais il sera masqué. Difficile d'expliquer, pour faire simple, imaginez-vous qu'au lieu que la scrollbar apparaisse, elle n'apparaisse pas, mais que quelqu'un a quand même posté un texte trop long. En clair, vous n'aurez aucun moyen d'aller voir la suite de se texte sans la scrollbar.

Astuce
.Garder le clic droit enfoncer pour sélectionner le texte et aller jusqu'au bout permettra de scroller même sans la scrollbar, ou encore avec les flèches directionnelles du clavier Wink.


Comme précédemment, il vous faudra aller dans votre feuille de style CSS, cette fois-ci, au lieu d'ordonner au CSS d'influencer sur le conteneur des messages, on va lui demander d'influencer sur la partie qui concerne la chatbox, les messages, les pseudo, tout.

Code:
#chatbox{overflow-x: hidden;}


A titre informatif
"overflow-x: hidden" permet de faire comme si la scrollbar était là tout en la cachant, et ceux seulement pour celle horizontal (d'où le "X")


Bon à savoir
Dans le doute, si jamais ce que je vous ai donné de marche pas ou que vous n'êtes pas convaincu, ou même que vous voulez éviter des soucis, vous pouvez rajouter "!important" avant le point virgule à la fin de chaque propriété donc après "hidden" "word-break" et "nowrap"


Voilà, c'est donc tout pour cette fois-ci, j'espère que cela vous sera utile. Sachez que mon passe temps est de m'amuser avec ce qui est théoriquement impossible de toucher sur ForumActif, alors n'hésitez pas à consulter d'autres Tutos Wink

Taktiik

Intégrer sa Chatbox où on veut comme on veut - Mar 27 Nov 2012 - 12:01


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


Intégrer sa chatbox Dernière mise à jour : 29 Avril 2013
Aperçu
Préparation
Détails


Aucun aperçu


Onglet "Chatbox" de la Page accueil
Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration.

X Modules>Chatbox>Configuration>Activer la Chatbox : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 27/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous apprend à intégrer votre chatbox à votre Page Accueil, mais par la même occasion, n'importe où ! Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Partie HTML


Code:
<iframe src="/chatbox/index.forum" style="width: 750px; height: 320px;" frameborder="0"></iframe>


Vous pouvez alors ajuster les dimensions de la chatbox en modifiant les valeurs de largeur "width" et de hauteur "height". L'url ne change en aucun cas car elle affichera la chatbox du forum par défaut (c'est à dire celui sur lequel l'iframe a été apposé) Wink


Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

Denkou

ChatBox latérale (avec ou sans transition) - Mer 16 Déc 2009 - 11:21


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


Bonjour, voici un code qui vous permettra de faire ceci :

Spoiler:


Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
Panneau d'administration > Affichage > Page d'accueil > Generalité

Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
Panneau d'administration > Affichage > Templates > Général > overhall_header
Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">





Puis, vous mettez le code de la chatbox à l'endroit choisi.

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><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></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';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>
    </tr>
  </table>





Pour personnaliser, vous pouvez utiliser les codes ci-bas :

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE IMAGE OUVRIR';"/>
      </td>
    </tr>
  </table>


Voilà !




Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

Voilou !

Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.

Vous avez une question ou un problème pour installer ou personnaliser ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 6:40