Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Pisrale

Venez retrouver du libre service divers en graphisme (avatars, icons, gifs, etc. . . ) ou codage (fiche rp, signatures, templates, etc. . . ) et ce sans inscription avec commande possible, c'est chez

Le deal à ne pas rater :
Cdiscount : -30€ dès 300€ d’achat sur une sélection Apple
Voir le deal

Catégories n°4

Pisrale :: Codages :: Apparence du forum :: Templates
KoalaVolant
KoalaVolant
Lun 5 Juin 2023 - 11:51
Version du forum : ModernBB




Particularités du code :
- Crédits : KoalaVolant & Fey (maquette)
- Les images se redimensionnent toutes seules
- Ca s'adapte sur mobile normalement

Couleurs & Fonts


  1. Ce code utilise un système de “variables” rangé dans un “:root”.
    Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
    Attention, il peut y avoir des conflits de variable. Il ne peut pas y avoir deux mêmes variables. (genre, pas deux fois de --color1). Si c’est le cas, il suffit de renommer “--fond” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
    Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html

    Si vous trouvez ça galère, vous pouvez venir demander :

    Personnaliser mon code
    Signaler un souci

  2. Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :

    Code:
    :root{
        --font-1:'Raleway', sans-serif;
        --font-2:'League Spartan', sans-serif;

        --couleur-principale:#699ecd;
        --couleur-fond:#f0f5f9;
        --couleur-liens:rgba(255, 15, 15, 0.8);

        --gris-clair:#bbb;
        --gris-fonce:rgb(110, 110, 110);
        --white:#f0f0f0;
    }

  3. Pour les fonts il s'agit de Raleway & League Spartan qui sont installés dans le template HTML. Vous pouvez bien sûr les changer  en allant vous servir sur Google Fonts !



