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

    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
    Miss Kiba
    FémininAge : 25Messages : 38

    le Jeu 2 Jan 2014 - 20:49

    Merci!
    avatar
    Alinoé
    FémininAge : 26Messages : 35

    le Ven 3 Jan 2014 - 11:46

    Merci ! Very Happy
    avatar
    Lilie
    FémininAge : 35Messages : 162

    le Sam 11 Jan 2014 - 20:32

    Merci pour ce partage :)
    avatar
    Ondée
    FémininAge : 20Messages : 659

    le Sam 18 Jan 2014 - 13:57

    Merci beaucoup ♥



    EN VACANCES JUSQU'À DÉBUT AOÛT - TOTALEMENT ABSENTE
    avatar
    Himmie
    MasculinAge : 21Messages : 128

    le Sam 25 Jan 2014 - 10:10

    Merci du partage ! :)
    avatar
    Enidech
    MasculinAge : 27Messages : 39

    le Mar 4 Fév 2014 - 20:19

    Je prends, merci.
    Avec un peu de personnalisation, je pense que j'arriverai à le faire à mon goût Very Happy
    avatar
    Eldiir
    FémininAge : 32Messages : 33

    le Dim 16 Fév 2014 - 0:24

    Merci!
    avatar
    xL2auurie
    FémininAge : 24Messages : 23

    le Dim 16 Fév 2014 - 14:50

    Super !
    avatar
    Ibtissem.
    FémininAge : 22Messages : 22

    le Mar 18 Fév 2014 - 19:32

    merci !
    avatar
    Databar
    MasculinAge : 24Messages : 142

    le Jeu 20 Fév 2014 - 22:54

    merci
    avatar
    Sweet Angel
    FémininAge : 35Messages : 148

    le Ven 21 Fév 2014 - 10:18

    Original, c'est certain, merci
    avatar
    Alys19
    FémininAge : 25Messages : 59

    le Ven 21 Fév 2014 - 23:18

    Merci beaucoup!!! :)
    Løve
    MasculinAge : 23Messages : 189

    le Sam 8 Mar 2014 - 9:59

    Merci beaucoup (:
    avatar
    Jull421
    FémininAge : 24Messages : 141

    le Mar 18 Mar 2014 - 2:36

    Merci



    avatar
    Rococo
    MasculinAge : 23Messages : 28

    le Mar 18 Mar 2014 - 17:09

    Merci pour l'astuce.
    avatar
    Invité

    le Mar 25 Mar 2014 - 8:27

    Merci du partage !
    avatar
    Alumine
    FémininAge : 21Messages : 488

    le Mar 25 Mar 2014 - 20:17

    Merci! (=
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 27Messages : 315

    le Mer 26 Mar 2014 - 14:35

    Oh tiens, pourquoi pas !! Merci ^^
    avatar
    bubulle
    FémininAge : 31Messages : 76

    le Jeu 27 Mar 2014 - 17:41

    merci :)
    avatar
    Kathee
    FémininAge : 25Messages : 667

    le Mar 1 Avr 2014 - 12:25

    Merci pour le partage Very Happy



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    Dooh-Nem
    FémininAge : 25Messages : 139

    le Mer 2 Avr 2014 - 13:03

    Merci
    avatar
    Shakespeare
    FémininAge : 28Messages : 109

    le Ven 4 Avr 2014 - 23:35

    merci du partage ♥
    Twedle
    MasculinAge : 23Messages : 17

    le Ven 18 Avr 2014 - 21:28

    C'est joli ! :) Je prends et merci beaucoup !
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Sam 19 Avr 2014 - 15:16

    Merci du partage ! ^^
    avatar
    Lindaóma
    FémininAge : 20Messages : 150

    le Lun 21 Avr 2014 - 15:07

    Super jouliiie, merci :)



    Contenu sponsorisé


      La date/heure actuelle est Mar 18 Déc 2018 - 16:59