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.

Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

    Mise en forme des sujets (forme 1)

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

    Jeu 13 Sep 2012 - 18:32

    Rappel du premier message :

    Bonjour, bonsoir !

    Cela manquait un peu sur le forum, alors voici un tutoriel pour une mise en forme simple mais plus esthétique que celle de base de la liste des sujets, élément que l'on touche assez peu souvent, et pour cause, elle est à mon sens moins évidente que les catégories ou les messages, mais c'est peut-être justement le manque de pratique qui veut ça.

    Quoi qu'il en soit, voici ce que vous réaliserez avec ce tutoriel :

    >>> LIEN FORUM TEST <<<
    (en bas de page)

    Les couleurs seront modifiables avec le css bien sûr.


    Remarques importantes :
    ▬ vous devez être en phpBB2 pour réaliser ce tutoriel (punBB possible mais le template risque de différer)
    ▬ vous devez enlever les couleurs présentes dans votre panneau d'administration (Couleurs > Les Couleurs de fond > Table couleur rangée 1, 2 et 3)
    ▬ vous devez aller vérifier le réglage suivant dans votre panneau d'admin :
    "Général" > "Messages et Email" > Configuration" => Séparer les annonces et post-it des messages" => NON

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    I/ S'adapter à votre "forumline"

    Qu'est-ce que le "forumline" ? Il s'agit de l'attribut qui met en forme l'ensemble des cadres du forum. Si vous jetez un oeil dans les templates, vous verrez que
    Code:
    <table class="forumline">
    est présent partout. Ca va de la mise en forme du petit cadre de recherche apparaissant lorsque vous cliquez sur le bouton de navigation "Rechercher" jusqu'au bloc de catégorie en passant par l'encadré des options sous les sujets et les messages. Ce cadre se retrouve partout, il y a des template dans lequel il peut être modifié, ce qui fait que vous pouvez avoir des cadres différents entre vos catégories et vos listes de sujets par exemple, mais d'autres cadres ne sont pas ou difficilement modifiables, comme le cadre d'option qui se trouve en dessous des listes.
    Regardez par exemple sur mon forum test en dessous de la liste de sujet, le "joli" cadre violet qui contient les options... Pas terrible dans le cas présent, n'est-ce pas ? C'est la raison pour laquelle vous devez impérativement vous appliquer sur la mise en forme du "forumline" avant de faire quoi que ce soit.

    Vous aurez donc le choix au final de garder la mise en forme de votre forumline pour le cadre englobant les sujets (dans mon cas le cadre gris) ou bien de le changer en renommant le bloc. Ca parait compliqué ? Je vais vous expliquer un peu mieux à la fin du tutoriel, vous essaierez par vous-même et ça sera d'autant plus clair.


    II/ Modification du Template

    Le template qui gère l'affichage des sujets est : "topics_list_box".
    Je ne vais pas vous ennuyer avec des explications sur ce qu'il faut garder et ce que l'on peut enlever car les trois-quart ne le liront pas, et les intéressés auront le courage de comparer le template de base avec le mien et finiront par reconnaitre les éléments de manière efficace.

    Voici donc le template :

    Code:
    <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
    <script type="text/javascript">
    function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
       var all_checked = true;
       for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
          }
       }
       document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
    }
    function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
       for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
          }
       }
    }
    </script>
    <!-- END multi_selection -->

    <div class="bloc_sujets">
          <!-- BEGIN multi_selection -->
          <span align="center" nowrap="nowrap" width="20"><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" /></span>
       <!-- END multi_selection -->
     
       <!-- BEGIN pagination -->
          <span align="right"><span class="gensmall">{PAGINATION}</span></span>
       <!-- END pagination -->
     
       <!-- END header_table --><!-- BEGIN header_row -->
    <!-- END header_row -->
     
    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
       
     
        <table class="sujets"><tr>
          <!-- BEGIN single_selection -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><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><span class="icones_sujets"><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}" /></span></td>
          <!-- BEGIN icon -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
          <!-- 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 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="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </h2>
             </div>
             <!-- BEGIN switch_description -->
             <span class="genmed">
                <br />
                {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
             </span>
             <!-- END switch_description -->
             <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
             <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
          </td>

          <td class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
    <!-- 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 -->
       </tr></table>
      <div class="sujets_stats"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></div>
       <!-- END topic --><!-- BEGIN no_topics -->
       <table><tr>
          <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
              </tr></table>
       <!-- END no_topics --><!-- BEGIN bottom --> 

      <br /><br />
    <div class="pages"><span class="gensmall">{PAGINATION}</span>
      <span><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</span></div>
     
    <!-- END bottom --><!-- BEGIN footer_table -->
    </div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

    Vous pouvez enregistrer votre template, n'oubliez pas qu'il faut également le valider une fois enregistré pour que la modification soit prise en compte dans l'affichage en ligne du forum.


    III/ Mise en forme par le CSS

    Voici le code CSS à ajouter à votre propre CSS (PA > Affichage > Couleurs > Feuille CSS)

    Code:
    /* MISE EN FORME DES LISTES DE SUJETS */

    .bloc_sujets
    {
      width: 950px;
      margin: auto;
      background: #dfdfdf;
      border: 1px solid #ececec;
      box-shadow: 0px 0px 3px #868686;
      -o-box-shadow: 0px 0px 3px #868686;
      -moz-box-shadow: 0px 0px 3px #868686;
      -webkit-box-shadow: 0px 0px 3px #868686;
      -htm-box-shadow: 0px 0px 3px #868686;
      padding: 5px;
    }
    .sujets
    {
      background: #ececec;
      border: 1px dotted #ffffff;
      padding: 3px;
    }
    .topictitle
    {
      font-variant: small-caps;
      font-size: 12px;
    }
    .sujets_auteur
    {
      display: block;
      width: 200px;
      font-size: 11px;
    }
    .sujet_last
    {
      display: block;
      width: 180px;
      height: 40px;
      background: #f4f4f4;
      border-left: 3px solid #9e9e9e;
      border-right: 3px solid #9e9e9e;
      padding-top: 10px;
      font-size: 11px;
    }
    .sujets_stats
    {
      width: 900px;
      text-align: right;
      margin-bottom: 5px;
    }
    .sujets_stats_contenu
    {
      font-size: 10px;
      color: #a4a4a4;
    }

    Validez, puis personnalisez selon votre forum en changeant les formes et les couleurs. Il est tout à fait possible de mettre une image de fond (ligne "background") comme une texture par exemple.

    Pour changer les éléments de place comme par exemple mettre le bloc du dernier message avant l'auteur sur la ligne, vous devez aller dans le template et sélectionner la case correspondante. Les cases c'est tout ce qu'il y a entre :

    Code:
    <td>Contenu de la case ... </td>

    (N'oubliez pas les "td" x).

    Pour revenir à votre "forumline" : si vous souhaitez que ce soit la mise en forme de votre "forumline" qui soit le cadre de votre liste, il vous suffit de modifier :
    Code:
    <div class="bloc_sujets">
    par
    Code:
    <div class="forumline">
    (ce code se situe au environ de la ligne 22 de votre template modifié).

    J'espère que ce tutoriel vous sera utile !

    En cas d'utilisation du tutoriel, même si vous en modifiez le contenu, je vous serais reconnaissant de mettre un CREDIT à Never-Utopia, en remerciement pour notre travail et notre aide. C'est peu de chose mais cela nous encourage à vous donner toujours plus. Nous vous épargnons souvent des prises de tête avec les modifications des templates, ces heures gagnées valent bien un petit lien x).
    Merci par avance !


    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 26 Juin 2014 - 11:10, édité 2 fois



    sign
    avatar
    Nanouille
    FémininAge : 26Messages : 12

    Jeu 24 Avr 2014 - 20:22

    Merci ! :)
    Faraday
    Faraday
    FémininAge : 33Messages : 39

    Sam 26 Avr 2014 - 11:18

    Merci ,c'est bien plus joli en effet !
    kreou
    kreou
    FémininAge : 33Messages : 50

    Lun 28 Avr 2014 - 1:53

    Oh merci !!! C'est clair qu'on manque cruellement de tutos concernant cette partie !
    Clémentine
    Clémentine
    FémininAge : 31Messages : 223

    Lun 28 Avr 2014 - 22:59

    Un grand merci ^^



    Mise en forme des sujets (forme 1) - Page 20 9w9t
    JustDrago
    JustDrago
    FémininAge : 26Messages : 27

    Jeu 1 Mai 2014 - 18:16

    merci Wink
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Ven 2 Mai 2014 - 4:20

    Merci merci mercii !



    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Dim 4 Mai 2014 - 7:44

    merci :)



    :heart: :heart:
    Natsumi13
    Natsumi13
    FémininAge : 28Messages : 64

    Dim 4 Mai 2014 - 14:04

    Merci >o<
    Anastasiaa
    Anastasiaa
    FémininAge : 27Messages : 41

    Dim 4 Mai 2014 - 14:16

    Cey très beau, bravo ^w^ ♥



    Mise en forme des sujets (forme 1) - Page 20 245712Ana2
    Mephitis.
    Mephitis.
    FémininAge : 26Messages : 46

    Mar 6 Mai 2014 - 21:11

    exactement ce que je cherchais ! Merci beaucoup *w*
    Zappy
    Zappy
    FémininAge : 24Messages : 56

    Ven 9 Mai 2014 - 17:24

    Merci
    Albator
    Albator
    MasculinAge : 34Messages : 100

    Sam 10 Mai 2014 - 21:46

    Je veux voir ! '-'

    EDIT : GG
    Rococo
    Rococo
    MasculinAge : 28Messages : 28

    Ven 16 Mai 2014 - 15:35

    Merci beaucoup pour le code.
    Moona Neko
    Moona Neko
    FémininAge : 29Messages : 75

    Ven 16 Mai 2014 - 17:09

    Merci !
    Liquid Dreams
    Liquid Dreams
    FémininAge : 34Messages : 38

    Ven 16 Mai 2014 - 22:27

    Merci beaucoup pour le tutoriel ! (:
    Rinka
    Rinka
    FémininAge : 27Messages : 8

    Dim 18 Mai 2014 - 17:02

    Merci énormément ! o/
    Glow
    Glow
    FémininAge : 24Messages : 94

    Dim 18 Mai 2014 - 20:36

    Merci encore pour ce tutoriel (:
    Pandora Blue
    Pandora Blue
    FémininAge : 35Messages : 29

    Lun 19 Mai 2014 - 3:20

    Merci du partage !
    Chatchoum
    Chatchoum
    FémininAge : 32Messages : 43

    Lun 19 Mai 2014 - 23:05

    1 Millions de merci ! =3
    Kovu
    Kovu
    FémininAge : 22Messages : 257

    Mar 20 Mai 2014 - 0:46

    Merci !
    avatar
    Plumeau
    FémininAge : 28Messages : 30

    Jeu 22 Mai 2014 - 19:09

    Merci !
    Luxuria
    Luxuria
    FémininAge : 26Messages : 83

    Ven 23 Mai 2014 - 21:58

    Merci Wink
    Tyarra
    Tyarra
    FémininAge : 23Messages : 75

    Dim 25 Mai 2014 - 2:00

    Merci ^-^
    Framboaz
    Framboaz
    FémininAge : 31Messages : 23

    Dim 25 Mai 2014 - 3:33

    Merci, simple mais ça rend super bien Wink
    Abysse Yclette
    Abysse Yclette
    FémininAge : 31Messages : 123

    Mar 27 Mai 2014 - 15:44

    Pas mal, merci =)



    Mise en forme des sujets (forme 1) - Page 20 742880velo
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:15