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 - 19:18

    Rappel du premier message :

    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
    Powkfu
    MasculinAge : 28Messages : 13

    le Mer 23 Sep 2015 - 20:02

    Meri !
    avatar
    Chlirr
    FémininAge : 30Messages : 63

    le Mer 18 Nov 2015 - 16:55

    Merci j'y jette un oeil
    avatar
    TIGRESS13
    FémininAge : 26Messages : 23

    le Lun 14 Déc 2015 - 17:58

    Merci bien pour ce tuto.
    avatar
    itsizoh
    MasculinAge : 22Messages : 13

    le Lun 28 Déc 2015 - 0:42

    merci Very Happy
    avatar
    v-r0
    FémininAge : 27Messages : 39

    le Mar 29 Déc 2015 - 17:52

    Wow! J'adore! :)
    avatar
    Bunny Lune
    FémininAge : 29Messages : 143

    le Ven 22 Jan 2016 - 10:32

    Merci beaucoup pour le partage
    avatar
    Aya Hanazawa
    FémininAge : 27Messages : 72

    le Sam 5 Mar 2016 - 11:39

    merci ^^
    avatar
    Keylha
    FémininAge : 18Messages : 82

    le Lun 28 Mar 2016 - 10:06

    Merci !



    avatar
    Inwë
    FémininAge : 19Messages : 36

    le Sam 16 Avr 2016 - 12:54

    Il est vraiment cool ce code ! merci !
    avatar
    Xyyny
    FémininAge : 27Messages : 59

    le Mer 27 Avr 2016 - 16:07

    Sympatohe :)
    avatar
    Nono-Chan
    FémininAge : 20Messages : 273

    le Sam 28 Mai 2016 - 9:34

    thanks
    avatar
    Sighild
    FémininAge : 31Messages : 208

    le Dim 5 Juin 2016 - 19:04

    Merci
    avatar
    didicmy
    FémininAge : 27Messages : 69

    le Jeu 9 Juin 2016 - 18:36

    Ca changera merci Wink
    avatar
    Zibeline
    FémininAge : 33Messages : 84

    le Ven 10 Juin 2016 - 11:22

    Merci beaucoup pour ce code toujours utile
    avatar
    tininam
    MasculinAge : 50Messages : 7

    le Dim 12 Juin 2016 - 13:13

    Merci.
    avatar
    Lilise
    FémininAge : 20Messages : 22

    le Dim 12 Juin 2016 - 16:37

    merciiii!
    avatar
    Aubenaissante
    MasculinAge : 32Messages : 15

    le Lun 8 Aoû 2016 - 19:56

    merci !
    avatar
    chocapiix59
    FémininAge : 25Messages : 23

    le Dim 28 Aoû 2016 - 14:40

    Merci Very Happy
    avatar
    Mystick
    FémininAge : 33Messages : 100

    le Jeu 1 Sep 2016 - 15:40

    Merci :)
    avatar
    Samiro
    MasculinAge : 22Messages : 51

    le Dim 18 Sep 2016 - 10:09

    Merki
    avatar
    TheDirector
    MasculinAge : 20Messages : 20

    le Mer 5 Oct 2016 - 10:17

    Merci beaucoup :)
    avatar
    Star Rock Shooter
    MasculinAge : 21Messages : 11

    le Sam 8 Oct 2016 - 22:19

    Merci beaucoup ! :bisou:
    avatar
    Waize
    FémininAge : 20Messages : 34

    le Jeu 17 Nov 2016 - 0:58

    merci
    avatar
    Varadia
    FémininAge : 23Messages : 11

    le Jeu 17 Nov 2016 - 11:36

    Ca a l'air sympa, merci!
    avatar
    Madras
    FémininAge : 33Messages : 281

    le Dim 1 Jan 2017 - 17:39

    Merci du partage
    Contenu sponsorisé


      La date/heure actuelle est Lun 10 Déc 2018 - 0:50