AccueilFAQRechercherMembresGroupesS'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.



14 résultats trouvés pour chatbox

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 !

Shaneliae

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


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 personnalisée kaki



Suite à une commande de Lone wanderer, j'ai réalisé cette personnalisation de CB. Elle a été réalisé pour un forum avec une ambiance de guerre (Fallout).



J'ai réalisé cette CB en ayant enlevé toutes les couleurs et images de base se trouvant dans le panneau d'administration dans l'onglet Affichage > Images & couleurs


Pour ce LS vous n'aurez besoin de modifier que du CSS, pour cela il vous faut des droits d'administration. Allez dans votre Panneau de configuration puis Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

Ensuite il vous suffit de coller le code ci-dessous :

Code:
/***** CB KAKI *****/

/* Intégration de la font Six Caps via font-face */
@font-face {
  font-family: 'Six Caps';
  font-style: normal;
  font-weight: 400;
  src: local('SixCaps'), url(https://fonts.gstatic.com/s/sixcaps/v7/kHNZYYf63qmp8C-aw9f9pvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* Conteneur de la CB */
#frame_chatbox {
  width: 858px !important;
  border: solid 3px #3d3a24 !important;
}

/* Pour masquer le fond blanc quand on est déconnecté */
body.chatbox {
  background: #767352 !important;
}

/* Code liant plusieurs blocs de la CB */
#chatbox_header, #chatbox_footer {
  background: #767352;
}

/* Titre de la CB */
#chatbox_header {
  height: 71px !important;
}
#chatbox_header .cattitle {
  text-align: center;
  font-size: 50px;
  font-family: "Six Caps", sans-serif !important;
  text-shadow:  1px 1px 2px #554c32;
  color: #000;
  text-decoration: none !important;
}

#chatbox_header .cattitle:hover {
  text-decoration: none !important;
}
#chatbox_header .catBottom {
  border: none !important;
}
#chatbox_header .catBottom table {
  border-bottom: 1px solid #3d3a24;
}

#chatbox_header .catBottom table tbody tr td:first-child {
  height: 50px;
  width: 100%;
  text-align: center;
  padding-left: 160px;
}

/* Lien Connexion/Déconnexion */
#chatbox_main_options a, #chatbox_main_options a:visited {
  color: black !important;
  text-decoration: none;
}

/* Contenu de la chatbox */
#chatbox_members, #chatbox {
  top: 71px !important;
  bottom: 55px;
  background: #a8a287;
  border-top: solid 15px #767352;
}

/* Liste des membres */
#chatbox_members {
  border-left: solid 15px #767352;
  border-right: solid 1px #3d3a24;
}

/* Zone des messages postés */
#chatbox {
  border-right: solid 15px #767352;
  margin-left: 15px;
}

/* Bas de la chatbox */
#chatbox_footer {
  height: 40px !important;
  border: none;
  background: #a8a287;
  border-left: solid 15px #767352;
  border-right: solid 15px #767352;
  border-bottom: solid 15px #767352;
}

#chatbox_messenger {
  margin-top: 10px;
}
#chatbox_footer .catBottom {
  border: none !important;
}

/* Champ texte */
#message {
  border-radius 3px;
  border: none;
  background: #767352;
}

/* Boutons */
#help-button, #divcolor, #divsmilies, #submit_button, .format-message + label {
  background: #767352 !important;
  border: 1px solid #3d3a24 !important;
}

#submit_button {
  padding: 0;
}

/* Forcer la couleur du texte de la CB */
div#chatbox, div#chatbox p span.user-msg span.msg span {
    color: black !important;
}


Validez le CSS et vous avez une nouvelle CB !

Merci pour avoir lu ce LS, j'espère qu'il vous servira ♥

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

Zaza

Let's Go To Vegas ! ♠ ...because life is a game. - Sam 18 Fév 2017 - 12:22


Let's go to Vegas !


This world need a big party !

Ah Las Vegas ... ! Ça fait rêver, pas vrai ? Eh oui, la plus grande ville de l’état du Nevada, surnommée “ The Entertainment Capital of the World ”, ou bien “ Sin City ” bien parce qu'elle est la ville des pêchés. 339,8km² de terre au milieu du désert de Mojave, des hôtels et casinos par centaines, environ 600 000 habitants pour faire de ce lieu un petit paradis sur terre. Quoi de mieux pour faire la fête ? Beaucoup se réveillent le lendemain d'une soirée sans se souvenir de ce qu'ils auraient bien pu faire la veille. La capitale du comté de Clark est de loin l'endroit idéal pour réaliser l'impossible. Pour beaucoup de joueurs de poker, Las Vegas représente la Mecque du Poker. Pour les autres, Las Vegas est la capitale du jeu, de l'argent facile, des fortunes perdues et des fêtes ... Pour les groupes religieux, Las Vegas est la capitale du vice, de la prostitution, de la drogue et de l'interdit. Mais pour la plupart, Las Vegas est l’endroit rêvé pour faire des folies en tous genres et pousser ses limites toujours plus loin, toujours plus haut.
Et vous, seriez-vous prêts à repousser vos limites encore et encore ?


