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.

-13%
Le deal à ne pas rater :
APPLE AirPods 4 2024 à 129€ (119€ avec le code promo nouveaux ...
129 € 149 €
Voir le deal

    [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

    Miss lili
    Miss lili
    FémininAge : 34Messages : 49

    Ven 30 Mai 2014 - 12:39

    merci pour cette aide j'espere m'en sortir
    Kiki85
    Kiki85
    MasculinAge : 30Messages : 398

    Dim 1 Juin 2014 - 0:52

    Merci !
    Risa
    Risa
    FémininAge : 36Messages : 264

    Dim 1 Juin 2014 - 3:11

    Merci, je suis curieuse de connaître ce tuto.
    avatar
    Epoxy
    MasculinAge : 28Messages : 14

    Dim 1 Juin 2014 - 11:54

    merci =)
    Porcelain Detox
    Porcelain Detox
    MasculinAge : 30Messages : 91

    Dim 1 Juin 2014 - 20:44

    Merci beaucoup :)
    rhino
    rhino
    MasculinAge : 29Messages : 25

    Lun 2 Juin 2014 - 4:00

    merci :)
    Anonymous
    Invité

    Mar 3 Juin 2014 - 13:49

    merci aussi pour ici <3
    Kinjiro
    Kinjiro
    MasculinAge : 25Messages : 80

    Mer 4 Juin 2014 - 16:41

    Merco'



    [Template & CSS] Un corps Catégorie - Page 3 Signau11
    avatar
    Lovelybush
    FémininAge : 33Messages : 61

    Mer 4 Juin 2014 - 19:07

    j'aime beaucoup
    avatar
    LeePark
    MasculinAge : 29Messages : 2

    Jeu 5 Juin 2014 - 4:14

    Merci
    LinaK
    LinaK
    FémininAge : 34Messages : 53

    Ven 6 Juin 2014 - 18:05

    J'adore <3



    [Template & CSS] Un corps Catégorie - Page 3 J9ko

    Clémentine
    Clémentine
    FémininAge : 32Messages : 223

    Sam 7 Juin 2014 - 21:41

    A essayer et très sympa merci ^^



    [Template & CSS] Un corps Catégorie - Page 3 9w9t
    dangerous mind.
    dangerous mind.
    FémininAge : 29Messages : 16

    Dim 8 Juin 2014 - 20:43

    Merci !
    Hatawai
    Hatawai
    FémininAge : 31Messages : 17

    Jeu 12 Juin 2014 - 20:50

    Merci! C'est super, je cherchais justement comment faire.
    Shinju.dot
    Shinju.dot
    FémininAge : 35Messages : 88

    Ven 13 Juin 2014 - 16:43

    Merci
    mel1986
    mel1986
    FémininAge : 38Messages : 38

    Dim 15 Juin 2014 - 12:09

    merciii pour ce tuto
    Fallaha
    Fallaha
    FémininMessages : 80

    Ven 20 Juin 2014 - 15:11

    merci Very Happy
    Depp
    Depp
    FémininAge : 33Messages : 301

    Ven 27 Juin 2014 - 21:25

    Merci encore :)



    [Template & CSS] Un corps Catégorie - Page 3 Tumblr_nenygwIlcz1s4u464o1_500
    Mello
    Mello
    FémininAge : 27Messages : 52

    Dim 29 Juin 2014 - 21:58

    thanks
    Kimberlay *
    Kimberlay *
    FémininAge : 34Messages : 161

    Mer 2 Juil 2014 - 17:32

    Merci à toi !
    Lenalee
    Lenalee
    FémininAge : 35Messages : 40

    Jeu 3 Juil 2014 - 14:17

    merci beaucoup
    Rusha
    Rusha
    FémininAge : 28Messages : 6

    Jeu 3 Juil 2014 - 20:16

    Merci pour le tuto! Very Happy
    Furries
    Furries
    FémininAge : 28Messages : 34

    Sam 5 Juil 2014 - 15:19

    Meci, c'est sympa !
    Marwin
    Marwin
    MasculinAge : 32Messages : 47

    Dim 6 Juil 2014 - 1:28

    merci : ) merci :)
    Carcajou
    Carcajou
    FémininAge : 35Messages : 59

    Mer 9 Juil 2014 - 13:14

    Élégant :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 23:09