News Accueil

Terrible

Libre-service de codages pour vos forums


Kit forum #1

par Awful le le Jeu 20 Juil - 16:23

Règlement

 

I. Lorem ipsum dolor sit


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

II. Lorem ipsum dolor sit


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

III. Lorem ipsum dolor sit


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

VI. Lorem ipsum dolor sit


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
Je suis une alerte Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Je suis une alerte Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Recensement avatars

A, B, C
Nom du personnage - Série - Nom du joueur
Nom du personnage - Série - Nom du joueur
Nom du personnage - Série - Nom du joueur
Nom du personnage - Série - Nom du joueur
Nom du personnage - Série - Nom du joueur
D, E, F
Nom du personnage - Série - Nom du joueur
G, H, I
Nom du personnage - Série - Nom du joueur
J, K, L
Nom du personnage - Série - Nom du joueur
M, N, O
Nom du personnage - Série - Nom du joueur
P, Q, R
Nom du personnage - Série - Nom du joueur
S, T, U
Nom du personnage - Série - Nom du joueur
V, W, X
Nom du personnage - Série - Nom du joueur
Y, Z
Nom du personnage - Série - Nom du joueur


Pris
Libre
Réservé

Prénom Nom

Âge • Métier • Groupe • Quelque chose

Histoire


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
infos complémentaires yoh


Contexte

Lorem ipsum dolor


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariaturLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           

Lorem ipsum dolor


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Un petit kit pour votre forum. Vous pouvez installer le CSS dans votre panneau d'administration ou bien le poster directement dans votre message. Puisque ces codes sont potentiellement amenés à être utilisés plusieurs fois dans un forum, vous pouvez, si vous le souhaitez, retirer le crédit pour le mettre par exemple dans vos crédits du forum en faisant un lien ici.