code (c) black pumpkin



Bonjour à tous ! Very Happy
Voilà, après des semaines de recherches et de travail, nous avons enfin réussi à ouvrir notre bébé avec mon amie Sara. Bon, nous ne sommes pas des professionnelles du graphisme et du codage...seulement, en cherchant un peu et en apprenant par moi même, j'ai réussi à faire quelque chose de correct quand même. Razz Voilà, le forum est basé sur la ville de Las Vegas avec un système de points (dollars) que vous pourrez gagner lors de vos #rpg , en votant pour les top-sites ou en participant à nos #évènements. Il y a possibilité d'avoir des rps à caractères sexuels, mais il faudra les placer sous hide. Nous sommes assez libre et laissons une grande liberté à nos membres niveaux rps, mais nous surveillerons quand même afin que ceux-ci ne prennent pas trop leurs aises et que cela ne dérange pas les plus jeunes d'entre nous. Les #membres de tous niveaux #rpg sont autorisés, nous acceptons tous le monde car nous sommes nous aussi passé par là un jour et il n'y a pas de restriction de lignes lors des rps. Very Happy Ah et nous sommes aussi des administratrices très présentes qui adorent rp et passer du temps sur la #chatbox donc n'hésitez pas à nous rejoindre ! Very Happy :love:

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.

Shaneliae

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


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 de la ChatBox en image



Bonjour à tous pour ce nouveau LS sur la Chatbox !

Vous aurez certainement tous remarquez cette super CB sur NU avec une petite image dans le coin en haut à droite de la page de l'index (actuellement un chiot). Vous vous demandez certainement comment peut-on faire pour avoir la même chose parce que vous n'aimez pas les CB latérales ? J'ai la solution pour vous ! Evidemment je ne l'ai pas reproduite comme sur NU, mais le principe est le même ^^

Voici quelques aperçus :
- Au repos
- Après passage du curseur


J'ai évidemment inclus un tout petit crédit pour NU (il se voit presque pas !) alors ne le retirez pas ! Vous pouvez bien sûr modifier son apparence mais ne le retirez pas. Et puis, ajoutez un autre petit crédit ailleurs sur votre forum, ça ne fera pas de mal et ça nous fera plaisir ! Un petit merci ne fait jamais de mal ! Et puis il vous permettra de gagner quelques Peanut's Wink

Bon LS à vous !


Si vous désirez afficher ce lien vers la CB sur toutes les pages de votre forum (en utilisant le template overall_header par exemple), l'affichage des membres connectés à la CB ne fonctionnera pas. Le reste du LS peut fonctionner, mais le système utilisé ici pour afficher les connectés à la ChatBox ne fonctionne que dans le template index_body.

Ce LS a été réalisé sous phpBB2 et il vous faut les droits de fondation pour modifier les templates.



Les Codes



Modification du template "index_body"



Allez dans votre panneau d'admin :
Affichage > Templates > Général > index_body

Là vous vous placez où vous voulez, tout au début ou tout à la fin, peu importe ! Ne vous placez juste pas au beau milieu du code.

Vous collez ce code :
Code:
<div id="cb_coin">
  <div class="cb_credits">
    <a href="http://www.never-utopia.com/">Never Utopia</a>
  </div>
  <a style="display: block; width: 100%; height: 100%;" target="_blank" href="/chatbox/index.forum"></a>
  <span class="cb_chatteurs">
    <span class="cb_nom">
      ChatBox
    </span>
    <span class="gensmall">
      {CHATTERS_LIST}
    </span>
  </span>
</div>

N'oubliez pas de valider puis de publier !

CSS



Pour le CSS, dans votre Panneau d'administration allez dans :
Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

