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 :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    [Template & CSS] Un corps Catégorie

    Taktiik
    Taktiik
    MasculinAge : 30Messages : 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

    isKeiko
    isKeiko
    FémininAge : 29Messages : 29

    Dim 1 Jan 2012 - 15:01

    Merci :)
    Tina
    Tina
    FémininAge : 40Messages : 70

    Dim 1 Jan 2012 - 18:09

    Merci du partage Razz



      corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 84 corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 AIZENIC02 corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 77 corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    Lou'
    Lou'
    FémininAge : 34Messages : 99

    Dim 1 Jan 2012 - 19:31

    Magnifique!
    J'adoooore! :)

    Merci pour le partage!!
    Marwen
    Marwen
    FémininAge : 30Messages : 25

    Dim 1 Jan 2012 - 20:49

    Merci à toi :)
    Anonymous
    Invité

    Dim 1 Jan 2012 - 21:59

    Merci pour ce super tuto !
    Shimura
    Shimura
    FémininAge : 31Messages : 32

    Lun 2 Jan 2012 - 0:25


      Merci pour le tuto
    ass kicker
    ass kicker
    FémininAge : 29Messages : 80

    Lun 5 Mai 2014 - 21:30

    Très intéressant, merci beaucoup



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©️endlesslove
    TheHG
    TheHG
    FémininAge : 30Messages : 52

    Ven 9 Mai 2014 - 1:39

    Merci !
    Candy Libertine
    Candy Libertine
    FémininAge : 26Messages : 136

    Ven 9 Mai 2014 - 16:15

    Parfaitement ce que je cherchais merci!
    avatar
    Narlya
    FémininAge : 22Messages : 20

    Sam 10 Mai 2014 - 13:16

    Merci !
    Shakespeare
    Shakespeare
    FémininAge : 34Messages : 110

    Dim 11 Mai 2014 - 11:16

    merci beaucoup ♥
    Mephitis.
    Mephitis.
    FémininAge : 26Messages : 46

    Dim 11 Mai 2014 - 17:35

    Super !
    Je pense que je vais l'utiliser *w*
    Je mettrais le crédit bien sur o/
    Jimmy
    Jimmy
    MasculinAge : 29Messages : 166

    Mar 13 Mai 2014 - 0:10

    merci pour le tuto
    Toria
    Toria
    MasculinAge : 34Messages : 48

    Mer 14 Mai 2014 - 9:35

    Merci beaucoup pour le tuto Wink
    Eden.
    Eden.
    FémininAge : 32Messages : 201

    Sam 17 Mai 2014 - 22:26

    Merci !
    Shalyma
    Shalyma
    FémininAge : 35Messages : 486

    Lun 19 Mai 2014 - 5:15

    Merci encore! (:



    corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 499a696982b45shalyma
    Merci Marie Chérie pour le kit!
    Pollux
    Pollux
    FémininAge : 34Messages : 99

    Lun 19 Mai 2014 - 11:09

    Merci
    Milka
    Milka
    FémininAge : 36Messages : 112

    Lun 19 Mai 2014 - 16:29

    Merci pour ce tuto Wink
    pops44
    pops44
    MasculinAge : 31Messages : 28

    Mar 20 Mai 2014 - 0:24

    merci ^p^
    thib56
    thib56
    MasculinAge : 29Messages : 32

    Mar 20 Mai 2014 - 12:47

    Merci.
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Mar 20 Mai 2014 - 15:14

    Je suis pas certaine que ce soit de mon niveau, mais merci :)



    hirondelle
    hirondelle
    FémininAge : 35Messages : 134

    Mer 21 Mai 2014 - 15:49

    Merci ♦
    Ahila
    Ahila
    FémininAge : 31Messages : 107

    Ven 23 Mai 2014 - 16:02

    Merchi beaucoup :3
    Apokalip'z
    Apokalip'z
    MasculinAge : 31Messages : 290

    Mar 27 Mai 2014 - 16:09

    j'ai envie de voir *.*
    Merci Taktiik ^^



    corps de cat�gorie - [Template & CSS] Un corps Catégorie - Page 2 1424818313-sign-apoka
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Ven 30 Mai 2014 - 9:50

    Superbe merci beaucoup trop top j'adore :) .



    Patricia :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Nov 2024 - 14:39