HTML

  1. Avec le compte fondateur, il faut aller dans Panneau d'administration > Affichage > Templates > index_box
    Appuyez sur la roue crantée pour le modifier

  2. Repérez le code suivant :
    Code:
       <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="forabg">
             <ul class="topiclist">
                <li class="header">
                   <dl class="icon">
                      <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                      <dd class="topics"><i class="ion-android-list" data-tooltip="{L_TOPICS}"></i></dd>
                      <dd class="posts"><i class="ion-android-chat" data-tooltip="{L_POSTS}"></i></dd>
                      <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
                   </dl>
                </li>
             </ul>
             <ul class="topiclist forums">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
                <li class="row">
                   <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                      <dd class="dterm">
                         <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                            <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                            </h{catrow.forumrow.LEVEL}>
                            {catrow.forumrow.FORUM_DESC}

                            <!-- BEGIN switch_moderators_links -->
                               {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links -->
                            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                            <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                         </div>
                      </dd>
                      <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                      <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                      <dd class="lastpost">
                         <!-- BEGIN ads -->
                         <span class="AD_LastPA">
                                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                    <span class="AD_LastInfos">
                                        <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                        {catrow.forumrow.ads.DATE}<br />
                                        {catrow.forumrow.ads.LOCATION}
                                    </span>
                         </span>
                                <!-- END ads -->
                         
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->

                         <span class="lastpost-infos">
                         <!-- BEGIN switch_topic_title -->
                         <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                         <!-- END switch_topic_title -->
                         {catrow.forumrow.USER_LAST_POST}
                         </span>
                      </dd>
                   </dl>
                </li>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
                </ul>
          </div>
       <!-- END tablefoot -->
    <!-- END catrow -->
  3. Remplacez le par :

    Code:
    <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="forabg catebg">
             <ul class="topiclist">
                <li class="header">
                   <div class="table-title">{catrow.tablehead.L_FORUM}</div>
                </li>
             </ul>
             <ul class="topiclist forums">
       <!-- END tablehead -->

       <!-- BEGIN forumrow --><link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400&family=Raleway:wght@900&display=swap" rel="stylesheet">
                              <div class="fooreb">
                                <div class="fononew" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;"></div>
                                <div class="forightf">
                                <div class="fotitre">
                                  <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                                  <div class="fomesss">{catrow.forumrow.TOPICS} {L_TOPICS} & {catrow.forumrow.POSTS} {L_POSTS}</div>
                                    <!-- Fin de fo titre -->
                                  </div>
                                   <div class="fossfo borderfo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                  <div class="fodescr borderfo">{catrow.forumrow.FORUM_DESC}</div>
                                  <div class="folastpost borderfo">
                                                              <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->
                                  </div>
                                  <div class="fopost borderfo">
                                    <span>
                <!-- BEGIN switch_topic_title -->
                <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                <!-- END switch_topic_title -->
                {catrow.forumrow.USER_LAST_POST}
                </span>
                                  </div>
                                  <!-- Fin de fo right -->
                                  </div>
                                  <!-- Fin du flex de fo omega rebirth -->
                                  </div>   
                                
                              
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
                </ul>
          </div>
       <!-- END tablefoot -->
                              <script type="text/javascript">$('.fossfo').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script>
    <!-- END catrow -->

  4. Validez une fois que c'est bon (il faut confirmer la modification une fois de retour dans la page des templates



CSS

  1. Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS

  2. Copier coller ça en plus à l'intérieur :
    Code:
    /* CATEGORIES PAR KOALAVOLANT */

    .sub-header-info img{ display:none; }
    .catebg{ margin:0 auto; }
    .catebg, .catebg ul.topiclist{    
        background:none;
        box-shadow:none;
    }

    .catebg .header{    background:var(--image-fond-categorie);
        width:100%; height:20px; }

    .catebg{ margin-bottom:40px; width:950px; }
    .catebg .table-title{
        font-family:var(--font-1);
        text-transform:uppercase; height:10px; padding:10px;

    }

    .catebg .btn-collapse{ display:none; }

    .catebg .table-title h2{ font-size:45px;
            font-family:var(--font-1);
        color:var(--couleur-principale);
    }

    .catebg .table-title h2 img{ height:60px; width:100%; object-fit:cover; }

    .fooreb {
        width:950px; height:150px;
        display:flex; font-family:var(--font-2);
        justify-content:space-between;
        position:relative;
        top:15px; font-weight:lighter;
        margin-top:10px; margin-bottom:18px;
    }

    .fooreb, .fooreb *{ box-sizing:border-box; }

    .fononew{ width:8%;  
        height:150px; margin-right:5px; }

    .forightf{ display:flex; width:93%;
        justify-content:space-between; flex-wrap:wrap; }

    .forightf .fotitre{ margin-bottom:5px;
        background:var(--couleur-principale); display:flex;
        justify-content:space-between; width:100%;
    }

    .forightf .fotitre a{
    font-family:var(--font-1);
    text-transform:uppercase; margin:0px 10px;
        color:var(--white); font-size:25px;  
    }

    .fotitre .fomesss{ background:var(--white);
    color:var(--couleur-principale); margin:5px;
    padding:5px 20px; text-align:center; font-family:var(--font-2);
    }

    .borderfo{ border:1px solid var(--couleur-principale); }

    .forightf .fossfo{ font-size:14px; line-height:15px; width:20%; padding:10px; height:100px; overflow:auto;  }
    .forightf .fossfo a{ margin:5px 0px; display:block;  }
    .forightf .fossfo a:first-child{ margin-top:0px; }
    .forightf .fossfo a:hover{ color:var(--couleur-principale); }
    .forightf .fossfo br{ display:none; }

    .fodescr, .fodescr img, .fodescr span{ width:375px; height:100px; }
    .fodescr{ position:relative; overflow:hidden; padding:10px; font-size:14px; line-height:16px; text-align:justify; overflow-x:hidden; overflow-y:auto;  }
    .fodescr img{ object-fit:cover; position:absolute; top:0; left:0%; transition:500ms; }
    .fodescr:hover img{ left:-105%; transition:500ms; }
    .fodescr:hover{ overflow-y:auto; }

    .folastpost, .folastpost .lastpost-avatar, .folastpost .lastpost-avatar img{ width:150px; height:100px; }
    .lastpost-avatar:after{ }
    .folastpost .lastpost-avatar, .folastpost .lastpost-avatar img{ padding:0px;}
    .folastpost .lastpost-avatar img{ width:99%; height:98px; border-radius:0px; object-fit:cover; }

    .fopost{ width:165px;text-align:center; text-transform:uppercase;
        display:flex; align-items:center; padding:15px; height:100px; }
    .fopost a{ color:var(--couleur-principale); }

    /* FIN DES CATEGORIES */


Mettre une image de description

  1. Pour avoir une image par dessus la description, il suffit d'aller dans la description du forum, et d'y ajouter une image avec cette balise :
    Code:
    <img src="IMAGE">
    Au minimum elle devra faire 375x100 px.

Revenir en haut

Catégories n°4

Pisrale :: Codages :: Apparence du forum :: Templates

Nos amis proches

Catégories n°4 Parto512 Logo WyvArtem