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.


    [Forum] Mettre des cadres autour des tables

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 17 Sep 2009 - 22:42



    Salut salut !

    Voici donc un tuto encore attendu^^ pour apprendre ma méthode (qui n'est peut-être pas la meilleure et certainement pas la seule) pour mettre des cadres autour des tables de sous-forums.

    Exemple :

    >>> EXEMPLE


    Nous allons donc commencer par faire le fond... ou plutôt VOUS allez commencer par le faire Razz

    Faites donc un cadre vierge, dans lequel vous devez pouvoir séparer l'en-tête, le pieds et l'image de fond qui se répètera verticalement.


    1) Séparer les forums :

    La première chose à faire pour faire plusieurs tables est de séparer les forums que vous avez construit. Pour cela, rien de compliqué, allez simplement dans
    Affichage > Page d'accueil > Structure et Hiérarchie

    Mettez l'une des trois apparences du bas "Séparer les catégories sur l'index".


    2) Mettre le fond :

    On va commencer par mettre le fond de nos tables, car on ne procède pas de la même manière que pour le reste.
    Pour cela, nous allons simplement utiliser le CSS, en mettant une image de fond dans la "class" forumline.

    Code:
    .forumline
    {
    background-color: transparent;
    background-image: url(adresse de votre image de fond);
    background-repeat: repeat-y;
    padding-left: 20px;
    padding-right: 18px;
    border: none;
    }

    Explications :
    repeat-y => fait se répéter le fond en hauteur
    padding => crée une marge interne, de sorte que les bords de la table ne soient pas trop prêt de celle de votre cadre (fond ici).


    Nous avons donc normalement notre fond, il nous reste à mettre les en-tête et les pieds des cadres.


    3) En-tête et pieds :

    Pour cela, il va falloir aller dans les Templates afin de placer des divisions "vides", qui vont seulement contenir les images de tête et pieds. En gros, on va faire ce schéma :

    Templates :

    => ajout division "tête"
    [code de la table de base de FA]
    => ajout division "pieds"

    CSS :


    Indication que la tête doit contenir telle image de fond.
    Indication que le pieds doit contenir telle image de fond.


    Allez donc dans Affichage > Templates > Général > index_box (page d'accueil - affichage des catégories).

    Voici le code avec indiqué sous la forme suivante ce que j'ai ajouté :

    Il est encadré par :




    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}

             {CURRENT_TIME}

             </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>

             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->

    <!---------------- Début ajout  --------------------->
    <div class="table_head"></div>
    <!---------------- Fin ajout  --------------------->

    <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"> </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>

                </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>
          <!-- BEGIN forum_link_no -->
          <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">
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
          <!-- END forum_link_no -->
          <!-- BEGIN forum_link -->
          <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
          <!-- END forum_link -->
       </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>

    <!---------------- Début ajout  --------------------->
    <div class="table_foot"></div>
    <!---------------- Fin ajout  --------------------->

    <!-- END tablefoot -->
    <!-- END catrow -->

    Nous avons donc placé nos deux divisions, pour le moment cela ne donne rien puisqu'il faut ensuite mettre en forme ce qu'elles contiennent grâce au CSS.



    Code:
    .table_head
    {
    width: largeur de votre image de fond;
    height: hauteur de votre image de fond;
    background-color: transparent;
    background-image: url(adresse de votre image);
    background-repeat: no-repeat;
    }

    .table_foot
    {
    width: largeur de votre image de fond;
    height: hauteur de votre image de fond;
    background-color: transparent;
    background-image: url(adresse de votre image);
    background-repeat: no-repeat;
    }


    Vous avez normalement votre table encadrée !!


    Alors vous observerez dans doute que sur N-U les cadres changent selon les sections, l'en-tête du qui est en ligne est par exemple différent de ceux du forum... Pour cela, il faut mettre une division possédant une "class" différente juste avant la table du "Qui est en ligne" dans le code du template adéquat, en mettant dans le css l'image voulue en fond...

    Mais là, pour ça ou l'intérieur du forum, je vous laisse chercher, c'est exactement le même principe, à vous de trouver où les placer !

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 14 Juin 2012 - 18:52, édité 3 fois



    sign
    Fura
    Fura
    FémininAge : 36Messages : 5881

    Jeu 17 Sep 2009 - 23:14

    croc bien *.*
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 18 Sep 2009 - 0:19

    Merci^^

    Du coup j'ai mis en "masqué", il faut poster à la suite pour voir le contenu Razz



    sign
    Anonymous
    Invité

    Ven 18 Sep 2009 - 0:40

    Fun çà! ^^ Merci Cap'tain [Forum] Mettre des cadres autour des tables Icon_pirat
    Sparkman
    Sparkman
    MasculinAge : 28Messages : 5032

    Ven 18 Sep 2009 - 7:23

    C'est tous c'que j'aime ! * Palapapapa *
    Nan merci, je le voulais x)



    [Forum] Mettre des cadres autour des tables 1474840621-sign
    Linou
    Linou
    FémininAge : 39Messages : 23

    Ven 18 Sep 2009 - 14:05

    Hâte de voir le code et de le tester! xD
    Merci beaucoup pour l'astuce!


    Edit : Petite question après plusieurs essais xD et surtout question bête sûrement ^^" Mais les templates sont à modifier pour les catégories, forums et sujets également? ^^"
    Oas~
    Oas~
    MasculinAge : 33Messages : 23

    Ven 18 Sep 2009 - 15:26

    Merci beaucoup Sparrow =)
    Solitude
    Solitude
    FémininAge : 49Messages : 294

    Ven 18 Sep 2009 - 15:29

    Merci pour ce partage, j'adore tes design



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    [Forum] Mettre des cadres autour des tables Sign510
    D3NZL
    D3NZL
    Age : 30Messages : 62

    Ven 18 Sep 2009 - 18:08

    Encore merci Captain', je connais une méthode mais j'aimerai voir la tienne ^^
    Raik'n
    Raik'n
    MasculinAge : 29Messages : 765

    Ven 18 Sep 2009 - 18:15

    Merci pour cette astuce x)
    C'est super ^^'



    [Forum] Mettre des cadres autour des tables 789qovkj
    « Tout ce qui ne nous tue pas nous rend simplement plus .. bizarre. »
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 18 Sep 2009 - 18:28

    avec plaisir^^

    Linou : oui tu peux les modifier pour l'intérieur du forum également, mais là je ne donne pas tout sur un plateau, faut chercher un peu et tester surtout de placer les divisions, puis ça vient ^^



    sign
    Anonymous
    Invité

    Ven 18 Sep 2009 - 18:51

    Ha je l'attendais celui là ! =D

    Bon je vais tester tous ça. ^^

    Tu utilises cette technique à chaque fois?
    bisow'
    bisow'
    FémininAge : 35Messages : 202

    Ven 18 Sep 2009 - 18:53

    tip top ! merciiii :)




    [Forum] Mettre des cadres autour des tables 4aad2aac9e20atrue-blood
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 18 Sep 2009 - 18:59

    Pas à chaque fois sur tout mes thèmes, mais sur les trois actuels oui, c'est cette technique là.



    sign
    Linou
    Linou
    FémininAge : 39Messages : 23

    Ven 18 Sep 2009 - 20:43

    Pas de soucis, je vais chercher! ^^ Au moins quand on a compris, on sait refaire à notre sauce! C'est mieux xD

    Mais au moins, je sais qu'il faut que je me balade un peu partout dans les templates xD Vais essayer de les comprendre déjà xD
    En tout cas, merci pour ce tuto!
    J'ai donc réussi à faire pour le forum en "général" me reste donc à appliquer tout ca partout xDD

    *Vais fouiner*
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 18 Sep 2009 - 21:24

    Génial ! Bonne recherche et bonne personnalisation de l'astuce Wink T'as en compris le but ^^



    sign
    L Lawliet
    L Lawliet
    MasculinAge : 30Messages : 887

    Ven 18 Sep 2009 - 21:45

    Tu partage toujours tout xD
    Grade des secrets pour toi mon Captain TOT !




    [Forum] Mettre des cadres autour des tables Signat12
    " Un grand pouvoir, impose de grandes responsabilités ! "
    ass kicker
    ass kicker
    FémininAge : 29Messages : 80

    Lun 5 Mai 2014 - 21:51

    encore quelque chose d'utile, merci pour ce partage !



      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
    Apokalip'z
    Apokalip'z
    MasculinAge : 31Messages : 290

    Mer 14 Mai 2014 - 13:01

    Tu gères Captain, comme toujours Razz



    [Forum] Mettre des cadres autour des tables 1424818313-sign-apoka
    avatar
    Epoxy
    MasculinAge : 28Messages : 14

    Ven 16 Mai 2014 - 0:19

    merci
    Ahila
    Ahila
    FémininAge : 31Messages : 107

    Ven 23 Mai 2014 - 18:16

    Merci!
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 32Messages : 42

    Lun 26 Mai 2014 - 16:17

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

    Dim 1 Juin 2014 - 19:33

    Merci
    avatar
    Sasuke49
    MasculinAge : 26Messages : 11

    Lun 2 Juin 2014 - 15:21

    Merci !
    Toshiki
    Toshiki
    FémininAge : 28Messages : 56

    Lun 9 Juin 2014 - 13:37

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 7:47