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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Dunk Low
64.99 € 129.99 €
Voir le deal

    [Template & CSS] Un corps Catégorie

    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 25 Déc 2011 - 20:55

    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

    Riss
    Riss
    FémininAge : 26Messages : 26

    Dim 25 Déc 2011 - 20:56

    Très beau tuto *.*
    Ziktaon
    Ziktaon
    MasculinAge : 31Messages : 843

    Dim 25 Déc 2011 - 21:09

    Merci a toi ^^



    [Template & CSS] Un corps Catégorie 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Flitzz
    Flitzz
    MasculinAge : 39Messages : 134

    Lun 26 Déc 2011 - 13:05

    :love: Merci beaucoup pour ce tuto
    Ruby*
    Ruby*
    FémininAge : 32Messages : 24

    Lun 26 Déc 2011 - 15:21

    Merci beaucoup pour ce tuto :ange:
    tenderness
    tenderness
    FémininAge : 30Messages : 54

    Lun 26 Déc 2011 - 23:07

    Merci pour ce tutoriel ;3
    Shuu-Shuu
    Shuu-Shuu
    FémininAge : 27Messages : 199

    Lun 26 Déc 2011 - 23:38

    Oh merci ! Justement ce que je cherchais et je m'arrachais les cheveux pour ça xDDDD
    Plopounet
    Plopounet
    MasculinAge : 29Messages : 56

    Lun 26 Déc 2011 - 23:51

    Merci
    Miss Volchok
    Miss Volchok
    FémininAge : 37Messages : 139

    Mar 27 Déc 2011 - 15:29

    Thank you.
    Ellone
    Ellone
    FémininAge : 31Messages : 28

    Mar 27 Déc 2011 - 15:37

    Ah chouettte! Merci pour le partage! =D



    Gone for far away.

    [Template & CSS] Un corps Catégorie 49837113b_copie
    Evanea
    Evanea
    FémininAge : 35Messages : 24

    Mer 28 Déc 2011 - 16:03

    Ça m'intéresse énormément ! Merci beaucoup ^^
    RuaaK
    RuaaK
    MasculinAge : 27Messages : 18

    Mer 28 Déc 2011 - 16:15

    Merci ! <3
    Noémiie
    Noémiie
    FémininAge : 28Messages : 26

    Mer 28 Déc 2011 - 19:42

    Merci !
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Jeu 29 Déc 2011 - 10:44

    Merci du partage. Very Happy



    [Template & CSS] Un corps Catégorie Comman27
    Mohican
    Mohican
    FémininAge : 27Messages : 89

    Jeu 29 Déc 2011 - 11:20

    Nyark, merfy pour le tuto ^_^
    RAIN
    RAIN
    FémininAge : 29Messages : 41

    Jeu 29 Déc 2011 - 11:59

    merci du partage :)




    Quatres mots sur un piano.
    [Template & CSS] Un corps Catégorie 110119045725889575
    .havana
    .havana
    FémininAge : 26Messages : 10

    Jeu 29 Déc 2011 - 12:17

    Thanks !
    Sund4y
    Sund4y
    FémininAge : 31Messages : 15

    Jeu 29 Déc 2011 - 15:56

    Merci pour ce tuto, c'est ce que je cherchais !
    Polka
    Polka
    MasculinAge : 32Messages : 13

    Jeu 29 Déc 2011 - 16:16

    Merci pour le partage !
    Milkiniz
    Milkiniz
    FémininAge : 30Messages : 72

    Jeu 29 Déc 2011 - 17:40

    Merci pour le tuto <3
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Jeu 29 Déc 2011 - 22:07

    merci
    Louxx
    Louxx
    MasculinAge : 26Messages : 119

    Sam 31 Déc 2011 - 19:02

    Ca m'intéresse ! o/
    Waza
    Waza
    FémininAge : 103Messages : 177

    Sam 31 Déc 2011 - 21:56

    Merci :)
    OriginalNatsu
    OriginalNatsu
    FémininAge : 28Messages : 25

    Sam 31 Déc 2011 - 23:31

    Merci beaucoup. ♥



    [Template & CSS] Un corps Catégorie 514589CupOfTea
    Mao
    Mao
    FémininAge : 26Messages : 6

    Dim 1 Jan 2012 - 13:41

    Merci beaucoup pour ce tuto' !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:01