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 : -53%
STOGA Manette sans fil pour Switch à 9,34€
Voir le deal
9.34 €

    [Template & CSS] Un corps Catégorie

    Taktiik
    Taktiik
    MasculinAge : 26Messages : 2292

    Dim 25 Déc 2011 - 20:55

    Rappel du premier message :

    Un corps Catégorie Dernière mise à jour : 24 Novembre 2012
    Aperçu
    Préparation
    Détails


    W W W

    Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration.

    ? 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 ou Avec une image
    • Afficher les modérateurs d'un forum : Non

    Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

    Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


    Niveau : Facile
    Fait : 25/12/2011
    Type : Tutoriel


    V
    oici un tutoriel dans lequel je vous apprend à installer un corps de catégorie.
    J'appelle le corps d'une catégorie son header {entête}, son "body" {tronc} et son footer {pied}.
    Ainsi, après un petit passage sur photoshop, vous fabriquez votre beau corps de catégorie, et vous l'installer. Ici, je vais vous apprendre à l'installer en vous fournissant un corps simple et facilement modifiable Wink Sachez que ce tutoriel est en relation avec celui de Sparrow-Style : https://www.never-utopia.com/t22470-forum-mettre-des-cadres-autour-des-tables. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Navigation




    La Partie Template


    Tout d'abord, pour pouvoir créer ce corps, nous allons devoir l'introduire à l'aide de balises. Et pas n'importe laquelle, nous allons donc utiliser <div> pour faire cela.
    Grâce à cette balise, le corps deviendra un "block" et on pourra lui appliquer un fond, qui sera donc nos entêtes.

    On va lui affiler une class, ou une id [C'est la même chose] qui sera reliée au CSS et que l'on pourra modifier. Appellons ces classes :"cathead", "catbody" et "catfoot" !

    On va donc dans notre Template Index_Box qui gère l'affichage des catégories et on cherche ou mettre notre entête. Voyons voir, avec un peu de logique, on va le mettre tout en haut ... Et donc .... Oui ! On a juste à le mettre après ceci :

    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    Ce qui nous donnerait :

    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="cathead"></div>

    Bon Bon, très bien, on a réussi à mettre les entêtes, maintenant le tronc !
    Oula non, partez pas O_O !
    C'est encore plus simple x)


    On ouvre la une div juste après celle que l'on a créer et on la ferme dans le footer :

    On ouvre comme cela :
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="cathead"></div>
    <div class="catbody">

    Et on ferme comme ceci :
    Code:
    </div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


    Maintenant, on installe le footer juste après la fermeture de notre div de tronc :
    Code:
    </div>
    <div class="catfoot"></div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Et on a terminé Very Happy !

    On peut passer à la partie moins complexe et plus simpa : Le CSS.

    La Partie CSS


    Tout d'abord, on va récupérer nos class que l'on a crée il y a quelques minutes. Rappellez-vous : "cathead", "catbody" et "catfoot" !
    On aura donc cela :

    Code:

    .cathead
    {

    }

    .catbody
    {

    }

    .catfoot
    {

    }

    Maintenant, on va faire les petits coquets, et on va leur donner un fond, les centrer et leur donner des dimensions ;D

    Code:

    .cathead
    {
      background: url('http://www.pixyup.com/uploads/252043034ef77cc77932a.png') top center no-repeat;
      width: 864px;
      height: 106px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }

    .catbody
    {
      background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
      width: 864px;
      margin: auto;

    }

    .catfoot
    {
      background: url('http://www.pixyup.com/uploads/252044124ef77d0c1817e.png') bottom center no-repeat;
      width: 864px;
      height: 77px;
      margin: auto;
    }

    Pourquoi ai-je mis ces dimensions ? Ce sont celles de chaque partie du corps.
    Ainsi, si vous voulez les changer, penser à modifier les valeurs et mettre celle de vos parties du corps Wink
    Enregistrez et regardez ce que vous avez !
    C'est trop génial *o*

    La Partie Résumé


    Si vous avez suivis, je sais que certains seront perdus, donc je vous donne les deux codes, tous beaux, tous propres ;D

    Template (PhpBB2 uniquement, pour les autres versions, suivez les étapes en haut) :

    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="cathead"></div><div class="catbody">
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
       </tr>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
             <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
             <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
             </h{catrow.forumrow.LEVEL}>
             <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">
                <!-- 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}
             </span>
          </td>
          <td class="row3" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
          </td>
          <td class="row2" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
                <!-- 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">
                        <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                        {catrow.forumrow.ads.DATE}<br />
                        {catrow.forumrow.ads.LOCATION}
                    </span>
                </span>
                <!-- END ads -->
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </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>
    </div><div class="catfoot"></div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    CSS :

    Code:

    .cathead
    {
      background: url('http://www.pixyup.com/uploads/252043034ef77cc77932a.png') top center no-repeat;
      width: 864px;
      height: 106px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }

    .catbody
    {
      background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
      width: 864px;
      margin: auto;

    }

    .catfoot
    {
      background: url('http://www.pixyup.com/uploads/252044124ef77d0c1817e.png') bottom center no-repeat;
      width: 864px;
      height: 77px;
      margin: auto;
    }


    Voila ! Very Happy
    J'espère que ce tutoriel vous aidera à comprendre comment on confectionne un corps de catégorie.
    Si vous avez des questions, n'hésitez pas à les poster Wink
    Cordialement~~
    Taktiik.


    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Taktiik le Sam 24 Nov 2012 - 16:15, édité 6 fois

    Stiou
    Stiou
    FémininAge : 27Messages : 42

    Sam 18 Avr 2015 - 20:54

    Merci !!



    [Template & CSS] Un corps Catégorie - Page 7 Dany12
    darkhero246
    darkhero246
    MasculinAge : 29Messages : 179

    Mer 6 Mai 2015 - 8:59

    Merci pour le tuto Very Happy
    lecriminel
    lecriminel
    MasculinAge : 29Messages : 3

    Sam 9 Mai 2015 - 6:59

    merci
    Harleen Quinzel
    Harleen Quinzel
    FémininAge : 25Messages : 65

    Sam 9 Mai 2015 - 16:53

    Merci o/
    Wavy
    Wavy
    FémininAge : 20Messages : 39

    Lun 18 Mai 2015 - 2:18

    Merci, c'est classe et ça a l'air génial !
    final
    final
    MasculinAge : 27Messages : 20

    Lun 18 Mai 2015 - 11:54

    merci
    TiGraou
    TiGraou
    MasculinAge : 28Messages : 243

    Lun 18 Mai 2015 - 13:29

    Merci
    Morrigan
    Morrigan
    FémininAge : 27Messages : 22

    Ven 29 Mai 2015 - 12:19

    Merci pour ce partage!
    erika02
    erika02
    FémininAge : 24Messages : 278

    Mer 3 Juin 2015 - 12:47

    merci



    [Template & CSS] Un corps Catégorie - Page 7 45054210
    Abby Reever
    Abby Reever
    FémininAge : 29Messages : 145

    Mer 3 Juin 2015 - 14:07

    Haaaan merci! *-*
    Ravanil
    Ravanil
    FémininAge : 28Messages : 11

    Ven 12 Juin 2015 - 0:11

    merci pour ce tuto je ne savais pas que l'on pouvait modifier les catégories ainsi :D
    Krager
    Krager
    MasculinAge : 26Messages : 67

    Sam 13 Juin 2015 - 12:15

    merci
    Nerria
    Nerria
    FémininAge : 23Messages : 44

    Lun 22 Juin 2015 - 11:24

    Merci beaucoup, cela permet de donner une structure supplémentaire et très agréable !
    Nono-Chan
    Nono-Chan
    FémininAge : 23Messages : 273

    Lun 22 Juin 2015 - 12:35

    Merci pour le tuto
    Treasury.
    Treasury.
    FémininAge : 22Messages : 28

    Lun 6 Juil 2015 - 12:49

    merci
    iOS47
    iOS47
    MasculinAge : 22Messages : 23

    Dim 19 Juil 2015 - 15:32

    génial merci !
    younessdu91
    younessdu91
    MasculinAge : 23Messages : 96

    Jeu 23 Juil 2015 - 23:11

    Stylé Wink
    Katia Akane
    Katia Akane
    FémininAge : 30Messages : 37

    Dim 9 Aoû 2015 - 22:29

    Merci !!
    Emi.
    Emi.
    FémininAge : 30Messages : 83

    Dim 9 Aoû 2015 - 23:02

    merciiiii :)
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2486

    Lun 10 Aoû 2015 - 9:44

    Merci !!! (≧∇≦)/
    Laakoh
    Laakoh
    FémininAge : 30Messages : 41

    Mar 11 Aoû 2015 - 18:18

    merci :love:
    Kripterya
    Kripterya
    FémininAge : 35Messages : 98

    Jeu 13 Aoû 2015 - 1:32

    merci!
    Cruelly
    Cruelly
    FémininAge : 28Messages : 2605

    Jeu 13 Aoû 2015 - 6:08

    Merci ^^



    :heart: :heart:
    catinaphone
    catinaphone
    FémininAge : 29Messages : 93

    Dim 23 Aoû 2015 - 16:22

    Merci !
    Meiywa
    Meiywa
    FémininAge : 29Messages : 81

    Ven 28 Aoû 2015 - 20:14

    Merci pour le tuto :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 19:48