AccueilFAQRechercherMembresGroupesS'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.


    Liste des sujets originale

    Partagez
    avatar
    Pochi
    FémininAge : 25Messages : 121

    le Lun 9 Sep 2013 - 21:18

    Bonsoir, Bonjour, Bon appétit à Tous Very Happy

    Vous voulez que votre liste des sujets soit hypra classe ? *bim*

    Genre, comme ça ? Clique Ici

    Voilà comment tu dois faire :

    • Tout d'abord tu dois être fondateur du forum car nous allons toucher aux templates. Plus particulièrement à Topics_list_box. Mais pas que.

    Pour savoir comment faire, poste à la suite et ça apparaîtra comme par magie *-*


    Repère dans le template ceci :

    Code:
    <!-- END multi_selection -->
    Et

    Code:
    <!-- BEGIN multi_selection -->
          <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
       <!-- END multi_selection -->
    Supprime tout ce qu'il y a entre ces 2 balises.

    Ensuite, prends ce code et mets le à la place de ce que tu auras supprimé

    Code:
    <table class="forumline" width="800px" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
              <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap" height="50px"></th>
          
          <!-- BEGIN multi_selection -->
          <th align="center" nowrap="nowrap" width="20" height="50px"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
       <!-- END multi_selection -->
       </tr>
       <!-- BEGIN pagination -->
       <tr>
          <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
       </tr>
       <!-- END pagination -->
       <!-- END header_table --><!-- BEGIN header_row -->
       <tr>
          <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
       </tr>
    <!-- END header_row -->

    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
       <tr>
          <!-- BEGIN single_selection -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20" bgcolor="#00EACB"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
          <!-- END single_selection -->
          <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
          <!-- BEGIN icon -->

          <!-- END icon -->
              <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%" ><div>
             <center><div class="topictitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                <h2 class="topic-title">
                                      <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> ○ <span class="topicauteur">Rédigé par {topics_list_box.row.TOPIC_AUTHOR}</span>
                </h2>
                              </div></center>

                      <div class="topicdescription">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div>
                      
             
             <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>&nbsp;
             <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
          
    <div><img class="sujets" src="http://image.noelshack.com/fichiers/2013/37/1378742511-sujet.png"/></div>
                      
                <div class="reponseetvue"><span class="postdetails">A reçu {topics_list_box.row.REPLIES} réponses et a été lu {topics_list_box.row.VIEWS} fois.</span></div><div class="dernierereponse"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME} • {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></div></div></td>
    Et tu enregistres :) N'oublie pas de publier le template après !

    Ensuite, nous allons aller dans le template viewforum_body.

    Ici, c'est très simple :) Tu changes toutes les largeurs des balise

    Code:
    <table width="100%" ...
    En remplaçant le 100% par 800px.

    Puis tu enregistres et publies :)

    Et là, C'EST MOCHE O_O c'Normal, tu n'as que la structure de base :)

    Place ceci dans ton CSS :

    Code:
    /*liste des sujets*/

    .topictitle{
      align: center;
      valign: middle;
      font-family: Grand Hotel;
      font-size: 25px;
      color: #341100;
    }

    .topic-title{
      align: center;
      font-size: 11px;
    }

    .topicauteur{
      font-family: Arial;
    }

    .reponseetvue{
      position: absolute;
      float: left;
      font-family: Arial;
      color: #341100;
    }

    .dernierereponse{
      position: relative;
      float: right;
      font-family: Arial;
      color: #341100;
    }

    .sujets{
      position: absolute;
      align: center;
      margin-top: -12px;
      margin-left: 115px;
    }
    Tu valides et c'est bon !

    J'espère que ce petit Tuto/LS t'aura été utile pour faire un beau forum !

    N'oublie pas de créditer Pochi de NU :)


    PS : J'avais la flemme de faire une fiche pour proposer ce code Very Happy//PAN//
    PS2 : J'ai pas l'habitude de proposer des tutos, je donne plus souvent des LS, désolée si c'est nul xD

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.
    avatar
    Ally Design
    FémininAge : 21Messages : 57

    le Jeu 12 Sep 2013 - 20:05

    Bah merci ^^
    avatar
    Parking
    FémininAge : 22Messages : 29

    le Ven 20 Sep 2013 - 19:17

    Merci beaucoup pour ce partage ^^
    avatar
    Rozenbrez
    FémininAge : 27Messages : 1383

    le Sam 21 Sep 2013 - 11:31

    Interessant, cela change de tous les autres codes. Merci de nous le proposer Very Happy

    avatar
    Pomme-de-terre
    FémininAge : 19Messages : 32

    le Mer 25 Sep 2013 - 12:14

    Merci !
    avatar
    Capouccino
    FémininAge : 20Messages : 189

    le Mer 25 Sep 2013 - 16:00

    Merci ^^



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    Chocapic
    FémininAge : 35Messages : 163

    le Dim 29 Sep 2013 - 8:47

    Merci pour ce partage :love: 




    TOM ELVIS JEDUSOR ~ JE SUIS VOLDEMORT
    Lord Voldemort est mon passé, mon présent & mon avenir
    ~ Avada Kedavra ~

    avatar
    Azuriel
    FémininAge : 23Messages : 129

    le Dim 20 Oct 2013 - 19:26

    Merci ^^
    avatar
    Taoro
    MasculinAge : 25Messages : 78

    le Sam 26 Oct 2013 - 20:56

    Merci Wink



    avatar
    Nadia oupsss
    FémininAge : 32Messages : 13

    le Dim 27 Oct 2013 - 19:26

    merci
    avatar
    Mangockie
    FémininAge : 20Messages : 39

    le Mer 30 Oct 2013 - 11:59

    Aparecium !
    avatar
    Vee
    FémininAge : 19Messages : 24

    le Jeu 31 Oct 2013 - 14:17

    Merci :)
    avatar
    xToshi-Shûx
    FémininAge : 26Messages : 39

    le Sam 9 Nov 2013 - 13:08

    Merci du partage.



    avatar
    Everdeen
    FémininAge : 24Messages : 36

    le Mar 12 Nov 2013 - 14:48

    Super, merci pour le tuto ♥



    avatar
    Sparkman
    MasculinAge : 22Messages : 5032

    le Mar 12 Nov 2013 - 14:51

    Hey ! Merci du partage ! :)



    avatar
    Féli
    FémininAge : 36Messages : 116

    le Ven 29 Nov 2013 - 16:41

    merci



    avatar
    Little Ghost
    FémininAge : 28Messages : 86

    le Jeu 5 Déc 2013 - 17:44

    merci =)
    avatar
    BloodyMoony
    FémininAge : 26Messages : 76

    le Ven 6 Déc 2013 - 10:17

    C'est intéressant comme mise en forme Wink
    avatar
    teck
    MasculinAge : 27Messages : 63

    le Lun 9 Déc 2013 - 12:51

    justement je vais essayer ton code juste avant manger^^ en tout cas merci



    avatar
    tamanegeek
    MasculinAge : 19Messages : 167

    le Mer 11 Déc 2013 - 15:16

    Merci !
    avatar
    [W]endy
    FémininAge : 28Messages : 117

    le Sam 14 Déc 2013 - 21:09

    Merci (:
    avatar
    Grande
    FémininAge : 30Messages : 207

    le Jeu 19 Déc 2013 - 18:30

    Merci
    avatar
    hurudy
    MasculinAge : 38Messages : 40

    le Dim 29 Déc 2013 - 22:09

    tip top :), merci
    avatar
    Wizcoo
    MasculinAge : 25Messages : 34

    le Dim 29 Déc 2013 - 22:31

    Merci
    avatar
    pops44
    MasculinAge : 25Messages : 28

    le Mar 31 Déc 2013 - 14:32

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 16 Oct 2018 - 5:12