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.


    [Template & CSS] Un corps Catégorie

    Taktiik
    Taktiik
    MasculinAge : 25Messages : 2291

    le 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 : http://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

    Flaura
    Flaura
    FémininAge : 16Messages : 152

    le Sam 29 Aoû 2015 - 17:26

    Merci !
    MissDream
    MissDream
    FémininAge : 24Messages : 144

    le Jeu 3 Sep 2015 - 18:09

    merci pour le tuto :)

    Lessien
    Lessien
    FémininAge : 37Messages : 163

    le Jeu 3 Sep 2015 - 23:41

    Merci !
    Schnappi
    Schnappi
    FémininAge : 28Messages : 113

    le Ven 18 Sep 2015 - 19:03

    Merci :)
    Deadpoolio
    Deadpoolio
    MasculinAge : 29Messages : 277

    le Sam 19 Sep 2015 - 14:50

    Merci :)
    Reliane
    Reliane
    MasculinAge : 26Messages : 31

    le Mer 30 Sep 2015 - 12:13

    Super merci !
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Jeu 1 Oct 2015 - 3:42

    oh merci beaucoup :)



    [Template & CSS] Un corps Catégorie - Page 8 121217030106243656
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Dim 11 Oct 2015 - 23:41

    Merci,
    Anonymous
    Invité

    le Mar 20 Oct 2015 - 11:36

    bon allez j'essaie d'apprendre le codage vous donnez trop envie avec tous vos thèmes. merci pour les tutos!
    Leelo
    Leelo
    FémininAge : 28Messages : 156

    le Mar 20 Oct 2015 - 16:39

    merci
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 18Messages : 152

    le Jeu 29 Oct 2015 - 17:26

    Mercii ! ♥
    Luunalight
    Luunalight
    FémininAge : 29Messages : 98

    le Jeu 29 Oct 2015 - 20:22

    MErci
    Elocha
    Elocha
    FémininAge : 69Messages : 255

    le Jeu 29 Oct 2015 - 21:40

    je veux savoir faire ça ! *-*
    merci :)



    eLoChA.
    Nessaleth
    Nessaleth
    FémininAge : 28Messages : 52

    le Ven 25 Déc 2015 - 20:17

    Merci ! Very Happy
    Zomega
    Zomega
    FémininAge : 29Messages : 31

    le Sam 26 Déc 2015 - 4:16

    Merciii
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 25Messages : 161

    le Jeu 31 Déc 2015 - 4:08

    Merci **
    Mohank
    Mohank
    MasculinAge : 24Messages : 20

    le Dim 24 Jan 2016 - 16:15

    merci!
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 157

    le Dim 7 Fév 2016 - 16:09

    Merci beaucoup mais ça ne marche pas pour moi ! Sad est-ce que c'est parce que les liens des images de background sont mortes ? Merci d'avance ! =D
    Ariemm
    Ariemm
    FémininAge : 18Messages : 107

    le Lun 22 Fév 2016 - 12:08

    C'est trop beau! Merci ^^
    Anonymous
    Invité

    le Lun 22 Fév 2016 - 22:42

    Thx !
    Kitket
    Kitket
    FémininAge : 36Messages : 105

    le Jeu 25 Fév 2016 - 17:51

    MErci
    Hiruyio Atame
    Hiruyio Atame
    MasculinAge : 17Messages : 87

    le Mar 12 Avr 2016 - 14:56

    Merci
    Araik
    Araik
    FémininAge : 24Messages : 250

    le Jeu 5 Mai 2016 - 17:00

    Merci



    [Template & CSS] Un corps Catégorie - Page 8 Signat15
    Takasu-ryuji
    Takasu-ryuji
    MasculinAge : 27Messages : 23

    le Dim 12 Juin 2016 - 10:37

    merci
    Unklar
    Unklar
    MasculinAge : 19Messages : 3

    le Mar 14 Juin 2016 - 21:11

    Merci (-:
    Contenu sponsorisé


      La date/heure actuelle est Sam 7 Déc 2019 - 12:57