Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Coupler "forum sur 2 colonnes" et "caté' en bloc"

    Partagez
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 8 Déc 2013 - 12:06
    Rappel du premier message :

    Coupler les "forum en 2 colonnes"
    avec les catégories en "bloc"

    Bienvenue sur ce tutoriel qui vous permettra d'en coupler deux autres en répondant à une problématique à laquelle vous avez peut-être déjà été confrontés, à savoir la mise en place des forum sur deux colonnes ET de l'encadrement des catégories par des images de sorte qu'elles fassent des blocs indépendants. Le principal souci rencontré est alors que l'image de fond du corps de catégorie censé se répéter tout le long de celle-ci ne le fait pas. Dans le pire des cas les catégories en viennent à se chevaucher les unes les autres.
    Dans ce tutoriel, j'espère vous aider à résoudre tout ces problèmes.

    Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.

    Voici le résultat final :  



    Puisque, tant qu'à faire, je vais également approfondir la confection des "forum" en colonne, une seconde partie sera présente dans ce tutoriel, et je vais le démarrer de rien, donc d'un forum qui n'a rien eu de modifié. Tout comme dans le tutoriel des forum en deux colonnes, je vais commencer par "nettoyer" le template d'affichage des catégories.

    Postez à la suite pour voir le contenu.

    1/ Placement des forum en deux colonnes

    Tout d'abord assurez-vous que la hiérarchisation de votre forum est bonne, les catégories doivent être séparées et de niveau moyen. Vous pouvez vérifier/modifier cela en allant dans : "Affichage" > "Page d'accueil" > "Structure et hiérarchie".

    Allez donc ensuite dans "Affichage" > "Templates" > "Général" > Affichage des catégories (index_box).

    Pour gagner du temps, voici mon template nettoyé :

    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}<br />
     {CURRENT_TIME}<br />
     </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><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>


    <!-- BEGIN catrow --><!-- BEGIN tablehead -->




     <!-- END tablehead -->
     <!-- BEGIN cathead -->

     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     






    <!-- END forumrow -->
     <!-- BEGIN catfoot -->

     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->



    <!-- END tablefoot --><!-- END catrow -->
    L'espace "catégorie" est alors vide, il n'y a pas de contenu, il faudra l'ajouter ensuite. Nous allons délimiter nos blocs, en commençant par refaire les blocs "forums" sur deux colonnes. J'insère donc deux blocs comme ceci, entre

    Code:
    <!-- BEGIN forumrow -->
    et
    Code:
    <!-- END forumrow -->
    car c'est là que se trouve le contenu des catégories, à proprement parlé, c'est à dire tout les forum.

    Voici le résultat de l'ajout :

    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}<br />
     {CURRENT_TIME}<br />
     </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><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>


    <!-- BEGIN catrow --><!-- BEGIN tablehead -->




     <!-- END tablehead -->
     <!-- BEGIN cathead -->

     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     

    <div class="forum_bloc">

      <div class="forum"></div>
      
    </div>

     <!-- END forumrow -->
     <!-- BEGIN catfoot -->

     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->



    <!-- END tablefoot --><!-- END catrow -->
    N'oubliez pas d'enregistrer votre template.

    Mon premier bloc porte le nom de "forum_bloc" et contiendra tout les forum d'une catégorie, le second nommé "forum" sera chaque forum contenu à l'intérieur. Jusque là cela ne diffère pas vraiment du précédent tutoriel sur le sujet.
    Mettons nos blocs en forme avec du CSS :

    Code:
    .forum_bloc
    {
      width: 850px;
      margin: auto;
    }

    .forum
    {
      width: 410px;
      float: left;
      height: 200px;
      margin: 5px;
      background: white;
    }
    (Je n'ai mis la couleur blanche en fond de "forum" que pour que l'on visualise bien où son nos blocs, c'est important si vous placez les éléments de bien voir où ils commencent et s'arrêtent)

    Voici le résultat obtenu :



    Remarque : comme pour le tutoriel précédent il est important de comprendre que vos deux blocs ne peuvent se mettre côte à côte que s'ils en ont la place ! Si votre "forum_bloc" fait 800px de large et que vos deux blocs font 400px de large, ils pourraient techniquement être en "float" et se tenir côte à côte...mais vous devez tenir compte des marges ! Attention à votre total de pixel, marges comprises.


    2/ Ajout des images du bloc catégorie

    Passons maintenant à la partie qui, je pense, vous intéresse le plus : le positionnement des images de notre catégorie, afin de lui mettre un "header", un "body" et un "footer". Ce tutoriel étant du codage, je vous laisse tout le soin de réaliser les images comme bon vous semble ! Les miennes ne sont là que pour servir d'exemple.

    Important ! : lors de la réalisation de votre image, pensez à la largeur totale de votre corps de forum. Dans mon cas, j'ai choisis ce que je voulais car le reste de mon forum test est vide, il n'y a pas de motif de corps, cependant il est possible que vous ayez défini un corps de 800px, et dans ce cas prenez garde à ne pas faire plus large pour vos blocs de catégorie.
    Plaçons donc nos blocs qui serviront d'en-tête, corps et pied de catégorie :

    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_head"></div>
    <div class="cate_body">

            <!-- END tablehead -->
     <!-- BEGIN cathead -->

     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     

    <div class="forum_bloc">

      <div class="forum"></div>
      
    </div>

     <!-- END forumrow -->
     <!-- BEGIN catfoot -->

     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->

    </div>
    <div class="cate_foot"></div>

    <!-- END tablefoot --><!-- END catrow -->
    (Je n'ai mis que le contenu même des catégories, sans toutes les tables précédentes que toute façon nous ne toucherons pas).

    J'ai donc placé le "head" et l'ouverture du "body" dans le "tablehead", puis j'ai refermé le "body" et mis le "foot" dans le "tablefoot".

    N'oubliez pas d'enregistrer votre template après modification.

    Ajoutons le CSS :

    Code:
    .cate_head
    {
      width: 900px;
      margin: auto;
      height: 117px;
      background: url(http://img15.hostingpics.net/pics/684539cateimage01.png);
    }
    .cate_body
    {
      width: 900px;
      margin: auto;
      background: url(http://img15.hostingpics.net/pics/772164cateimage02.png) repeat-y;
    }
    .cate_foot
    {
      width: 900px;
      height: 49px;
      margin: auto;
      background: url(http://img15.hostingpics.net/pics/156768cateimage04.png);
    }
    Validez, et allez voir le résultat.



    Aie aie... Etrange non ? Pourtant tout a été fait normalement, comme dans le tutoriel permettant de mettre des blocs autours des catégories. Alors pourquoi un tel résultat ? Et bien simplement car vos blocs de forum sont en "float", or si l'on ne dit pas de stopper ce "float", il reste. Du coup, nos blocs contenant les images ne savent pas vraiment où se mettre, ils ne tiennent pas compte de la présence des forum, ils ignorent où finissent chaque catégorie !

    Nous allons donc commencer par leur dire "oh! stop ! ça c'est une autre caté', arrête de flotter n'importe où". Pour cela nous allons utiliser une propriété CSS : dans chaque en-tête de catégorie il faudra signaler que le float ne doit plus être pris en compte (et ne vous inquiétez pas, vos forum resteront sur deux colonnes car dès votre premier bloc forum le float reprendra).
    Ajoutons donc la propriété au "cate_head" :

    Code:
    .cate_head
    {
      clear: both;
      width: 900px;
      margin: auto;
      height: 117px;
      background: url(http://img15.hostingpics.net/pics/684539cateimage01.png);
    }
    Validez et regardons :



    C'est mieux non ? Même si ce n'est pas encore ça... Nos catégories démarrent bien, mais comme je vous l'ai dit, les blocs de corps et de pied de catégorie ne comprennent pas où celle-ci commencent et où elles se terminent, à cause de tout ces éléments en flottement. Si l'on met un "clear: both" partout, nous n'auront plus de flottement et nos forum ne seront pas sur deux colonnes mais les uns sous les autres.
    Ce que nous allons faire, c'est une sorte de ruse : nous allons utiliser un "span" qui ne se verra pas mais qui permettra à notre bloc de corps "cate_body" de se déployer jusqu'à elle sans avoir à se préoccuper des forum en "float". Regardez plutôt :

    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <div class="cate_head"></div>
    <div class="cate_body">
      <span style="display: block; height: 1px; clear: both;"></span>
      
            <!-- END tablehead -->
     <!-- BEGIN cathead -->

     <!-- END cathead -->
     <!-- BEGIN forumrow -->
      
      <div class="forum_bloc">
      
      <div class="forum"></div>
        
      </div>
      
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->

     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    <span style="display: block; height: 1px; clear: both;"></span>
    </div>
    <div class="cate_foot"></div>

    <!-- END tablefoot --><!-- END catrow -->
    Ce qui a été ajouté c'est ceci :

    Code:
    <span style="display: block; height: 1px; clear: both;"></span>
    Ce "span" a été placé juste au début du cate_body, et juste avant qu'il ne se referme. Ainsi, notre corps sait jusqu'où se répéter.




    3/ Placer le titre de catégorie

    Notre titre de catégorie sera sous forme de texte et sera contenu par le "cate_head". Dans le cas présent avec mon exemple, il sera logiquement placé dans la barre bleuté.

    Commençons par placer notre titre, et pour cela il faut savoir reconnaitre la variable qui l'affiche. C'est celle-ci :

    Code:
    {catrow.tablehead.L_FORUM}
    Plaçons-la dans le "cate_head", et dans un bloc qui nous permettra de la placer :

    Code:
    <div class="cate_head"><div class="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
    Validez et regardez, notre titre apparait bien, même s'il n'est pas encore positionné. Pour arranger ça, allez dans le css et commencez par le placer en "absolute" :

    Code:
    .titre_cate
    {
      position: absolute;
      width: 900px;
      text-align: center;
    }
    J'en ai profité pour le centrer (et pour centrer un élément dans un autre il faut donner une taille au contenant, c'est pourquoi j'ai mis le 900px en largeur, la même largeur que l'image de cate_head).

    Là, si vous voulez modifier le titre de catégorie ça ne fonctionnera pas, ou disons pas pour toutes les propriétés. Pour cibler exactement l'élément de titre vous devez le nommer ainsi dans votre css :

    Code:
    .titre_cate h2
    {
      font-size : 24px;
      text-transform: uppercase;
      font-family: arial;
      text-decoration: none !important;
      color: #308576;
    }
    C'est bien ce "h2" que l'on veut modifier, et le "titre_cate" devant lui précise que l'on ne souhaite modifier que le h2 contenu dans le bloc "titre_cate", afin de ne pas modifier tout les titres H2 du forum x).

    Pour placer ensuite ce titre où vous souhaitez, ajoutez simplement une marge dans le "titre_cate" :

    Code:
    .titre_cate
    {
      position: absolute;
      width: 900px;
      text-align: center;
      margin-top: 35px;
    }
    .titre_cate h2
    {
      font-size : 24px;
      text-transform: uppercase;
      font-family: arial;
      text-decoration: none !important;
      color: #308576;
    }
    Et voilà !



    Libre à vous de mettre ce titre où vous voulez, selon l'image que vous avez réalisée pour votre en-tête de catégorie.


    Voici donc cette première partie de tutoriel achevée, si vous voulez corriger le petit défaut des forum qui ne sont pas totalement centrés, vous pouvez jouer avec la largeur du "forum_bloc" ou avec la largeur des "forum". Personnellement j'ai augmenté cette dernière à 415px afin que l'ensemble soit aligné.



    Pour continuer l'élaboration de vos forum vous pouvez consulter un second tutoriel qui fait suite à celui-ci : Voir "placer facilement des éléments dans un bloc (forum)"


    Dernière édition par Okhmhaka le Mer 17 Aoû 2016 - 8:39, édité 2 fois


    FémininAge : 21Message(s) : 162
    Lestrange
    le Jeu 2 Jan 2014 - 10:02
    Trop fort Cap'tain ! Veut voir !
    MasculinAge : 28Message(s) : 19
    Archange_Maxime
    le Sam 4 Jan 2014 - 16:49
    Merci
    MasculinAge : 19Message(s) : 48

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    -Hikaru-
    le Lun 6 Jan 2014 - 16:46
    merci ^^
    FémininAge : 19Message(s) : 94
    Sorako
    le Lun 6 Jan 2014 - 19:54
    Merci !
    MasculinAge : 25Message(s) : 36

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    N3MO
    le Mer 8 Jan 2014 - 15:24
    superbe vraiment merci pour le partage :)
    FémininAge : 25Message(s) : 97

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lilly31
    le Jeu 9 Jan 2014 - 9:00
    Merciii :)


    FémininAge : 21Message(s) : 24

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    KinThoa
    le Jeu 9 Jan 2014 - 14:45
    Merci !
    FémininAge : 22Message(s) : 105

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Fox.andBlue
    le Jeu 9 Jan 2014 - 16:07
    Merci beaucoup


    FémininAge : 33Message(s) : 151

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lilie
    le Sam 11 Jan 2014 - 10:33
    Super sympa ! Merc i beaucoup
    FémininAge : 21Message(s) : 22
    MonsterYuki
    le Dim 12 Jan 2014 - 0:11
    Merci


    FémininAge : 19Message(s) : 61
    Corkyie
    le Dim 12 Jan 2014 - 14:31
    Merci beaucoup pour ces partages :: Very Happy
    FémininAge : 18Message(s) : 31
    Ilfasidrel
    le Ven 17 Jan 2014 - 21:14
    Merci !
    FémininAge : 21Message(s) : 80
    ShuwaPon
    le Dim 19 Jan 2014 - 0:41
    Thanks!
    FémininAge : 26Message(s) : 85

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    OMJ
    le Lun 20 Jan 2014 - 17:48
    j'adore mercii du partage capt'ain :)
    FémininAge : 26Message(s) : 67
    Susu-chan
    le Lun 20 Jan 2014 - 19:26
    Merci beaucoup pour le tutoriel =)
    FémininAge : 28Message(s) : 52
    Doupi
    le Lun 20 Jan 2014 - 20:25
    Intéressant, je vais tester ! Merci
    MasculinAge : 26Message(s) : 1216

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Ayfoth
    le Lun 20 Jan 2014 - 20:47
    Merci captain.


    FémininAge : 24Message(s) : 109
    Raween
    le Mar 21 Jan 2014 - 4:46
    Merci ^^
    FémininAge : 23Message(s) : 16
    Philia
    le Mar 21 Jan 2014 - 17:58
    Merci beaucoup pour ce tuto Very Happy
    MasculinAge : 23Message(s) : 35
    senda95
    le Jeu 23 Jan 2014 - 2:40
    Merci
    MasculinAge : 23Message(s) : 51
    Loud Clash
    le Jeu 23 Jan 2014 - 3:03
    Merci
    MasculinAge : 25Message(s) : 130

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Vengryn
    le Jeu 23 Jan 2014 - 11:03
    Merci pour votre travail et le partage :)
    FémininAge : 27Message(s) : 141

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Irys
    le Jeu 23 Jan 2014 - 14:02
    Ca m'intéresserait beaucoup de voir ça *o* Merci Sparrow ♥
    FémininAge : 28Message(s) : 78

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Malice1329
    le Jeu 23 Jan 2014 - 19:01
    Merci de ce partage


    FémininAge : 24Message(s) : 67
    Amera
    le Dim 26 Jan 2014 - 18:16
    Merci !


    Contenu sponsorisé
    Aujourd'hui à 16:41

      La date/heure actuelle est Sam 3 Déc 2016 - 16:41