AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -39%
Promo sur le Casque sans fil Sony WH-1000XM3
Voir le deal
229.99 €

    [CSS et Template] Simples catégories

    Onyx
    Onyx
    FémininAge : 26Messages : 3312

    le Lun 18 Nov 2013 - 0:33

    Rappel du premier message :



    Bouh!

    J'avais fait un code de catégorie pour une commande, mais comme la personne n'a jamais répondu et que je n'aime pas travailler pour rien, je suis la suggestion de Neva et vient vous le proposer ici ~
    Ce n'est pas très compliqué ou quoi que ce soit de spécial, mais c'est assez innofensif, je le jure ^^

    Aperçu

    Avant tout, il faut s'assurer d'avoir la bonne configuration dans:
    Panneau d'Admin>Affichage>Structure et Hiérarchie :
    • Séparer les catégories sur l'index (Deuxième ligne) : Moyen
    • Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
    • Lien vers les niveaux inférieurs : Oui
    Pour les images, il vous faudrait un bouton no new/new/lock de dimensions 50x40 pour que cela soit parfait.
    Cela donne le même résultat avec tous les navigateurs (sauf IE pour quelques détails, mais je le boude de toute façon è_é)

    Je vais commencer par vous filer les codes, puis je vous donnerai quelques explications:

    CSS :
    Code:
       /*DÉBUT DES CATÉGORIES*/
    /*Corps de Catégorie*/
    .global_cate {
      background-color: #6993BE;
      border: solid 1px #1B2836;
      border-bottom: double 8px #1B2836;
      border-top: none;
    }

    /*Titre de la Catégorie*/
    .title_cate span {
      display: block;
      margin-top: -10px;
      padding-left: 40px;
      background-color: #1B2836;
      font-size: 40px;
      font-family: monotype corsiva;
      color: #C2D7ED;
      border-bottom: double 8px #C2D7ED;
      transition: 0.8s;
      -webkit-transition: 0.8s;
    }
    .title_cate span:hover {
      padding-left: 120px;
      transition: 1s;
      -webkit-transition: 1s;
    }

    /*Corps de Forum*/
    .global_forum {
      margin-top: 15px;
      margin-bottom: 15px;
      padding-right: 20px;
      padding-left: 20px;
      font-family: Times New Roman;
      color: #1B2836;
    }

    /*Sous-forums*/
    .gensous_forums {
      position: relative;
      left: 17px;
      top: -32px;
      overflow: auto;
      z-index: 1;
      padding: 5px;
      background-color: #9BB9D9;
      width: 95px;
      height: 110px;
      border: solid 1px #1B2836;
      border-bottom: solid 5px #1B2836;
      border-top: solid 5px #1B2836;
      box-shadow: 0px 0px 15px 3px #1B2836;
      text-align: center;
    }

    /*Bloc de la description du forum*/
    .gendesc_forum {
      background-color: #9BB9D9;
      padding-right: 40px;
      height: 105px;
      border: solid 1px #1B2836;
      border-left: solid 5px #1B2836;
      border-right: solid 5px #1B2836;
    }
    /*Description du forum*/
    .desc_forum {
      position: relative;
      top: 15px;
      right: -30px;
      height: 85px;
      overflow: auto;
      padding-left: 110px;
      padding-right: 10px;
      text-align: justify;
      font-family: Times New Roman;
      font-size: 13px;
    }

    /*Titre de forum*/
    .forumlink {
      display: block;
      margin-top: -212px;
      margin-bottom: -17px;
      padding-left: 50px;
      text-align: center;
      font-family: Monotype Corsiva;
      font-size: 32px;
      color: #1B2836!important;
      letter-spacing: 2px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    .forumlink:hover {
      letter-spacing: 10px;
      text-decoration: none!important;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }

    /*Image New-Old_Lock*/
    .genicone_forum {
      position: relative;
      width: 50px;
      height: 40px;
      top: -178px;
      right: -13px;
      z-index: 1;
    }

    /*Bloc du Dernier Message*/
    .stats_forum {
      padding: 5px;
      padding-top: 10px;
      border: solid 1px #1B2836;
      border-bottom: solid 5px #1B2836;
      border-top: solid 5px #1B2836;
      background-color: #9BB9D9;
      width: 126px;
      height: 80px;
      font-family: Times New Roman;
      font-size: 13px;
    }
    /*Nb de Topics et Messages*/
    .stat_forum {
      font-family: Times New Roman;
      font-size: 11px;
    }
       /*FIN DES CATÉGORIES*/

    Ensuite, il faut remplacer tout ce qu'il y a dans le template Index_box entre "BEGIN catrow" jusqu'à "END catrow" par ceci :
    Code:
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
       <table class="global_cate" width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr><td class="title_cate">
            {catrow.tablehead.L_FORUM}
            </td></tr>
       <!-- END tablehead -->
       <!-- BEGIN forumrow -->
       <tr>
            <td>
            <table align="center" class="global_forum" cellspacing="15" width="100%">
       <tr>
       <td align="left" valign="middle" style="padding-top: 24px;" width="95%">
         <div class="gensous_forums" align="center">
              <span class="sub_forums">
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </span>
                <script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>
              </div>
              <div align="right"><div class="genicone_forum" align="center">
                <img class="icone_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </div></div>
              <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
              <div class="gendesc_forum">
           <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div>
              </div>
       </td>
       <td align="center" valign="middle" width="5%">
         <div class="stats_forum">
                <span class="stat_forum">Topics: {catrow.forumrow.TOPICS} | Messages: {catrow.forumrow.POSTS}</span><br /><br />
         {catrow.forumrow.LAST_POST}
         </div>
       </td>
       </tr>
       </table>
       </td>
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Enfin, (dans PA>Général>Forum>Catégories et Forums) il faut encadrer le titre de vos catégories, forums, sous-forums, etc d'un span comme ceci:
    Code:
    <span>Titre de ma catégorie</span>

    Comme mentionné plus tôt, il serait idéal que vos images New/Old/Lock soient de 50x40.
    Et voilà, si tout est fait, tout devrait être installé ^^


    Maintenant, allons voir quelques particuliarités:
    Vous trouverez dans le template Index_box le script suivant:
    Code:
    <script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>
    C'est ce qui permet de faire des sauts de ligne à la place des virgules pour les liens des sous-forums. Si jamais vous voulez changer cela, c'est la partie "replace(/, /g,'
    ')" qu'il faudra modifier. Ce qui est entre ' ' est ce par quoi vous remplacez la virgule.

    Ensuite, l'image New/Old/Lock. Dans le CSS, elle correspond à la class ".genicone_forum" et est bien identifiée. Si jamais vous changez les dimensions de l'image (50x60 par exemple), il est important que vous vous rendiez dans le CSS pour changer également la taille de l'image. Si jamais l'image est décalée parce que vous avez changé sa taille, vous pouvez la replacez comme vous le souhaitez en modifiant le "top" (plus le chiffre est négatif, plus l'image monte) et le "right" (plus le chiffre est négatif, plus l'image se déplace vers la droite).

    Pour finir, si jamais vous changez la police ou la taille du titre du forum (la class forumlink), il va probablement se décaler. Ce n'est pas un problème, vous pouvez ajuster la hauteur au-dessus du lien et en dessous du lien avec "margin-top" (plus le chiffre est négatif, plus l'espace en haut se réduit) et "margin-bottom" (plus le chiffre est négatif, plus l'espace en bas se réduit).

    Pour le reste, toutes les parties sont identifiées dans le CSS alors vous devriez pouvoir vous y retrouver ^^

    Voilà, j'espère que vous aimerez ~

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Onyx le Jeu 31 Mai 2018 - 2:26, édité 3 fois
    ELLAENYS
    ELLAENYS
    FémininAge : 34Messages : 127

    le Mar 26 Nov 2013 - 18:29

    Merci du partage ! :love: 



    [CSS et Template] Simples catégories - Page 2 478222tumblrm03ndpsPY21qb5heyo3r2500
    Mordiern
    Mordiern
    FémininAge : 42Messages : 285

    le Mar 26 Nov 2013 - 18:54

    Très joli travail et un grand merci ^^
    Archeos
    Archeos
    FémininAge : 23Messages : 60

    le Mer 27 Nov 2013 - 15:29

    Merci *_*



    [CSS et Template] Simples catégories - Page 2 120523094846729821
    Shalyma
    Shalyma
    FémininAge : 30Messages : 486

    le Mer 27 Nov 2013 - 19:02

    Merci !! (:



    [CSS et Template] Simples catégories - Page 2 499a696982b45shalyma
    Merci Marie Chérie pour le kit!
    ClaryF
    ClaryF
    FémininAge : 29Messages : 137

    le Jeu 28 Nov 2013 - 17:51

    Merci, j'aime beaucoup !
    Artémis Walker
    Artémis Walker
    FémininAge : 24Messages : 54

    le Ven 29 Nov 2013 - 11:18

    Vraiment sympa, merci du partage Wink



    [CSS et Template] Simples catégories - Page 2 Neveru10
    Nightbird83
    Nightbird83
    MasculinAge : 28Messages : 22

    le Ven 29 Nov 2013 - 16:15

    Merci bien pour ce code ^^
    Nightbird
    Nightbird
    MasculinAge : 28Messages : 81

    le Ven 29 Nov 2013 - 20:49

    Tiens petit bug, je ne vois plus le code XD Mais c'est pas grave, je poste un message à la suite, parce que j'ai un petit souci.. Sur les premières catégories, tout va bien mais plus je descend sur le forum, plus les titres se décalent et s'entrecroisent, je sais pas trop pourquoi ....
    Onyx
    Onyx
    FémininAge : 26Messages : 3312

    le Ven 29 Nov 2013 - 21:28

    Bouh!

    Nightbird: Problématique en effet ><
    Tu peux me passer le lien de ton forum?



    Stitch56
    Stitch56
    FémininAge : 26Messages : 200

    le Ven 29 Nov 2013 - 21:59

    merci
    Nightbird
    Nightbird
    MasculinAge : 28Messages : 81

    le Sam 30 Nov 2013 - 0:37

    En fait c'est arrangé ^^ Visiblement le souci venait du fait que certains forums avaient plus ou moins de sous-forum que d'autres, tout simplement =)
    Onyx
    Onyx
    FémininAge : 26Messages : 3312

    le Sam 30 Nov 2013 - 1:23

    Ah oui, je n'y avais pas pensé.
    J'ai ajouté un overflow pour ce bloc alors ^^



    EverLiam
    EverLiam
    FémininAge : 31Messages : 1033

    le Sam 30 Nov 2013 - 18:25

    merci ^^



    Souky Mitsu
    Souky Mitsu
    FémininAge : 29Messages : 124

    le Dim 1 Déc 2013 - 2:28

    Génial ! J'aime :3 Merci du partage Onix. =]
    Vegvisir
    Vegvisir
    FémininAge : 20Messages : 411

    le Dim 1 Déc 2013 - 15:18

    Merciii :3 !



    [CSS et Template] Simples catégories - Page 2 1
    Geniustyx
    Geniustyx
    FémininAge : 22Messages : 31

    le Dim 1 Déc 2013 - 16:29

    C'est sublime **
    Dooh-Nem
    Dooh-Nem
    FémininAge : 27Messages : 139

    le Dim 1 Déc 2013 - 17:14

    Merci !
    Kaleb32
    Kaleb32
    MasculinAge : 38Messages : 33

    le Lun 2 Déc 2013 - 14:24

    Merci ^^
    SpicAsh
    SpicAsh
    FémininAge : 23Messages : 176

    le Lun 2 Déc 2013 - 17:26

    Merci !
    Lidia64
    Lidia64
    FémininAge : 22Messages : 60

    le Lun 2 Déc 2013 - 19:28

    Trop beau *-*, merci !



    [CSS et Template] Simples catégories - Page 2 Rydn
    Nawak
    Nawak
    FémininAge : 22Messages : 112

    le Mar 3 Déc 2013 - 3:05

    Mici !



    [CSS et Template] Simples catégories - Page 2 Umbrel10
    Rynkka
    Rynkka
    FémininAge : 21Messages : 119

    le Mer 4 Déc 2013 - 13:03

    Merci



    [CSS et Template] Simples catégories - Page 2 48861711
    Masterweb80
    Masterweb80
    FémininAge : 31Messages : 129

    le Mer 4 Déc 2013 - 15:15

    Ah merci beaucoup j'aime bien !!
    louha
    louha
    FémininAge : 32Messages : 213

    le Mer 4 Déc 2013 - 22:37

    merci !
    Venise
    Venise
    FémininAge : 36Messages : 270

    le Ven 6 Déc 2013 - 22:43

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 1 Juin 2020 - 14:48