Terrible

Libre-service de codages pour vos forums


    Minimalist Lilac

    Admin



    Au clic sur le "+", les sous-forums apparaissent :


    Apparence des forums avec des nouveaux messages :



    ▬ Créditez-moi quelque part sur votre forum si vous utilisez ces codes

    ▬ La scrollbar est seulement stylée sous Chrome


    Codes et explications


    Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

    Code:
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">


    Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :

    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
     </td>
     <td class="gensmall" align="right" valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
     <!-- END tablehead -->
     <!-- BEGIN cathead -->
     <!-- END cathead -->
     <!-- BEGIN forumrow -->

    <div class="forum-wrap">
        <div class="forum-content">
            <div class="forum-intro">
                <div class="forum-titre">
                  <h{catrow.forumrow.LEVEL} class="hierarchy">
     <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     </h{catrow.forumrow.LEVEL}>
              </div>
                <div class="forum-last">{catrow.forumrow.LAST_POST}</div>
            </div>
            <div class="forum-desc">
              <label><input type="checkbox" /><div class="label-sous-forum">×</div><div class="sous-forum"><a href="google.fr">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</a></div></label>
                <div class="forum-desc-content">
                    {catrow.forumrow.FORUM_DESC}
              </div>
        </div>
        <div class="forum-img">
          <div class="stats-forum">
              <div><b>{catrow.forumrow.TOPICS}</b> topics</div>
              <div><b>{catrow.forumrow.POSTS}</b> posts</div>
      </div>  
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          <script>
            $(function () {
    $('img[title="Nouveaux messages"]').closest('.forum-img').addClass('new');

    });
          </script>
          </div>
    </div>
    </div>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->


    Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

    Code:
    /*PERSONNALISATION DES FORUMS ET CATEGORIES PAR AWFUL*/

    /*Titre de catégorie*/
    .titre-cate h2 {
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: -1px;
        color: #d6c9f8!important;
     font-size: 25px;
        text-shadow: 1px 1px 0 #637ab9;  
    }

    /*Bloc forum*/
    .forum-wrap {
        width: 850px;
        height: 180px;
     padding: 6px;
        margin: 0 auto 15px;
       box-sizing: border-box;
        position: relative;
      /*Modifiable*/
        background-color: #a9a4d6;
        border: 1px solid #637ab9;  
        font-family: 'Roboto', sans-serif;
    }

    /*Suppression des soulignements des liens*/
    .forum-wrap a,
    .forum-wrap a:hover,
    .forum-wrap a:active {
        text-decoration: none!important;
    }

    /*Bloc intérieur du forum*/
    .forum-content {
        width: 100%;
        height: 100%;  
        box-sizing: border-box;
        position: relative;
        padding: 6px;
      /*modifiable*/
       background-color: #fff;
        border: 1px solid #637ab9;
    }

    /*Bloc titre forum et dernier message*/
    .forum-intro {
        width: 300px;
        height: 100%;
        box-sizing: border-box;
        float: left;
        padding: 10px;
        position: relative;
      /*modifiable*/
       background-color: #a9a4d6;
        border: 1px solid #637ab9;
    }

    /*Titre forum*/
    .forum-titre a {
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: -1px;
       font-size: 20px;
      /*modifiable*/
        color: #fff!important;
        text-shadow: 1px 1px 0 #637ab9;  
    }

    /*Dernier message*/
    .forum-last {
        text-transform: uppercase;
        font-size: 9px;
        position: absolute;
        bottom: 10px;
       color: #fff;
    }
    /*Couleur lien dernier message*/
    .forum-last a:first-child {
        color: #637ab9 !important;
    }

    /*Bloc description de forum*/
    .forum-desc {
        height: 100%;
        width: 450px;    
        border-width: 1px 1px 1px 0;
        display: inline-block;
        padding: 25px;
        box-sizing: border-box;
        float: left;
        margin-right: 6px;
        position: relative;
      /*modifibale*/
       background: #fbfbfb;
        border-style: solid;
        border-color: #e0e0e0;
    }
    .forum-desc-content {
        overflow: auto;
        height: 100%;
        padding-right: 8px;
        font-size: 10px;
        text-align: justify;
    }
    /*Première lettre description de forum*/
    .forum-desc-content:first-letter {
        font-weight: 900;
        font-size: 25px;
        float: left;
        margin-right: 7px;
        margin-top: 0;
       color: #a9a4d6;
    }

    /*Bloc sous forums*/
    .sous-forum {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 25px;
        box-sizing: border-box;
        transform: scale(0);
        transition: all 0.3s;
        transform-origin: 0 0;
      /*modifiable*/
       background: rgba(255, 255, 255, 0.9);
        color: #a7a7a7;
    }
    /*Lien sous forum*/
    .sous-forum a {
        text-transform: uppercase;
        color: #a9a4d6;
        transition: all 0.3s;
    }
    /*Lien sous forum au survol*/
    .sous-forum a:hover {
        color: #d4d0f3;
    }
    /*Petite croix qui au clic fait apparaître les sous-forums*/
    .label-sous-forum {
        position: absolute;
        left: -20px;
        bottom: 5px;
        transform: rotate(45deg);
        transition: all 0.3s;
        font-size: 20px;
        cursor: pointer;
      /*modifiable*/
        color: #8a2be2;
    }
    .forum-wrap input[type=checkbox] {
        position: absolute;
        display: none;
    }
    .forum-wrap input[type=checkbox]:checked ~ .sous-forum {
        transform: scale(1);
    }
    .forum-wrap input[type=checkbox]:checked ~ .label-sous-forum {
        transform: rotate(0deg);
    }

    /*Bloc image de nouveau message*/
    .forum-img {
        height: 100%;
        width: 65px;  
        display: inline-block;
        padding: 5px;
        box-sizing: border-box;
      /*modifiable*/
       background: #a9a4d6;
        border: solid #637ab9 1px;
    }
    .forum-img img {
        display: none;
    }
    /*Couleur de fond quand il y a un nouveau message*/
    .new {
        background: #e0c0e9;
    }
    /*texte pour un nouveau message*/
    .new:after {
        position: absolute;
        text-transform: uppercase;
        top: 10px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
       content: "new ! ★";
        color: #6f69a4;
    }

    /Statistiques forum*/
    .stats-forum {
        height: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }
    .stats-forum div {
        text-transform: uppercase;
        width: 100%;
        font-size: 8px;
        color: #fff;
    }
    .stats-forum div b {
        display: block;
        font-size: 11px;
    }

    /*Customisation de la scrollbar sous Chrome*/
    .forum-desc-content::-webkit-scrollbar {
        width: 8px;
        background: #A1A2A7;
        border: 3px solid #fafafa;
    }
    .forum-desc-content::-webkit-scrollbar-thumb {
        border: 2px solid #fafafa;
        background: #a9a4d6;
    }