AccueilDernières imagesRechercherS'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 : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

    [CSS et Template] Simples catégories

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 18 Nov 2013 - 0:33



    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
    Trych
    Trych
    FémininAge : 28Messages : 81

    Lun 18 Nov 2013 - 1:20

    Mici xx



    [CSS et Template] Simples catégories Just_k10
    Illy
    Illy
    FémininAge : 24Messages : 27

    Lun 18 Nov 2013 - 4:10

    Merci.

    PS : Je suis absolument DÉSOLÉE, sincèrement, de ne pas t'avoir répondu pour la commande. J'ai eu quelques problèmes personnels, ce qui a fait en sorte que je n'ai pas pu revenir sur le site. J'espère que tu veux bien me le pardonner...
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 18 Nov 2013 - 5:04

    Bouh!

    Illy: Pas de problèmes, il me semble bien que tu peux envoyer un MP à Neva pour réouvrir ta commande puisque c'est elle qui l'archivée et on pourra s'arranger. Par contre, j'ai fait beaucoup de modifications dans le code par rapport au modèle de base même si ça ne paraît trop visuellement, alors il va te falloir attendre à la fin de semaine prochaine afin que je puisse te refaire tes catégories comme tu le souhaitais au départ ^^



    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Lun 18 Nov 2013 - 9:24

    merci
    Illy
    Illy
    FémininAge : 24Messages : 27

    Lun 18 Nov 2013 - 13:31

    J'ai essayé hier de lui envoyer un message, mais je n'ai pas accès aux MP vu mon nombre de messages... Tu crois qu'il y a une autre façon pour que je puisse la contacter?
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Lun 18 Nov 2013 - 15:33

    Illy a écrit:J'ai essayé hier de lui envoyer un message, mais je n'ai pas accès aux MP vu mon nombre de messages... Tu crois qu'il y a une autre façon pour que je puisse la contacter?
    Hey,

    C'est bon, j'ai vu. Je redéplace !
    Pour contacter le staff sans passer par les MP, tu peux toujours poster dnas la partie Questions & suggestions :)



     
    Gin
    Gin
    MasculinAge : 31Messages : 7

    Lun 18 Nov 2013 - 21:40

    merci =)
    Asunie
    Asunie
    FémininAge : 32Messages : 68

    Mar 19 Nov 2013 - 15:06

    Merci !
    Kitty Galore
    Kitty Galore
    FémininAge : 32Messages : 55

    Mar 19 Nov 2013 - 18:09

    Merci !



    Milka
    Milka
    FémininAge : 35Messages : 112

    Mer 20 Nov 2013 - 12:08

    C'est super, merci Wink
    Meilia
    Meilia
    FémininAge : 29Messages : 92

    Mer 20 Nov 2013 - 14:42

    Merci Very Happy
    Snape.
    Snape.
    FémininAge : 27Messages : 55

    Ven 22 Nov 2013 - 15:30

    Merci du partage :)



    [CSS et Template] Simples catégories Tumblr_mqz0udGEEI1sx2peuo4_250[CSS et Template] Simples catégories Tumblr_mqz0udGEEI1sx2peuo6_250
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Ven 22 Nov 2013 - 15:46

    merci à toi moi qui chercher une présentation simple et clair c'est génial ! merci
    Moriarty
    Moriarty
    FémininAge : 28Messages : 85

    Sam 23 Nov 2013 - 15:16

    merci !
    Amber's
    Amber's
    FémininAge : 23Messages : 158

    Sam 23 Nov 2013 - 16:01

    Merci
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Sam 23 Nov 2013 - 17:25

    Superbe !



    [CSS et Template] Simples catégories Ye49
    Angy38
    Angy38
    FémininAge : 53Messages : 233

    Dim 24 Nov 2013 - 10:01

    j'adore merci



    [CSS et Template] Simples catégories Jvie
    Zooé
    Zooé
    FémininAge : 26Messages : 66

    Dim 24 Nov 2013 - 17:14

    mercii
    Rose24
    Rose24
    FémininAge : 32Messages : 24

    Dim 24 Nov 2013 - 18:50

    cool, merci !
    Shuna
    Shuna
    FémininAge : 29Messages : 137

    Dim 24 Nov 2013 - 18:57

    merkiiii
    Fallawen
    Fallawen
    FémininAge : 32Messages : 20

    Dim 24 Nov 2013 - 22:05

    Jeveux *__* ! Merci mille fois Very Happy Very Happy
    G U E R L A I N
    G U E R L A I N
    FémininAge : 33Messages : 192

    Lun 25 Nov 2013 - 3:10

    merci



    [CSS et Template] Simples catégories 191114colorfulwallandsexygirlfacebookcovero1
    Chhaya
    Chhaya
    FémininAge : 38Messages : 1213

    Lun 25 Nov 2013 - 11:46

    Merci pour le partage Onyx ♥



    [CSS et Template] Simples catégories 200412081714641513

      Merci Sparrow :3
    Izy
    Izy
    FémininAge : 26Messages : 15

    Lun 25 Nov 2013 - 17:46

    Super code merci ! ♥
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:03