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
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 :
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 :
Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"
A vous de voir comment vous voulez rendre visible cette invitation à la papote.
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.
