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

AccueilAccueil  
  • RechercherRechercher  
  • S'enregistrerS'enregistrer  
  • ConnexionConnexion  
    • Forum sans inscription - Si vous voulez en savoir plus ou rejoindre éventuellement l'équipe, découvrez le concept
    Commandes demander des créations aux gens de PisraleBoite à idée de créations proposez des idées de créations qui manquent sur PisraleFaceclaim réels trouver une bouille réelleFaceclaim illustré trouver une bouille illustréeBesoin d'un faceclaim pour que Pisrale vous propose une bouilleRemarques questions, suggestions, corrections des invités
    Dernières news (10/11)Discord
    (sans flood)
    -38%
    Le deal à ne pas rater :
    Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
    99.99 € 159.99 €
    Voir le deal

    Catégories n°4

    Pisrale :: Codages :: 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 :: Forum :: Templates

    Nos amis proches

    Catégories n°4 Parto512 Life Is Strange L'AnnuaireImage Catégories n°4 B-squareAinsi tomba ThédasDuralasCoeur de la force