Bien le bonjour jeunes gens !
Aujourd'hui, je vais vous passer mes codes CSS et HTML, afin de créer une belle mise en page pour forum !
C'est quoi le HTML et le CSS ?Le HTML concerne toutes les formules qui permettront la mise en page de vos données.
Le CSS, lui, est une formule qui sert a donner un aspect graphique agréable a votre forum.
HTMLTableau :Pour commencer, faisons un tableau !
Rien de plus simple pour cela !
<*table> : Balise ouvrante pour tous les tableaux
<*/table> : Balise fermante pour tous les tableaux
<*tr> : Balise ouvrante pour commencer une rangée dans le tableau
<*/tr> : Balise fermante pour finir une rangée dans le tableau
<*td> : Basise ouvrante pour commencer une cellule dans une rangée
<*/td> : Balise fermante pour finir une cellule dans une rangée.
Bien, après avoir capté ça, créons un tableau de deux case de hauteur et trois de largeur (comme sur le message d'accueil du forum). Copiez-collez ce code dans le message sur la page d'accueil de votre forum (
Panneau d'administration => Affichage => Généralités => Message sur la page d'acceuil), en enlevant les étoiles.
<*table width="100%" border="2" cellpadding="0" cellspacing="0">
<*tr>
<*td width="30%">Case 1<*/td>
<*td width="40%">Case 2<*/td>
<*td width="30%">Case 3<*/td>
<*/tr>
<*tr>
<*td width="30%">Case 4<*/td>
<*td width="40%">Case 5<*/td>
<*td width="30%">Case 6<*/td>
<*/tr>
<*/table>
Ce qui donne :
| Case 1 | Case 2 | Case 3 |
| Case 4 | Case 5 | Case 6 |
border="2" : le "2" est le nombre de pixels qui formera la bordure des cellules du tableau. Remplacez le "2" par "0" qui ne fera donc disparaitre les bordures du tableau.
Chat Box sur le côtéLa première étape, est de créer une page HTML :
Panneau d'administration => Modules => HTML => Gestion des pages HTMLNommez votre Page HTML "Chatbox" et cochez "Non" aux deux questions qui vous sont posées.
Copiez-collez ce code dans la page HTML. Les deux codes s'insèrent
sans les étoiles.
Il a deux codes pour la Chatbox, soit la version avec les boutons "Ouvrir" et "Fermer" la Chatbox. Soit sans, où vous pouvez les changer. Voici donc les deux et choisissez celui que vous voulez.
Version avec boutons :
- Spoiler:
<*table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><*tr><*td><*iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><*/iframe><*/td><*td style="vertical-align: bottom;"><*img src="https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'https://i.servimg.com/u/f81/11/21/85/73/fermer10.png':'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/><*/td><*/tr><*/table>
Versions sans boutons (remplacez les "URL IMAGE ... CHAT" par les images correspondantes) :
- Spoiler:
jQuery(document).ready(function() { jQuery('body').append('<*table style="position: fixed; bottom: 50px; left: 0px;z-index:10000;"><*tr><*td><*iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><*/iframe><*/td><*td style="vertical-align: bottom;"><*img src="URL IMAGE OUVRIR CHAT" onClick="document.getElementById('chatboxpop').style.display=(this.src=='URL IMAGE OUVRIR CHAT')?'block':'none';this.src=(this.src=='URL IMAGE OUVRIR CHAT')?'URL IMAGE FERMER CHAT':'URL IMAGE OUVRIR CHAT';"/><*/td><*/tr><*/table>'); } );
Ensuite, il vous faut insérer ce code dans la description de votre forum.
Panneau d'administration => Général => Configuration => Description du forum.<*script type=text/javascript src=/-h1.htm><*/script>
Laissez le "1" si c'est la première page HTML que vous créez, sinon, changez le numéro par celui de la page HTML.
Infobulle (BB Code)
Voici la première partie du code des Infobulles, toujours en enlevant les étoiles et en le copiant-collant dans le message sur la page d'accueil de votre forum.
- Spoiler:
<*div class="infobulle"><*img src="URL DE L'IMAGE OU ON PASSE LA SOURIS DESSUS"><*span><*center><*b>PSEUDO - RANG<*/b><*br><*img src="URL DE LA GRANDE IMAGE DANS LA BULLE"><*br><*a href="URL PROFIL">Profil<*/a><*/center><*/span><*/div><*/div>
CSSAttaquons maintenant le CSS !
Les codes CSS sont a entrer dans la Feuille de style CSS qui se trouve dans le
Panneau d'administration => Affichage => Couleurs => Feuille de style CSS !
InfobulleCeci est la deuxième partie du code des infobulles !
- Spoiler:
.infobulle {
position: relative;
}
.infobulle span {
display: none;
}
.infobulle:hover {
background: none;
z-index: 999;
}
.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 150px;
background: CODE COULEUR DU FOND DE PAGE DE VOTRE FORUM;
color: COULEUR DE L'ECRITURE DE L'INFOBULLE;
padding: 3px;
border: 1px dotted white;
border-left: 1px dotted white;
}
Ombres sur les écritures- Spoiler:
b {
text-shadow: 1px 1px 2px grey;
}
bold {
text-shadow: 1px 1px 2px grey;
}
strong {
text-shadow: 1px 1px 2px grey;
}
Voilà ! J'en ajouterai peut-être d'autres plus tard !
Cannelle
Accueil
Rechercher
Membres
Groupes
Profil
Lun 16 Mai - 18:00
