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 à ne pas rater :
Pokémon EV08 Étincelles Déferlantes : où acheter le coffret ...
Voir le deal

    [CSS et Template] Simples catégories

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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
    Anonymous
    Invité

    Sam 1 Fév 2014 - 20:58

    merci ^^
    Mowwie
    Mowwie
    FémininAge : 35Messages : 28

    Sam 1 Fév 2014 - 23:32

    Merci
    Anonymous
    Invité

    Dim 2 Fév 2014 - 4:07

    Merchi :)
    Valhalla
    Valhalla
    MasculinAge : 33Messages : 105

    Dim 2 Fév 2014 - 12:05

    Merci
    Dr Isis
    Dr Isis
    FémininAge : 32Messages : 7

    Dim 2 Fév 2014 - 22:18

    Merci du partage ^^
    Gnuh
    Gnuh
    FémininAge : 26Messages : 87

    Lun 3 Fév 2014 - 19:12

    Merci pour les codes !



    [CSS et Template] Simples catégories - Page 7 Untitl16
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 31Messages : 69

    Mer 5 Fév 2014 - 14:29

    Coucou
    C'est très joli, merci beaucoup miss Wink



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    [CSS et Template] Simples catégories - Page 7 78216279872221
    Enidech
    Enidech
    MasculinAge : 33Messages : 39

    Mer 5 Fév 2014 - 20:20

    Merci Onyx pour le partage, ton tutoriel me semble intéressant et je suis curieux d'en voir les parties cachées Razz
    Igorette.
    Igorette.
    FémininAge : 27Messages : 44

    Jeu 6 Fév 2014 - 18:18

    MERCIIIIIIIIII
    Delena
    Delena
    FémininAge : 41Messages : 100

    Dim 9 Fév 2014 - 3:23

    Merci beaucoup du partage, très sympa :)



    [CSS et Template] Simples catégories - Page 7 8s6x
    webs
    webs
    MasculinAge : 31Messages : 1097

    Dim 9 Fév 2014 - 13:05

    Merci c'est super !



    [CSS et Template] Simples catégories - Page 7 Img-0107360bb1h
    mazonzon
    mazonzon
    FémininAge : 25Messages : 54

    Mer 12 Fév 2014 - 14:43

    Merci  :)
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Mer 12 Fév 2014 - 20:32

    Super joli ! Merci beaucoup !
    Choubakawa
    Choubakawa
    MasculinAge : 31Messages : 87

    Jeu 13 Fév 2014 - 13:16

    Merci :)



    [CSS et Template] Simples catégories - Page 7 Witche13
    Lilynufare
    Lilynufare
    FémininAge : 33Messages : 341

    Jeu 13 Fév 2014 - 15:06

    Merci !
    Ryosaki
    Ryosaki
    MasculinAge : 32Messages : 109

    Ven 14 Fév 2014 - 21:43

    Merci mais j'ai un petit souci est ce que on peut afficher une image à la place de l'emplacement pour les lien inférieurs ?



    [CSS et Template] Simples catégories - Page 7 Tutog
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 15 Fév 2014 - 1:49

    Bouh!

    Eh bien ça dépend de ce que tu veux faire. Est-ce que ce serait une image différente pour chaque forum par exemple?



    Etax
    Etax
    MasculinAge : 26Messages : 168

    Sam 15 Fév 2014 - 9:49

    merci !
    Laxuslightning
    Laxuslightning
    MasculinAge : 31Messages : 48

    Sam 15 Fév 2014 - 19:52

    Merci ! x)
    Nearween
    Nearween
    FémininAge : 25Messages : 213

    Sam 15 Fév 2014 - 19:58

    Pas mal ! Thank pour le code Wink



    [CSS et Template] Simples catégories - Page 7 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Presley♥Cash
    Presley♥Cash
    FémininAge : 33Messages : 80

    Dim 16 Fév 2014 - 20:41

    Merci du tuto ♥
    Strawy
    Strawy
    FémininAge : 26Messages : 38

    Dim 16 Fév 2014 - 22:14

    Merci beaucoup !



    [CSS et Template] Simples catégories - Page 7 435141StrawyKit2Signa
    Valinwë
    Valinwë
    FémininAge : 33Messages : 120

    Lun 17 Fév 2014 - 11:29

    C'est extra !



    [CSS et Template] Simples catégories - Page 7 Bangba10
    Evydence
    Evydence
    FémininAge : 27Messages : 60

    Lun 17 Fév 2014 - 16:22

    mercii
    Dezaia
    Dezaia
    FémininAge : 30Messages : 40

    Lun 17 Fév 2014 - 18:47

    Merci ♥



    [CSS et Template] Simples catégories - Page 7 69802510
    Contenu sponsorisé


      La date/heure actuelle est Dim 8 Sep 2024 - 2:45