Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
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 ^^
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
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.
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>
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.
Dernière édition par Shaneliae le Mer 1 Mar 2017 - 18:03, édité 1 fois