Dans votre panneau d'administration, allez dans Affichage > Couleurs > Feuille de style CSS et collez le code suivant :
Code:
/*STYLE GENERAL*/
    .cadre-kit {
        width: 450px;
        border-width: 1px;
        border-style: solid;
        padding: 20px 0;
        margin: 5px auto;
        font-family: 'Roboto', sans-serif;
    }
    .wrap-kit {
        width: 400px;
        margin: auto;
    }
    .wrap-kit h2 {
        text-align: center;
        padding: 45px 0;
        margin: 0;
        font-weight: 800;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: 'Montserrat', sans-serif;
    }
    .bloc-kit {
        border-width: 1px;
        border-style: solid;
        margin: 5px auto;
        background-color: #fff;
    }
    .contenu-kit {
        padding: 20px;
        font-size: 11px;
        line-height: 150%;
        text-align: justify;
    }
    .contenu-kit h3 {
        text-transform: uppercase;
        margin: 10px 0;
        margin: 10px 0 -15px;
        font-weight: bold;
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    /*COULEURS*/
    /*Couleurs de la bordure et du fond du cadre extérieur*/
    .cadre-kit {
        background-color: #EFEFEF;
        border-color: #CACACA;
    }
    /*Couleurs du fond du titre et du titre*/
    .wrap-kit h2 {
        background-color: #1e1445;
        color: #fff;
    }
    /*Couleur de la bordure et du fond du cadre intérieur*/
    .bloc-kit {
        border-color: #CACACA;
        background-color: #f5f5f5;
    }
    /*Couleur du texte des cadres*/  
    .contenu-kit {
        color: #000;
    }
    /*Couleur des titres*/
    .contenu-kit h3 {
        color: #1e1445;
    }
    .faceclaim {
        color: #4e4086;
    }


    /*FICHE PREDEFINI*/
    /*Statut du prédef : de base, il est pris, mais on peut ajouter la class "libre" ou "réservé"*/
    .statut {
        border: 1px solid #feb1b1;
        color: #ec2e2e;
        margin: 5px auto;
        background-color: #ffdcdc;
        padding: 5px;
        text-align: center;
        text-transform: uppercase;
    }
    .libre {
        border-color: #b8ecae;
        color: #69b153;
        background-color: #deffba;
    }
    .reserve {
        border-color: #fbae90;
        color: #f66d2e;
        background-color: #f9d5ad;
    }
    .predef-intro-kit {
        padding: 5px 10px;
        font-size: 9px;
        text-align: right;
        text-transform: uppercase;
        background-color: #fff;
        margin: 5px 0;
    }
    .kit-predef {
        display: flex;
    }
    .predef {
        height: 320px;
        flex: 1;
        margin: 0 0 0 5px;
        box-sizing: border-box;
        overflow: auto;
        padding: 5px 15px;
    }

    /*REGLEMENT*/
    .alerte {
        border: 1px solid #feb1b1;
        color: #ec2e2e;
        margin: 10px auto;
        background-color: #ffdcdc;
        padding: 10px;
        border-radius: 5px;
    }
    .verte {
        border: 1px solid #b8ecae;
        color: #69b153;
        background-color: #deffba;
    }

    /*RECENSEMENT D'AVATARS*/
    .faceclaim {
        padding: 5px 0;
        text-align: center;
    }
    .nom-kit b {
        color: #A0A0A0;
    }

    /*CONTEXTE*/
    .contexte-kit {
        position: relative;
    }
    .contexte-kit h3 {
        text-align: center;
        margin: 20px 0;
    }
    .contexte-kit h3::after {
        content: "";
        height: 1px;
        width: 100px;
        position: absolute;
        background: #bcb5da;
        left: calc(50% - 50px);
        margin-top: 25px;
    }

    /*LES CREDITS*/
    .credit-kit {
        text-align: center;
        position: absolute;
        width: 450px;
        line-height: 14px;
    }
    .credit-kit a {
        color: #989898!important;
        text-decoration: none!important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 8px;
    }

Et pour le HTML :

Fiche de règlement
Code:
<div class="cadre-kit"><div class="wrap-kit"><!--
--><h2>Règlement</h2><!--
--><div class="bloc-kit"><div class="contenu-kit"><!--
--> <h3>I. Lorem ipsum dolor sit</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<h3>II. Lorem ipsum dolor sit</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<h3>III. Lorem ipsum dolor sit</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<h3>VI. Lorem ipsum dolor sit</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 <div class="alerte"><b>Je suis une alerte</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="alerte verte"><b>Je suis une alerte</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><!--
--></div></div></div><div class="credit-kit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Recensement d'avatars
Code:
<div class="cadre-kit"><div class="wrap-kit"><!--
--><h2>Recensement avatars</h2><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>A, B, C</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
<b>Nom du personnage</b> - Série - Nom du joueur
<b>Nom du personnage</b> - Série - Nom du joueur
<b>Nom du personnage</b> - Série - Nom du joueur
<b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>D, E, F</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>G, H, I</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>J, K, L</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>M, N, O</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>P, Q, R</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>S, T, U</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>V, W, X</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--><div class="bloc-kit"><div class="contenu-kit faceclaim"><b>Y, Z</b></div></div><!--
--><div class="bloc-kit"><div class="contenu-kit nom-kit"><!--
--><b>Nom du personnage</b> - Série - Nom du joueur
</div></div><!--
--></div><div class="credit-kit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de prédéfini
Code:
<div class="cadre-kit"><div class="wrap-kit"><!--
--><div class="statut">Pris</div><!--
--><div class="statut libre">Libre</div><!--
--><div class="statut reserve">Réservé</div><!--
--><h2>Prénom Nom</h2><!--
--><div class="predef-intro-kit">Âge • Métier • Groupe • Quelque chose</div><!--
--><div class="kit-predef"><img src="http://placehold.it/200x320" class="avatar-kit" /><!--
--><div class="bloc-kit contenu-kit predef"><!--
--><h3>Histoire</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div><div class="bloc-kit"><!--
--><div class="contenu-kit">infos complémentaires yoh</div><!--
--></div></div><div class="credit-kit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche contexte
Code:
<div class="cadre-kit"><div class="wrap-kit"><!--
--><h2>Contexte</h2><!--
--><div class="bloc-kit"><div class="contenu-kit contexte-kit"><!--
--><h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariaturLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></div></div><div class="credit-kit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>