Et vous collez ceci :
Code:
/***** CB EN COIN *****/
/* Image icône de la CB */
#cb_coin {
  position: fixed; /* Pour que la CB reste en place en scrollant */
  z-index: 998;
  bottom: 0; /* Position de l'image, mettre "top" si on la veut en haut */
  left: 0; /* Position de l'image, mettre "right" si on la veut à droite */
  width: 90px; /* Mettre la taille exacte de l'image */
  height: 150px;
  background: url('http://img11.hostingpics.net/pics/183762Fish.png'); /* Mettre le lien de l'image de la CB */
}
/* Cadre des personnes connectées à la CB */
.cb_chatteurs {
  position: absolute;
  bottom: 0; /* Remettre la même position que pour l'image */
  left: 0;
  width: 0px;
  height: 0px;
  margin-left: 40px; /* Placez le départ de votre cadre à votre guise */
  margin-bottom: 100px;
  background: #B8B69D;
  border-radius: 10px;
  overflow: hidden; /* Mettez "auto" à la place de "hidden" pour avoir une barre de scroll quand beaucoup de monde est connecté à la CB */
  padding: 0;
  transition: 500ms; /* Augmentez pour rendre plus lent, et diminuez pour accélérer */
}
/* Système permettant de faire apparaître le cadre des connectés à la CB */
#cb_coin:hover .cb_chatteurs {
  width: 200px; /* Taille de votre cadre quand il apparaît */
  height: 130px;
  border: 2px solid #F6F8F3; /* Si vous souhaitez mettre une bordure au cadre, elle doit être ici */
  margin-left: 70px; /* Position de votre cadre quand il apparaît */
  margin-bottom: 60px;
  padding: 10px;
  transition: 500ms;
}
/* Nom de la Cb */
.cb_nom {
  display: block;
  text-align: center;
  font-size: 25px;
  color: #CB2F3A;
  font-family: Brush Script MT;
}
/* Crédit vers NU */
.cb_credits {
  margin-left: 10px;
}
.cb_credits a {
  color: #E53458;
  font-size: 8px;
}
/***** FIN CB EN COIN *****/


Vous avez une question ou un problème avec ce LS ? 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 : http://puu.sh/qu3cF/a5d66f9b63.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)


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:
En comparaison, voici la structure html de base pour un message tout simple sur la CB (pas de couleur pour le membre, pas de droit de modération, rien de spécial quoi)
Code:
<p class="chatbox_row_2 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:49:01]</span> 
    <span class="user-msg">
        <span class="user">
            <a target="_blank" onclick="return copy_user_name('Truc');" href="/u2">Truc</a> : 
        </span>
        <span class="msg">
            <span>Message</span>
        </span>
    </span>
</p>



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:green"] 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:green"] 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".


A partir de la connaissance de ce sélecteur, différents styles peuvent découler, l'un de mes prochains tuto visera à pouvoir "personnaliser" les phrases de connexion (ici j'ai mis 2 exemples aléatoires, le reste du CSS est celui du thème actuel de Never Utopia).

Exemple:

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


W W W


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.

Une shoot box personelle et personalisable pour votre forum? - Jeu 18 Sep 2008 - 0:27



J'avoue, je profite un p'tit peu de bug actuel de forumactif... Et je ne sais même pas si ça a été déjà dit ou pas...

Cela dit celà faisait déjà un certain temps que je cherchais une solution de rechange aux chat box forumactif énormes, et ne s'intégrant pas toujours aux designs de nos forums... là je parle surtout des fora utilisant les tableaux phbb3... où la chatbox forumactif ne s'intègre pas du tout...

M'enfin voilà je vous propose une petite solution de rechange, une shoot box en ajax, si comme moi vous n'êtes pas doués en code, mais qu'une shoot box plus petite, plus mignonne et surtout entièrement personnalisable vous tente :

Je vous renvoie sur ce http://www.i-tchat.com/

avantage pour le créateur :

L'installation est simple, rapide et permet vraiment de la créer comme on souhaite. Nota Bene : même la taille et la forme de ce petit objet est configurable...
Je ne vous en explique pas la création en détails, tout est expliqué, mâché, il suffit de lire, c'est d'une simplicité déconcertante :p

Avantage pour les membres?


De plus un petit onglet extras permet aux utilisateurs de se créer un petit compte avec quelques options leur étant personnelles.
M'enfin voilà personnellement, je le teste en ce moment sur mes fora :p

Un exemple?




Ouvrir le tchat dans une popup.


Voilà je viens de faire celle-ci à l'arrache en 5 minutes top chrono... et les couleurs ne sont même pas encore configurées...
Vous en pensez quoi, hormis le fait qu'il n'y ai pas la commande /me?

Edit = et au pire si vous n'aimez pas, elle pourra au moins servir temporairement, le temps que les box forumactif retournent potablement :houra:

m'enfin comme d'hab, c'est qu'une idée^^


Revenir en haut

La date/heure actuelle est Mar 21 Nov 2017 - 22:22