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.


    Création d'un thème complet (forme 2)

    Partagez
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Lun 22 Avr 2013 - 17:28

    Création d'un design de forum complet





    Introduction


    Bonjour et bienvenu sur l'index de ce6te création de thème de forme 1 ! Cette seconde application, la création d’un design de forum complet, vous permettra de mettre en œuvre tout ce que vous avez appris précédemment, mais également de découvrir de nouvelles choses pour créer, comme le titre l'indique, l'esthétique d'un forum en entier : Graphisme & Codage !


    Tout comme le précédent tutoriel, vous avez besoin de quelques "outils" :
    - Photoshop (ou un autre logiciel de graphisme, mais sachez que je ne ferais aucunes explications quant au graphisme car je ne suis pas expert dans le domaine ^^’)
    - Un forum test "ForumActif" (forum pour installer le thème, vous pouvez en créer un sur ForumActif, et seulement sur cette plateforme, quitte à ouvrir une adresse mail rapidement)
    - Un dossier que vous nommerez par exemple « Mon forum » pour y entreposer vos image.
    - Bloc-note (Ou Notepad ++ peu importe) pour sauvegarder vos codes.

    Je vais faire en sorte que ce tutoriel soit accessible à tous, débutant inclus. J'espère que cette application vous aidera à mieux comprendre comment concevoir un codage entier. Si vous avez des questions tout au long de l'application, n'hésitez pas à me MP Envoyer un MP ou de poster dans la section "Problème avec mon code" pour le côté codage et "Problème avec mon logiciel" ou "Work in Progress" pour la partie graphique.
    Vous en avez probablement marre du blabla et moi aussi, mais avant tout, si vous utilisez ce tuto' pour réaliser votre forum, la mise en place d'un crédit pour Never Utopia serait très appréciable ;D.

    Bon tutoriel !

    Ce tutoriel est le fruit d'un travail conséquent, merci de ne pas le copier, totalement ou partiellement. Vous pouvez le mettre en pratique librement, mais pas vous en approprier l'invention. Vous êtes autorisés à mettre des liens vers cette page où vous le souhaitez.


    Index


    Introduction & Index
    Étape 1 - Réaliser son fond et sa bannière
    Étape 2 - Préparer sa feuille de style CSS
    Étape 3 - Poser les fondations du codage du forum
    Étape 4 - Mise en forme de la navigation et de la bannière
    Étape 5A - Création graphique des catégories
    Étape 5b - Installation des catégories
    Étape 6 - Élaboration du "Qui est en ligne?"
    Étape 7 - Élaboration du Footer
    Étape 8 - Résumé des étapes précédentes
    Étape 9 - Structure de l'affichage des sujets
    Étape 10 - Mise en forme des messages
    Étape 11 - La Page Accueil, mise en avant d'un élément décisif
    Étape 12 - Des petits plus ?
    Étape 13 - Zoom sur l'ensemble du tutoriel et Bilan
    Étape 14 - Étape mystère

    Étape 1 - Réaliser son fond et sa bannière



    Introduction


    Avant toute chose, la première chose à faire est de créer sa bannière et son fond, s'il est en image bien sûr. Ces derniers vont donner la tonalité au reste du forum, des couleurs et des sensations qui vont s'en dégager. Nous allons débuter ce tutoriel par la création de notre fond puis de notre bannière.

    Création du fond


    • Ouvrez Photoshop et créez un document vide de taille 1680*1018 (1680 Largeur et 1018 Longueur).

    • A l’aide de l’outil « Pot de Peinture » Pot de peinture remplissez votre document de la couleur #021f2f

    • Double-cliquez sur le Calque 1 et appliquez une incrustation en dégradé de la couleur la plus foncée #010f18 à la couleur la plus claire #021f2f. Faites glisser votre dégradé vers le bas et appliquez une échelle de 15 %.

    • Créez un nouveau calque (CTRL+SHIFT+N) et remplissez le grâce à l’outil « pot de peinture » Pot de peinture de blanc #ffffff. Appliquez lui une fusion « Produit » puis double-cliquez sur le calque 2.
    Sélectionnez Incrustation de motif puis appliquez celui que vous désirez en n’oubliant pas de modifier son mode de fusion. (Pour ma part, j’ai choisi un effet papier que j’ai incrusté en produit.)

    Nous détenons à présent notre fond (Ou Background).
    Sélectionnez grâce à l’outil sélection carrée le bas du fond de telle façon à n’obtenir que la fondue vers le bleu foncé. Coupez (CTRL+X), Créez un nouveau document (CTRL+N) et Collez (CTRL+V). Enregistrez le en format .jpg au nom de «BodyBottom » dans le dossier que vous avez créée précédemment. De même, sélectionnez la partie restante du fond et réalisez la même manipulation en l’appelant « BodyTop ».


    Création de notre bannière


    • Pour créer notre bannière nous aurons besoin de « Nébuleuses ».
    Pour ma part, j’ai pris celles-ci :
    Nébuleuse 1
    Nébuleuse 2

    • Ouvrez un document de taille 750*280 (Largeur*Longueur) et collez-y vos deux nébuleuses.
    • Mettez la bleue en première et l’orange en seconde.
    • Passez votre calque 2 en Mode Superposition.

    • Appliquez maintenant 3 courbes transferts de dégradés selon vos nébuleuses.
    Notre thème sera dans les tons froids donc nous allons utiliser des dégradés de couleurs froides. J’ai utilisés ceci :
    (Mode Teinte – 100%)

    (Mode Teinte – 20%)

    (Mode Incrustation – 30%)

    Voici mon rendu :

    • Appliquez maintenant une typographie dans votre bannière. Je vous laisse le soin de décider pour ma part j’ai choisi d’appliquer une typographie large légèrement transparente en fond de la seconde avec un dégradé, une ombre portée et un contour.

    Étape 2 : Préparer sa feuille de style CSS



    Introduction


    Après avoir réalisé notre fond et notre bannière, nous devons préparer notre feuille de style CSS. Lui donner un aspect organisé avec des marquages nous permettra de cibler quels balises CSS appartient à quelle partie du forum.

    Organiser sa feuille de style CSS


    Il est tant d'aller sur le forum test pour commencer à le préparer à sa transformation. Nous allons donc préparer notre feuille CSS. Le forum se divisera en 8 parties modifiées via le CSS :
    Structure / Header
    Page Accueil / Catégories
    Sujets / Messages
    QEEL / Footer

    Ceci permettra un repérage BEAUCOUP plus simple dans la feuille CSS et donc si vous avez quelque chose à modifier, on s’y retrouvera en deux secondes.
    Pour réaliser le marquage, nous allons utiliser les commentaires CSS. Ils commencent par /* et se terminent par */. Vous pouvez ainsi ajouter entre ces deux éléments le commentaire.

    Si vous avez bien compris, notre feuille de style CSS va donc être :
    Code:
                   /*Début STRUCTURE*/
                   /*Fin STRUCTURE*/

                   /*Début HEADER*/
                   /*Fin HEADER*/
             
                   /*Début PAGE ACCUEIL*/
                   /*Fin PAGE ACCUEIL*/
       
                   /*Début CATEGORIES*/
                   /*Fin CATEGORIES*/

                   /*Début SUJETS*/
                   /*Fin SUJETS*/

                   /*Début MESSAGES*/
                   /*Fin MESSAGES*/

                   /*Début QEEL*/
                   /*Fin QEEL*/

                   /*Début FOOTER*/
                   /*Fin FOOTER*/

    C'est une étape que je trouve plutôt importante, même si elle peut se faire au fur et à mesure parce qu'elle permet un repérage efficace et rapide !
    Nous avons terminé les préparatifs de la feuille, passons à ceux du forum !

    Étape 3 - Poser les fondations du codage du forum



    Introduction


    Après avoir créée notre bannière, notre fond et avoir organisé notre feuille de style CSS, nous devons terminer les préparatifs par poser les fondations du codage du forum. Afin de pouvoir réaliser l'installation avec cette application, le forum doit être en phpBB2. Vous devez également être le fondateur du forum pour avoir accès aux templates.

    Réglages prioritaires


    • Allez sur votre forum test

    • Pour démarrer, nous allons commencer par mettre les réglages principaux d’affichage. J’entends par là, le logo centré, le titre du forum caché etc. Pour ce faire, direction Affichage > Page d’Accueil > En-tête et navigation.
    Vérifiez que ces éléments correspondent sinon modifiés-les comme voulu :
    Position du logo : Centré
    Afficher le titre du forum : Non
    Afficher seulement des images dans la barre des liens : Non
    Position du menu : Centré
    Forcer la barre de navigation à rester sur une ligne : Oui

    • Ensuite, allez dans Général> Configuration>Structure des pages :
    Largeur du forum (nombre ou %) : 948

    • Allez maintenant dans Affichage > Page d’accueil > Structure et hiérarchie et assurez-vous à nouveau de ces réglages :
    Séparer les catégories sur l’index : Moyen
    Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
    Longueur du titre du sujet affiché : 16
    Lien vers les niveaux inférieurs : Oui
    Afficher les modérateurs d'un forum : Non
    Afficher les statistiques du forum : Uniquement sur l'index racine
    Afficher les moteurs de recherche dans les statistiques du forum : Non

    • Enfin, allez dans Affichage > Images et Couleurs > Gestion des Images et retirez-y TOUTES les images qui se trouvent dans : Général/Navigation – Icônes du forum – Icônes des sujets.
    Ceci fait, vous vous trouverez à ce résultat :

    Non ! Rangez-moi ces haches >.<, je ne vous ai pas fait faire ça pour rien, au contraire, ce sont des réglages parfois négligés qui jouent un rôle important dans la hiérarchie du forum ! Avant de vouloir construire vos catégories, il faut avoir un aspect global de ce que vous voulez de votre plateforme alors n’hésitez pas à consulter les sections d’aide à la conception de forum Wink

    • Pour pouvoir enfin toucher au code, on va commencer par enlever les couleurs présentes sur le forum pour pouvoir mieux jouer avec le CSS. Allez donc dans Affichage > Couleurs et enlevez les couleurs de fond et les couleurs de contour.

    Premiers pas dans notre CSS


    • Maintenant, on passe au code pur et dur ! Il faut mettre en forme le fond et le corps du forum. Aussi, nous allons modifier la balise « body », littéralement « corps » en anglais mais un faux-ami ici puisqu'elle constitue le fond de votre forum. Nous allons tout d’abord commencer par y ajouter le fond que nous avons créée précédemment et retirer les espaces qui sont en haut et en bas entre le forum et la page web avec « margin : 0px » :
    Code:
                   /*Début STRUCTURE*/
    body
    {
      background-color: #021925;
      background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
      background-position: bottom left, top left;
      background-repeat: no-repeat, repeat-y;
      background-attachment: scroll, scroll;
      margin: 0px; /* Retire les espaces qui sont en haut et en bas entre le forum et la page web */
    }
                   /*Fin STRUCTURE*/

    Background-color équivaut à une couleur de fond
    Background-image équivaut à une image de fond, ici il y en a deux donc nous avons mis le bas (BodyBottom) en premier séparé d'une virgule (= au mot "et") puis mis le fond (BodyTop)
    Background-position équivaut à la position des images du fond. Le bas commence en bas à gauche (Bottom left) et le haut en haut à gauche (Top left)
    Background-repeat équivaut à la répétition des images du fond. Le bas ne se répète pas, le haut se répète sur l'axe des ordonnés (Si c'était uniquement le cas, on aurait mis repeat-y), donc de haut en bas et sur l'axe des abscisses (Si c'était uniquement le cas, on aurait mis repeat-x), donc de gauche à droite.
    Background-attachment équivaut à l'attachement du fond à la page web. Scroll signifie qu'il ne suit pas la page web lorsqu'elle déroule (à l'inverse de fixed qui déroule en même temps que la page et reste donc fixe)

    • Maintenant, on ajoute une couleur, des bordures, une taille et une ombre au corps du forum :
    Code:
    .bodyline
    {
      background-color: #052231;
      border-left: 1px solid #095279;
      border-right: 1px solid #095279;
      width: 948px;
      margin: auto;
      padding: 0px; /*Pas de marge intérieur dans le corps*/
      box-shadow: 0px 0px 3px #000;
    }
                   /*Fin STRUCTURE*/
    border-left équivaut à une bordure sur la gauche du corps. Elle sera de 1px de large, de consistance "solide" (c'est à dire sans coupure ou dédoublement) avec une couleur de #095279
    border-right est le même procédé sauf que tout ce passe sur la bordure droite.
    margin: auto viendra centrer le forum en laissant automatique les marges extérieurs du corps du forum. Il se centre donc automatiquement !
    width donne une largeur au corps. On utilise "height" pour sa longueur mais ici, c'est inutile de l'utiliser.

    Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.


    Radical changement hein ? Et bien, ce que vous venez de faire doit être aujourd’hui un réflexe lorsque vous commencez à coder votre forum. Ces éléments permettent une cohésion et une harmonie du forum.
    Afin que le rectangle blanc contenant les publicités soit de la même couleur que le fond intérieur, il faut aller dans les couleurs mettre #052231 en temps que "Couleur du fond de page". Nous allons également colorer les espaces où l'on peut écrire, mettez donc #17344F en tant que "Couleur zones de saisie, menus déroulants et cadre de l'en-tête "

    Je rappelle que vous pouvez modifier toutes les couleurs que je propose, tout ceci reste qu'une application et je ne vais pas aborder plusieurs nuances ou tons de thèmes, c'est infini et ça prendrait beaucoup trop de temps pour vous, comme pour moi ;P !

    Récapitulatif du CSS :
    Code:
                   /*Début STRUCTURE*/
       /* Fond du forum*/
    body
    {
      background-color: #021925;
      background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
      background-position: bottom left, top left;
      background-repeat: no-repeat, repeat-y;
      background-attachment: scroll, scroll;
      margin: 0px; /* Retire les espaces qui sont en haut et en bas entre le forum et la page web */
    }

       /* Corps du forum*/
    .bodyline
    {
      background-color: #052231;
      border-left: 1px solid #095279;
      border-right: 1px solid #095279;
      width: 948px;
      margin: auto;
      padding: 0px; /*Pas de marge intérieur dans le corps*/
      box-shadow: 0px 0px 3px #000;
    }
                   /*Fin STRUCTURE*/

                   /*Début HEADER*/

                   /*Fin HEADER*/
             
                   /*Début PAGE ACCUEIL*/

                   /*Fin PAGE ACCUEIL*/
       
                   /*Début CATEGORIES*/

                   /*Fin CATEGORIES*/

                   /*Début SUJETS*/

                   /*Fin SUJETS*/

                   /*Début MESSAGES*/

                   /*Fin MESSAGES*/

                   /*Début QEEL*/

                   /*Fin QEEL*/

                   /*Début FOOTER*/

                   /*Fin FOOTER*/

    Étape 4 - Mise en forme de la navigation et de la bannière



    Introduction


    Tout comme l’application 1, nous abordons la navigation en première. Je vais vous livrer une petite astuce bien sympa et simple à faire. C'est une esthétique qui sera uniquement dans cette application, pour donner quand même une envie d'apprendre !

    Modification de la structure


    • Pour modifier la navigation et la bannière, vous devez aller dans le template Overall_header qui se trouve dans Affichage > Templates > Général. Comme l’a fait Sparrow dans l'application précédente, on peut remercier haut et fort le staff de FA pour avoir ajouté les lignes dans les templates, si vous saviez comme ça nous facilite la vie T_T

    Enfin bon, direction l.265 à 269 et retirez ce qui gère l’affichage de la barre de navigation, c’est à dire :
    Code:
                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                   </tr>
                </table>

    Et comme l'application précédente, on va supprimer la navigation mais on va la faire réapparaitre par *Magie* ! Dirigez-vous à la l.245 et vous avez ceci :
    Code:
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                   <tr>
                      <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_left -->
                      <td align="center" width="100%" valign="middle">
                         <!-- BEGIN switch_logo_center -->
                         <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                         <br />
                         <!-- END switch_logo_center -->
                         <div class="maintitle">{MAIN_SITENAME}</div>
                         <br />
                         <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                      </td>
                      <!-- BEGIN switch_logo_right -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_right -->
                   </tr>
                </table>

    Non, ce n’est pas du chinois, c’est ce qui gère l’affichage de votre bannière, celui du titre du forum ainsi que de la description de votre forum. Et devinez ce qu’on va faire … SUPPRIMER ! Hop hop hop, pas tout, on va conserver ce qui nous intéresse espèce de barbares ! x)

    • Retirons d’abord ce qui gère l’affichage du logo à droite et à gauche ainsi que le titre et la description.

    Ceci :
    Code:
                       <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_left -->

    Ceci :
    Code:
                          <div class="maintitle">{MAIN_SITENAME}</div>
                         <br />
                         <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>

    Et ceci :
    Code:

                      <!-- BEGIN switch_logo_right -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_right -->


    On arrive en résumé à ceci :
    Code:
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                   <tr>
                      <td align="center" width="100%" valign="middle">
                         <!-- BEGIN switch_logo_center -->
                         <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                         <br />
                         <!-- END switch_logo_center -->
                      </td>
                   </tr>
                </table>

    • Maintenant, nous allons ajouter … Oui notre navigation, perspicaces les amis ♥ Mais comment ? Et bien nous allons créer une cellule (td) dans la ligne (tr) du tableau (table) déjà présent et régler la largeur des cellules. Pour ce faire, à la l.252, après
    Code:
                         <br />
                         <!-- END switch_logo_center -->
                      </td>

    Ajoutez :
    Code:
                       <td align="center" width="25%" valign="top">
                      </td>


    Puis modifiez le 100% en 75% ici :
    Code:
                                             
                      <td align="center" width="100%" valign="middle">
                         <!-- BEGIN switch_logo_center -->

    • Maintenant, nous allons ajouter notre navigation grâce à une div dans la cellule comme ceci :
    Code:
                 <table width="100%" cellspacing="0" cellpadding="0" border="0">
                   <tr>
                      <td align="center" width="75%" valign="middle">
                         <!-- BEGIN switch_logo_center -->
                         <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                         <br />
                         <!-- END switch_logo_center -->
                      </td>

                                                 <td align="center" width="25%" valign="top">
       <div class="navigation">
       </div>
                      </td>
                   </tr>
                </table>


    • Notre navigation est en place, on va y ajouter un titre à l'aide d'une div qui contiendra le texte "Navigation", c'est pas vraiment utile mais ça permet de s'y retrouver ^^ Si vous avez suivi, ça donne :
    Code:
       <div class="Navigation">
       <div class="NavigationTitle">Navigation</div>
       </div>

    • Enfin, nous allons procéder à la création de nos liens de l'interface navigatrice. Nous allons inclure les liens suivants :
    - Accueil : http://adressedevotreforum/
    - Rechercher : http://adressedevotreforum/search
    - Membres: http://adressedevotreforum/memberlist
    - Groupes: http://adressedevotreforum/groups
    - Profil: http://adressedevotreforum/profile?mode=editprofile
    - Messages Privés: http://adressedevotreforum/privmsg?folder=inbox
    - Déconnexion: http://adressedevotreforum/login?logout
    - Connexion: http://adressedevotreforum/login
    - Nous rejoindre: http://adressedevotreforum/register

    - Règlements : Lien vers la section "Règlements "
    - Présentations : Lien vers la section "Présentations "
    - Questions Invités : Lien vers la section "Questions Invités"
    - Flood : Lien vers la section "Flood"

    Ils seront donc crée de la sorte :
    Code:
    <a href="URL" alt="NOM DU LIEN">NOM DU LIEN</a>

    Avec de la jugeote, vous aller obtenir ceci :
    Code:
       <a href="http://adressedevotreforum/" alt="Accueil">Accueil</a>
       <a href="http://adressedevotreforum/search" alt="Rechercher">Rechercher</a>
       <a href="http://adressedevotreforum/memberlist" alt="Membres">Membres</a>
       <a href="http://adressedevotreforum/groups" alt="Groupes">Groupes</a>
       <a href="http://adressedevotreforum/profile?mode=editprofile" alt="Profil">Profil</a>
       <a href="http://adressedevotreforum/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a>
       <a href="http://adressedevotreforum/login?logout" alt="Déconnexion">Déconnexion</a>
       <a href="http://adressedevotreforum/login" alt="Connexion">Connexion</a>
       <a href="http://adressedevotreforum/register" alt="S'inscrire">Nous rejoindre</a>

       <a href="http://adressedevotreforum/">Règlements</a>
       <a href="http://adressedevotreforum/">Présentations</a>
            <a href="http://adressedevotreforum/">Questions au staff</a>
       <a href="http://adressedevotreforum/">Flood</a>

    Mais là, on est confronté à un problème vraiment énorme. Lequel est-il ? Et bien l'interaction Connexion/Déconnexion et Message Privé / Nouveau Message Privé n'est plus fonctionnelle ! Comment fait-on ? Et bien on va devoir jouer avec ce que nous propose ForumActif et un peu de Javascript. C'est pour cela que j'ai ajouté id="mp" à nouveau message car l'on va le récupéré via le JavaScript.

    Direction l.260, sautez une ligne et ajoutez ceci :
    Code:
          <!-- BEGIN switch_user_logged_in -->
    Ceci signifie, "A changer lorsque l'utilisateur se connecte". On clos le commentaire à la l.262 en sautant une ligne et en ajoutant :
    Code:
          <!-- END switch_user_logged_in -->

    On utilise le même procédé à la l.262, on saute une ligne et on ajoute :
    Code:
          <!-- BEGIN switch_user_logged_out -->
    Ca signifie, "A changer lorsque l'utilisateur se déconnecte". On clos maintenant le commentaire à la l.264 en sautant une ligne et en ajoutant :
    Code:
          <!-- END switch_user_logged_out -->

    Cependant, pour que tout ceci fonctionne, on est obligé d'ajouter la barre originelle mais pour éviter les soucis d'affichage, on va la mettre en invisible. L.276, Après :
    Code:
                      </td>
                   </tr>
                </table>

    Ajoutez :
    Code:
                                     <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

    Nous avons terminé *-* !
    Long pour faire une petit navigation hein ? Qui a dit que le codage était rapide héhé =P ?
    Bien, en résumé de la l.245 à la l.277, vous avez ceci :
    Code:
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                   <tr>
                      <td align="center" width="75%" valign="middle">
                         <!-- BEGIN switch_logo_center -->
                         <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                         <br />
                         <!-- END switch_logo_center -->
                      </td>

                                                 <td align="center" width="25%" valign="top">
       <div class="Navigation">
       <div class="NavigationTitle">Navigation</div>
       <a href="http://adressedevotreforum/" alt="Accueil">Accueil</a>
       <a href="http://adressedevotreforum/search" alt="Rechercher">Rechercher</a>
       <a href="http://adressedevotreforum/memberlist" alt="Membres">Membres</a>
       <a href="http://adressedevotreforum/groups" alt="Groupes">Groupes</a>
       <a href="http://adressedevotreforum/profile?mode=editprofile" alt="Profil">Profil</a>
          <!-- BEGIN switch_user_logged_in -->
       <a href="http://adressedevotreforum/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a>
       <a href="http://adressedevotreforum/login?logout" alt="Déconnexion">Déconnexion</a>
          <!-- END switch_user_logged_in -->
          <!-- BEGIN switch_user_logged_out -->
       <a href="http://adressedevotreforum/login" alt="Connexion">Connexion</a>
       <a href="http://adressedevotreforum/register" alt="S'inscrire">Nous rejoindre</a>
          <!-- END switch_user_logged_out -->
       <a href="http://adressedevotreforum/">Règlements</a>
       <a href="http://adressedevotreforum/">Présentations</a>
            <a href="http://adressedevotreforum/">Questions au staff</a>
       <a href="http://adressedevotreforum/">Flood</a>
       </div>
                      </td>
                   </tr>
                </table>
                                     <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

    Validez votre template, publiez-le et regardez le résultat sur votre forum.

    Affreux hein ? Hey c'est normal, il y a pas de CSS, on va y passer dès maintenant Wink

    • Il est temps d'ajouter notre bannière que nous avons réalisé ! Dirigez-vous dans Affichage > Images et Couleurs > Gestion des Images> Général/Navigation et ajoutez-là dans le champ Logo du forum.

    • On va maintenant en profiter pour ajouter les couleurs du forum (Celles du texte, des liens etc..). Direction Affichage > Images et Couleurs > Couleurs> Couleurs et taille du texte.
    Pour ma part, j'ai cette configuration :
    Couleur du Texte :#658899
    Couleur du Lien :#326E8A
    Couleur du Lien Visité :#326E8A
    Couleur du Lien Actif :#326E8A
    Couleur du Lien survolé :#326E8A
    Couleur Police En-tête :#326E8A

    Voilà, maintenant, on passe à la Feuille de style CSS !

    Modification de l'esthétique


    Rappelez-vous, nous avons créée 2 div : "Navigation" et "NavigationTitle". Nous allons leur ajouter l'ID du logo pour pouvoir, elle aussi, la modifier, son nom est "#i_logo". Pour les mettre en forme, c'est très simple, nous allons faire ceci :
    Code:
                   /*Début HEADER*/
    #i_logo
    {
     
    }

    .Navigation
    {
     
    }

    .NavigationTitle
    {
     
    }
                   /*Fin HEADER*/

    • Commençons par la bannière. Nous allons lui ajouter ses dimensions ainsi qu'une bordure.
    Code:
    #i_logo
    {
      border-bottom: 1px solid #095279;
      width: 750px;
      height: 279px;
    }

    Pourquoi avoir mis 279px ? Parce que nous avons ajouter une bordure en bas qui prend 1px ! (279 + 1 = 280 *o* !)

    Maintenant que c'est fait, on va modifier la navigation (le Bloc). On lui ajoute une couleur de fond, des bordures et une taille.
    EXERCICE :
    • "Navigation" va prendre les propriétés et les valeurs suivantes :
    ♦ Un fond de couleur #01121a
    ♦ Une bordure en bas et à gauche de 1px, solide en couleur #095279
    ♦ Ayant pour dimensions 197*280
    Correction:
    Code:
    .Navigation
    {
      background-color: #01121a;
      border-left: 1px solid #095279;
      border-bottom: 1px solid #095279;
      width: 197px;
      height: 280px;
    }
    A noter que "width" exprime la largeur et que "height" exprime la longueur (ou hauteur).
    Pas vraiment d'autres explications à vous donner, peut-être pourquoi ces dimensions ? Parce que 948 - 750 = 198 -1 (bordure) = 197px ! ... Des mathématiques, désolé Razz

    Maintenant, on touche au titre :
    Code:

    .NavigationTitle
    {
      background-color: #01121a;
      border-bottom: 1px solid #01121a;
      width: 100%; /* Il prend toute la largeur dans la div */
      height: 15px;
      text-align: center; /* On center le texte dans la div */
      color: #04334a;
      font-size: 13px; /* Taille de la police */
      font-weight: bold; /* Titre en gras */
      font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
      text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
    }
    Les valeurs dans "text-shadow" correspondent à l'allongement de l'ombre sur l'axe des abscisses (ici X=0), l'axe des ordonnés (ici Y=0), l'intensité (ici Z=3) et la couleur de l'ombre (ici = #000000.

    Hop hop hop, pas encore le temps d'enregistrer, on va modifier les liens qu'on a mis ! On va pas laisser ça comme donc on va récupérer leur balise : Navigation a. Ça donne :
    Code:
    .Navigation a
    {
      display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
      background-color: #031c28;
      border-bottom: 1px solid #01121a;
      width: 100%;
      height: 17px;
      font-size: 15px;
      font-family: 'Arial', serif;
      text-align: center;
      text-shadow: 0px 0px 2px #000;
      padding-top: 3px;
      padding-bottom: 3px;
    }
    Pourquoi avoir choisi de mettre display: block; plutôt que des sauts de lignes dans le HTML ?
    Saut de ligne en HTML :
    Code:
    <br />
    Parce que j'aime mieux faire ceci, en réalité c'est plus par fainéantise et puis c'est plus pratique d'ajouter une petit ligne que plusieurs ^^

    Bon, parce que je vous aime bien, on va mettre un effet super classe grâce aux transition CSS3 sur les liens. On capte le suffixe :hover, ce qui signifie "lorsqu'on passe la souris sur le lien" et on le modifie :
    Code:
    .Navigation a:hover
    {
      background-color: #01121a;
      border-bottom: 1px solid #031c28;
      color: #04334a;
      transition: 1s all;
    }

    On oublie pas d'ajouter la transition sur .Navigation a pour qu'elle soit progressive lorsqu'on passe la souris sur le lien et lorsqu'on l'enlève. Vous aurez remarqué que j'ai ajouté uniquement les éléments que je veux modifié au passage de la souris et pas plus !
    Au final, mon CSS entre Début Header et Fin Header est :
    Code:
                   /*Début HEADER*/
       /* Bannière */
    #i_logo
    {
      border-bottom: 1px solid #095279;
      width: 750px;
      height: 279px;
    }

       /* Boite Navigation */
    .Navigation
    {
      background-color: #01121a;
      border-left: 1px solid #095279;
      border-bottom: 1px solid #095279;
      width: 197px;
      height: 280px;
    }

       /* Titre Navigation */
    .NavigationTitle
    {
      background-color: #01121a;
      border-bottom: 1px solid #01121a;
      width: 100%; /* Il prend toute la largeur dans la div */
      height: 15px;
      text-align: center; /* On center le texte dans la div */
      color: #04334a;
      font-size: 13px; /* Taille de la police */
      font-weight: bold; /* Titre en gras */
      font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
      text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
    }

       /* Liens Navigation */
    .Navigation a
    {
      display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
      background-color: #031c28;
      border-bottom: 1px solid #01121a;
      width: 100%;
      height: 17px;
      font-size: 15px;
      font-family: 'Arial', serif;
      text-align: center;
      text-shadow: 0px 0px 2px #000;
      padding-top: 3px;
      padding-bottom: 3px;
      transition: 1s all;
    }
    .Navigation a:hover
    {
      background-color: #01121a;
      border-bottom: 1px solid #031c28;
      color: #04334a;
      transition: 1s all;
    }
                   /*Fin HEADER*/

    Comme vous le voyez, il y a des soulignements des liens et c'est pas élégant, donc on va les retirer en faisant une grosse compression. Dans votre CSS, allez à la l.28, sautez une ligne et ajoutez :
    Code:
    a:link, a:link hover, a:link active, a:link target
    {
      text-decoration: none !important;
    }

    Même procédé que Background-image, ici on retire aux liens, aux liens souligné, aux liens déjà cliqué, aux liens que l'on clique le soulignement. Ce sont des lignes à retenir et à ajouter à la base Wink !

    Maintenant, nous allons nous occuper de la fonctionnalité Message Privé / Nouveau Message Privé. Pour ce faire, direction Modules> HTML & JavaScript> Gestion des codes JavaScript.
    On vous demande : Activer la gestion des codes JavaScript, cochez OuiMaintenant, cliquez sur Créer un nouveau JavaScript.
    Titre : Nouveau MP
    Placement : Sur toutes les pages

    Ensuite, dans l'espace réservé, collez :
    Code:
    jQuery().ready(function(){
            var newmp = $("#i_icon_mini_new_message");
            if(!newmp.length) return;
            $("#mp").attr('style','color: darkred; font-size: 16px; font-weight: bold;');
    });

    Le code créer une variable newmp et lui attribu la valeur de l'ID New message. Il pose une boucle qui dit "S'il y a un nouveau message, l'attribut mp que nous avons ajouté au lien dans la navigation va modifier le style de "Nouveau message" et va le passer en rouge, d'une taille de 16px et en gras. Libre à vous de modifier son style !

    Récapitulatif du CSS :
    Code:
                   /*Début STRUCTURE*/
       /* Fond du forum*/
    body
    {
      background-color: #021925;
      background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
      background-position: bottom left, top left;
      background-repeat: no-repeat, repeat-y;
      background-attachment: scroll, scroll;
      margin: 0px; /* Supprime la marge en haut et en bas entre le forum et la page web */
    }

       /* Corps du forum*/
    .bodyline
    {
      background-color: #052231;
      border-left: 1px solid #095279;
      border-right: 1px solid #095279;
      width: 948px;
      margin: auto;
      padding: 0px; /*Pas de marge intérieur dans le corps*/
      box-shadow: 0px 0px 3px #000;
    }

       /* Soulignement liens */
    a:link, a:link hover, a:link active, a:link target
    {
      text-decoration: none !important;
    }
                   /*Fin STRUCTURE*/

                   /*Début HEADER*/
        /* Bannière */
    #i_logo
    {
      border-bottom: 1px solid #095279;
      width: 750px;
      height: 279px;
    }

       /* Boite Navigation */
    .Navigation
    {
      background-color: #01121a;
      border-left: 1px solid #095279;
      border-bottom: 1px solid #095279;
      width: 197px;
      height: 280px;
    }

       /* Titre Navigation */
    .NavigationTitle
    {
      background-color: #01121a;
      border-bottom: 1px solid #01121a;
      width: 100%; /* Il prend toute la largeur dans la div */
      height: 15px;
      text-align: center; /* On center le texte dans la div */
      color: #04334a;
      font-size: 13px; /* Taille de la police */
      font-weight: bold; /* Titre en gras */
      font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
      text-shadow: 0px 0px 3px #000000; /*Ombre sur le texte */
    }

       /* Liens Navigation */
    .Navigation a
    {
      display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
      background-color: #031c28;
      border-bottom: 1px solid #01121a;
      width: 100%;
      height: 17px;
      font-size: 15px;
      font-family: 'Arial', serif;
      text-align: center;
      text-shadow: 0px 0px 2px #000;
      padding-top: 3px;
      padding-bottom: 3px;
      transition: 1s all;
    }
    .Navigation a:hover
    {
      background-color: #01121a;
      border-bottom: 1px solid #031c28;
      color: #04334a;
      transition: 1s all;
    }
                   /*Fin HEADER*/
             
                   /*Début PAGE ACCUEIL*/

                   /*Fin PAGE ACCUEIL*/
       
                   /*Début CATEGORIES*/

                   /*Fin CATEGORIES*/

                   /*Début SUJETS*/

                   /*Fin SUJETS*/

                   /*Début MESSAGES*/

                   /*Fin MESSAGES*/

                   /*Début QEEL*/

                   /*Fin QEEL*/

                   /*Début FOOTER*/

                   /*Fin FOOTER*/

                   /*Début CHATBOX*/

                   /*Fin CHATBOX*/


    Dernière édition par Taktiik le Sam 18 Avr 2015 - 14:17, édité 1 fois

    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Lun 22 Avr 2013 - 19:44

    Étape 5A - Création graphique des catégories



    Introduction


    J’ai délibérément séparé la création des Catégories en deux parties : Graphisme & Codage. Pourquoi ? Tout d’abord parce que ce serait trop long, deuxièmement parce que l’approche n’est pas du tout la même, ni même la réflexion d’ailleurs. Passons donc à la création GRAPHIQUE de nos catégories.

    Création de nos catégories
    • Retournez sur Photoshop et créez un document vide de dimension 865*600 (Largeur*Longueur). Utilisez le pot de peinture en remplissant votre calque 1 de la couleur #031f2f.

    •Créez un nouveau calque et remplissez-le de la même couleur. Double-cliquez sur le Calque 2 et appliquez une Incrustation en Dégradé.

    (#021926 - #020f16) Angle : 0°

    •Créez un nouveau calque que vous remplissez de blanc (#ffffff). Double-cliquez dessus et appliquez une Incrustation en Motif. Pour ma part, j’ai utilisé un motif assez simple qui ressemble à une texture de cuir. J’ai baissé l’opacité à 26%.

    • Utilisez l’outil de sélection Ellipse (Clique droit sur le rectangle) et l’angle en haut à gauche de votre document. Réalisé un ovale de telle façon à obtenir une forme comme ceci :

    N’hésitez pas à utiliser la transformation de sélection (clique droit sur votre sélection) pour que cette dernière soit bien collée aux deux bords du document. Faites clique droit sur votre sélection, Intervertir et gommez la partie du haut de votre sélection pour avoir le résultat au-dessus. (N’oubliez pas de gommer sur le Calque 2 et 3.

    • Gardez la sélection que vous avez et faites clique droit dessus puis Transformation de la sélection => Symétrie axe vertical. Créez un nouveau calque et remplissez au pinceau la partie basse de la sélection de la couleur blanche. Double-cliquez sur le calque 4 et appliquez une Incrustation en dégradé.

    (#02601b - #dd0119) Mode de fusion : Couleur plus clair, Opacité : 11%, Angle 0°.

    Passez le Calque 4 en mode Saturation avec une opacité de 71%.

    •Dupliquez le Calque 4 (CTRL + J), passez le en mode Produit, avec une Opacité de 71%. Double-cliquez dessus et appliquez une incrustation de dégradé :

    (#292d30 - #000000) Mode de fusion : Lumière Tamisée, Opacité 55%, Angle 0°.

    • Prenez la baguette magique et cliquez (sur le calque 4 Copie) dans la zone non remplie. Dès que vous avez la sélection, intervertissez-la et passez sur le calque 2 et 3. Gommez sur les deux calque puis double cliquez sur le calque 2.
    Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 1px, Grossi 0px, Taille 3px.

    • Prenez à nouveau la baguette magique et cliquez (sur le calque 2) sur les deux coins en haut à gauche et en haut à droite puis intervertissez la sélection. Ensuite, faites clique droit sur votre sélection.

    • Créez un nouveau calque que vous mettez au dessus du calque 2 et 3, remplissez le de blanc. Sélectionné une partie du blanc et supprimez la pour obtenir ceci :

    Passez le calque en mode Produit et Mettez-lui une opacité de 45%.
    Double-cliquez dessus et appliquez une incrustation en dégradé du noir au blanc. (Mode de fusion : Incrustation, Angle 90°, Échelle 100%.
    Appliquez une ombre porté : Opacité 100%, Utiliser l’éclairage global désélectionné, Angle 90°, Distance 3px, Grossi 0px, Taille 3px.

    • Nous arrivons aux dernières étapes maintenant. Passez sur le calque 2 et sélectionnez à nouveau les coins gauches et droits du haut. Passez sur le calque 1 et gommez ce que vous avez sélectionné.

    • Gardez la sélection, intervertissez grâce au clique droit et créez notre dernier calque que vous allez place en première place (Tout en haut). A présent, faites clique droit sur la sélection, contour.
    Faites ces réglages : 1px, intérieur #095279

    Voilà, nous avons nos catégories, simples mais belles non ^^ ? Non T_T ? (Va bouder ailleurs)

    Bon ok, j’vais vous aider pour le découpage mais c’est bien parce que je vous aime bien <.<.

    • Sélectionnez avec l’outil rectangle la partie du haut qui constitue notre header catégorie jusqu’à la fin du dégradé que nous avons fait. Coupez-là (CTRL+X), créez un nouveau document (CTRL+N) et collez-là (CTRL+V). Enregistrez là en .PNG. Appelez-la, « TopCate ».

    • A présent, sélectionnez la partie du milieu jusqu’au début du dégradé du vert au rouge. Réalisez le même procédé que plus haut pour la sauvegarder.

    • Enfin, récupérez la partie du bas et sauvegardez la dans un nouveau document avec le même procédé.

    Devinez à quoi va-t-on passer *o* ? Non pas encore à l’installation mouahahah, il faut que l’on fasse les titres des catégories, que l’on va faire en image !

    Créer des images de catégories


    • Pour ceux qui veulent les même polices que moi, téléchargez ces deux polices :
    Blue Highway : http://www.dafont.com/fr/blue-highway.font
    Exmouth : http://www.dafont.com/fr/exmouth.font
    Installez-les dans votre dossier de police et passez sur Photoshop !

    • Créez un document de taille : 893*93 (Largeur*Longueur).
    Écrivez le nom de votre catégorie en taille 42px avec la police Blue Highway ou avec une autre assez large. (Pour ma part je l’ai écrit avec la couleur #053c5b) Centrez bien le nom puis double-cliquez sur le calque qui a été créé.
    Contour = Extérieur, couleur : #022031
    Ombre portée = Opacité : 37%, Utiliser l’éclairage global déselectionné, Angle 90°, Distance 2px, Grossi 0px, Taille 5px.
    Incrustation en dégradé : Normal, Inverser, Angle 90°.

    (#031f2f - #053c5b)

    • Dupliquez le calque, faites un clique droit dessus et faites « Effacer le style de calque ». A présent, double cliquez sur la duplication et appliquez une incrustation en dégradé.
    Incrustation en dégradé : Du Noir au blanc, Superposition, Opacité 69°, Angle 90°.

    • Dupliquez le calque à nouveau, faites un clique droit dessus et faites « Effacer le style de calque ».
    Maintenant, appliquez une dernière incrustation en dégradé.
    Incrustation en dégradé : Du Noir au blanc, Lumière Tamisée, Inverser, Angle 90°.

    • Créez une nouvelle type, cette fois-ci on utilise Exmouth (Ou une autre assez légère, mince). Écrivez votre sous-titre de forum et placez-le au centre du titre de la catégorie.
    Pour ma part j’ai mis :
    Incrustation en couleur : #062b54
    Lueur Externe : Superposition, Opacité 4%, Bruit 0%, couleur blanche
    Ombre portée : Opacité 75%, Distance 2px, Grossi 1px, Taille 1px.

    Réaliser son image new/No new/Sujet


    Au départ, je voulais vous laisser le champ libre mais mon but est de vous apprendre tout ce que j'ai fais pour ce thème, y compris les images New/No New/Lock ! Nous allons créer des images de ce type :

    No New

    Police utilisée : Forte

    • On y va ! Ouvrez un document de taille 44*80 (Largeur*Longueur).
    • En faisant clique-droit sur l'outil Texte Horizontal, sélectionnez l'outil Texte Vertical. Texte Vertical

    • Sélectionnez la moitié du document en largeur et la totalité en longueur.
    • J'ai pris une police de 33px, il faut qu'elle soit plus grande que la seconde donc n'hésitez pas à la faire assez grande. J'ai utilisé la couleur #053c5b pour le texte. Écrivez le mot "No".

    • Double-cliquez sur le calque créée et Appliquez :
    Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
    Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
    Dégradé
    (#053c5b - #061f2d)

    Placez le tout sur la moitié gauche du document (On raisonne en Largeur).

    • Cliquez à nouveau sur l'outil Texte Vertical. Créer dans la seconde moitié un texte : On écrira "New". J'ai pris une police de 17px (Pratiquement la moitié), il faut qu'elle soit plus petite que la première ! J'ai utilisé la couleur #053c5b pour le texte.
    • Double-cliquez sur le calque créée et Appliquez :
    Une Ombre Portée = Opacité : 37%, Angle : 90°, Distance : 3px, Grossi : 0px, Taille : 1px.
    Une Incrustation en Dégradé = Opacité : 100%, Angle : 0°, Echelle : 100%.
    Dégradé
    (#373c4f - #8a8c99)

    • Déplacez cette typo juste à coté de la première, fusionnez les calques (CTRL + MAJ + E). Enregistrez le document en .PNG :)

    • Pour la suite, je vous laisse réaliser la même chose en changeant les dégradés, Il faut plutôt choisir quelque chose de sombre pour Lock et quelque chose qui se démarque pour New !

    No New New Lock

    Et voilà, on a nos images catégories et nos catégories, on va enfin passer à l’installation Wink !

    Étape 5b - Installation des catégories



    Introduction


    Passons donc à la création CODAGE de nos catégories.

    Analyse du template


    Direction Affichage> Templates> Général> Index_box.
    Nous voici devant le Template qui gère l’affichage de nos catégories. C’est aujourd’hui, LE TEMPLATE le plus modifié des forums et pour cause, les tutoriels le concernant sont nombreux et divers. Dans notre cas, nous allons le démembrer pour mieux le comprendre et mieux le trifouiller à l’exemple du tutoriel sur les Qui Est En Ligne présent dans les formation codage & intégration.

    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>
    Ce tableau affiche les premiers liens que l’on retrouve au-dessus des catégories, vous savez ceux-ci :

    Code:
        <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
    Ceci annonce le début de la catégorie puis l’ouverture du Header des catégories. C’est pourquoi par la suite, on retrouve le titre de la catégorie et des titres de colonnes comme Derniers Messages, Sujets, Messages.

    Code:
     <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width: 150px;">{L_LASTPOST}</div></th>
       </tr>
       <!-- END tablehead -->

    Ensuite, on ouvre sur le cas où la hiérarchie serait compressée. C'est-à-dire où les catégories ne seraient pas séparées en bloc mais dans un seul et unique bloc. Pour ma part, je supprime souvent cette partie dans le template puis que je n’utilise jamais cette formation. Avis aux codeurs en herbe, il y a surement énormément de choses à réaliser sur ceci, c’est rare de voir des forums avec cette hiérarchie Wink
    Code:
        <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
       </tr>
       <!-- END cathead -->

    Enfin, on arrive à l’affichage des forums. C’est la partie donc la plus modifié des forums puisque aujourd’hui, elle fait partie intégrante des critères de sélection pour un utilisateur. Quelque chose de trop serré, trop carré donnera un effet d’oppression et en fera fuir plus d’un !
    Code:
           <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
             <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
    Affiche un espace s’il est activé puis l’image new/no new/lock du forum.

    Code:
              <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
             </h{catrow.forumrow.LEVEL}>
    Affiche le titre du forum, c’est quelque chose à retenir pour pouvoir modifier ses catégories.

    Code:
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
             </span>
    Dans l’ordre, la description des forums :
    Code:
    {catrow.forumrow.FORUM_DESC}

    Les modérateurs des forums :
    Code:
    {catrow.forumrow.switch_moderators_links.MODERATORS}

    Et les sous-forums :
    Code:
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

    Par habitude, je supprime les modérateurs puisque je ne vois que très peu d’intérêt à les laisser. Leur affichage n’est jamais coché pour ma part.

    Code:
           <td class="row3" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
          </td>
          <td class="row2" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
    Enfin dans l’ordre, l'affichage du nombre de Sujets:
    Code:
    {catrow.forumrow.TOPICS}

    Du nombre de messages :
    Code:
    {catrow.forumrow.POSTS}

    Et du dernier message :
    Code:
    {catrow.forumrow.LAST_POST}

    Vous avez toutes les clefs en main pour créer des catégories innovantes, mais pour ce tutoriel, nous allons créer des catégories toutes belles et toutes propres, alliant simplicité, ergonomie et efficacité. Avec le temps que nous avons passé précédemment à faire nos catégories, il est donc bien normal que nous commencions par le corps des catégories.

    Mise en place du corps de catégorie


    • Nous allons créer trois blocs, le header (Ou tête), le corps(Ou corps) et le footer(Ou Pied) de la catégorie. Pour créer le header, direction l.22. Avant :
    Code:
     <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    Nous allons créer deux div. L’une affichant le header, l’autre le corps. Ce qui donne :

    Code:
     
       <div class="TopCategorie"></div>
       <div class="MidCategorie">
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

    On ferme la div de "MidCategorie" après :
    Code:
        <!-- BEGIN tablefoot -->
    </table>

    Ce qui donne :
    Code:
        <!-- BEGIN tablefoot -->
    </table>
       </div>

    Maintenant on insère le footer de la catégorie juste après le corps que nous avons créée. Vous obtenez ceci :
    Code:
        <!-- BEGIN tablefoot -->
    </table>
       </div>
       <div class="FootCategorie"></div>
       <!-- END tablefoot -->

    • Direction la feuille de style CSS -Je ne vais plus vous indiquer comme y aller, à force vous avez du retenir non ^^ ?- dans la partie réservée aux catégories, on ajoute nos trois div créés précédemment :

    EXERCICE :
    • Entre "Début Catégories" et "Fin Catégories", placez les balises CSS suivantes :
    ♦ TopCategorie
    ♦ MidCategorie
    ♦ FootCategorie

    Correction:
    Code:
                    /*Début CATEGORIES*/
       /* Corps Catégorie */
    . TopCategorie
    {

    }

    . MidCategorie
    {

    }

    . FootCategorie
    {

    }
                   /*Fin CATEGORIES*/


    • Maintenant, on va leur affilier la taille de chacune de nos parties, les centrer grâce à un margin et leur attribuer un background avec son image, sa position (en haut au centre) et sa non-répétition. Ils auront pour dimensions celle des images. Si vous avez bien suivi, vous obtenez quelque chose similaire à ceci :
    Code:
                    /*Début CATEGORIES*/
    /* Corps Catégorie */
    .TopCategorie
    {
      background-image: url('http://img4.hostingpics.net/pics/210434screen27.png');
      background-position: top center;
      background-repeat: no-repeat;
      height: 99px;
      width: 865px;
      margin: auto;
    }

    .MidCategorie
    {
      background-image: url('http://img4.hostingpics.net/pics/718196screen28.png');
      background-position: center center;
      background-repeat: repeat-y;
      width: 865px;
      margin: auto;
    }

    .FootCategorie
    {
      background-image: url('http://img4.hostingpics.net/pics/850533screen29.png');
      background-position: bottom center;
      background-repeat: no-repeat;
      height: 60px;
      width: 865px;
      margin: auto;
    }
                   /*Fin CATEGORIES*/


    Alors, vous le voyez, nous allons devoir rajouter des marges extérieures en haut de chaque catégorie et je vais également vous apprendre la magie avec la propriété background. Vous avez pu le remarquer, le "MidCategorie" ne prend pas de hauteur pour qu'il puisse se répéter autant de fois qu'il est nécessaire.

    Tout d’abord, appliquons la marge :
    Code:
                    /*Début CATEGORIES*/
    /* Corps Catégorie */
    .TopCategorie
    {
      background-image: url('http://img4.hostingpics.net/pics/210434screen27.png');
      background-position: top center;
      background-repeat: no-repeat;
      height: 99px;
      width: 865px;
      margin: auto;
      margin-top: 15px;
    }
    Ici, l’ordre des propriétés est très important. Le margin-top viendra annuler uniquement pour le top l’attribution du « auto » apportée par le margin. C’est la même chose pour border et border-top et toutes les autres propriétés de ce type.

    Maintenant, passons au background. Plutôt que de prendre 3 voire 4 lignes dans le CSS, le background peut se comprimer de cette façon :
    Code:
                    /*Début CATEGORIES*/
       /* Corps Catégorie */
    .TopCategorie
    {
      background: url('http://img4.hostingpics.net/pics/210434screen27.png') top center no-repeat;
      height: 99px;
      width: 865px;
      margin: auto;
      margin-top: 15px; /* Annule le margin: auto pour la marge extérieure du haut */
    }

    .MidCategorie
    {
      background: url('http://img4.hostingpics.net/pics/718196screen28.png') center center repeat-y;
      width: 865px;
      margin: auto;
    }

    .FootCategorie
    {
      background: url('http://img4.hostingpics.net/pics/850533screen29.png') bottom center no-repeat;
      height: 60px;
      width: 865px;
      margin: auto;
    }
                   /*Fin CATEGORIES*/

    Le suffixe –image ou –position ou encore –repeat disparaît et on peut lui donner toutes les valeurs que l’on veut ! Le max qu’on pourrait faire pourrait être
    Code:
    background : #color url(‘image’) position position repeat attachment ;

    Énorme non ? Le problème, c’est que lorsque l’on doit mettre plusieurs images comme notre « body », la propriété ne fonctionne pas et les suffixes doivent réapparaître.

    On enregistre le CSS et on repasse dans le Template Index_box !


    Organisation du contenu des catégories


    • Par soucis d’esthétisme, nous allons supprimer les lignes :
    Code:
           <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
    Elles ne nous serviront pas te viendront freiner notre imagination débordante, ce serai dommage ! Maintenant, on va déplacer le titre des catégories et le faire passer dans le Header des Catégories : « TopCategorie ». On va l’entourer d’une div que l’on appellera « CategorieTitle ».

    Code:
        <!-- BEGIN tablehead -->
       <div class="TopCategorie"><div class=“CategorieTitle”>{catrow.tablehead.L_FORUM}</div></div>
       <div class="MidCategorie">
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- END tablehead -->

    Ensuite, on va agencer l’affichage de nos forums. Pour commencer, nous allons supprimer toutes traces du tableau qui constitue l’affichage des forums.Supprimez toutes les lignes qui s’y apparente (En prenant en compte que j’ai supprimé les parties que je ne trouve pas utile pour le tutoriel citées plus haut) comme

    Votre Template doit ressemble à ceci :
    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 -->
       <div class="TopCategorie"><div class="CategorieTitle">{catrow.tablehead.L_FORUM}</div></div>
       <div class="MidCategorie">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
       <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
             <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
       </div>
       <div class="FootCategorie"></div>
       <!-- END tablefoot -->
       <!-- END catrow -->

    • Pour la suite, nous allons créer des forums en deux colonnes. Nous allons donc créer une première div qui contiendra tous les forums puis une seconde qui contiendra le contenu d’un seul forum. Ca donne :
    Code:
        <!-- BEGIN forumrow -->
       <div class="Forums">
            <div class="TheForum">
       <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
             <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
       </div>
            </div>
       <!-- END forumrow -->

    Le problème lorsque l’on mélange le corps de catégorie et le forum sur deux colonnes, c’est que l’affichage du corps est annulé par le float de nos forums, ainsi pour éviter ce désagrément, nous allons rajouter juste après :
    Code:
        <!-- BEGIN tablefoot -->
    Ceci :
    Code:
        <!-- BEGIN tablefoot -->
            <div style="clear: both"></div>

    L'élément suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant. Ce comportement n'étant pas voulu, clear sera là pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. Donc notre corps de catégorie s’affichera parfaitement !

    Enregistrez-votre travail et passez dans le CSS.

    • Nous avons créé : CategorieTitle, Forums et TheForum. Nous allons donc les mettre en esthétique après le corps du forum :
    Code:
        /* Titre des catégories */
    .CategorieTitle
    {
     
    }

       /* Affichage des Forums */
    .Forums
    {
     
    }

    .The Forum
    {
     
    }
                   /*Fin CATEGORIES*/

    Nous allons uniquement rajouter une marge intérieure dans le titre du forum pour qu’il s’affiche sur le bas du header. (Mettons disons 20px)
    Code:
     .CategorieTitle
    {
      padding-top: 20px;
    }

    Ensuite, nous allons donner une largeur au bloc qui contiendra nos forums et le centrer dans le corps du forum.
    Code:
    .Forums
    {
      width: 900px;
      margin: auto;
    }

    Enfin, nous allons donner le style à nos catégories. Nous allons leur donner l’attribut float pour l’affichage en double colonne, une taille et un marge de 20px pour tous les cotés excepté en bas qui sera de 50px pour séparer chaque ligne et un background en image que je vous donne ici :

    (Merci de la ré-héberger)
    J'ai pris une couleur, un contour et j'ai passé le tout à 30% d'opacité puis enregistrer pour obtenir ce résultat)

    Au final, on se retrouve à ceci :
    Code:
     .TheForum
    {
      float: left;
      background-image: url(urimagedonnee');
      width: 389px;
      height: 220px;
      margin: 20px;
      margin-bottom: 50px;
    }

    Validez votre feuille et magie :

    On repasse maintenant dans Index_box. On va commencer par mettre en forme la description qui viendra en première dans l’affichage des forums. On va tout simplement l’entourer d’une div du nom de « ForumDescription ». Elle sera suivie d’une autre div nommée « ForumTitle » dans laquelle on va retrouver le … Titre du forum ! (Vous êtes bilingue non ?) / !\On ne gardera pas les span du titre / !\

    On obtient au final :
    Code:
        <!-- BEGIN forumrow -->
       <div class="Forums">
            <div class="TheForum">
             
       <div class="ForumDescription genmed">{catrow.forumrow.FORUM_DESC}</div>
             
            <div class="ForumTitle"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
             
       <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
             <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
       </div>
            </div>
       <!-- END forumrow -->

    • Maintenant, on va mettre en forme la partie Sous-Forums / Statistiques. Pour se faire, on va créer une troisième div du nom de « ForumStats » Qui contiendra le tout.
    Ce qui donne :
    Code:
        <!-- BEGIN forumrow -->
       <div class="Forums">
            <div class="TheForum">
             
       <div class="ForumDescription genmed">{catrow.forumrow.FORUM_DESC}</div>
            <div class="ForumTitle"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
             
            <div class="ForumStats gensmall">
       <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
       {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
       {catrow.forumrow.TOPICS}
       {catrow.forumrow.POSTS}
       {catrow.forumrow.LAST_POST}
       </div>
             
       </div>
            </div>
       <!-- END forumrow -->

    J’ai rajouté gensmall car tous les span le contenait, l’ajouter après ForumStats avec un espace l’inclus dans le style à prendre (Je l’ai fais aussi sur ForumDescription, vous avez remarqué ?)

    • Ensuite, on créer une boite pour les sous-forums, une autre pour les stats/dernier message et on donne une class à l’image de forum :
    Code:
        <!-- BEGIN forumrow -->
       <div class="Forums">
            <div class="TheForum">
             
       <div class="ForumDescription genmed">{catrow.forumrow.FORUM_DESC}</div>
            <div class="ForumTitle"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
             
            <div class="ForumStats gensmall">
            <div class="ForumSous" id="subforums">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>

       <img class="ForumIcone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

            <div class="ForumLast">
            {catrow.forumrow.TOPICS} Sujets et {catrow.forumrow.POSTS} Messages<br />
       {catrow.forumrow.LAST_POST}
       </div>
             
       </div>
       </div>
       </div>
       <!-- END forumrow -->
    Oups, j’ai rajouté un id dans la div des sous-forums, mais pourquoi ?

    Et bien nous allons les faire revenir à la ligne à l’aide d’un code JavaScript. Après la fin de la div des sous-forums ajoutez :
    Code:
                  <script type="text/javascript">
                  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                  </script>

    Ce qui donne :
    Code:
            <div class="ForumSous" id="subforums">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
                  <script type="text/javascript">
                  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                  </script>
    Le script utilise JQuery pour récupérer l’id subforums, lorsque ceci est fait, il remplace la virgule par un saut de ligne.

    Validez votre Template et passez à la feuille CSS !

    • Nous avons créé beaucoup de div ce coup-ci ! Pour résumer, on a : ForumDescription, ForumTitle, ForumStats, ForumSous, ForumIcone et ForumLast.

    Nous allons ainsi les modifier !
    Code:
     .TheForum
    {
      float: left;
      background-image: url('http://img824.imageshack.us/img824/556/fondfo.png');
      width: 389px;
      height: 220px;
      margin: 20px;
      margin-bottom: 50px;
    }

       /* Description */
    .ForumDescription
    {
     
    }

       /* Boite titre du Forum */
    .ForumTitle
    {
     
    }

       /* Boite qui contient Sous-forums et Dernier Message */
    .ForumStats
    {
     
    }

       /* Sous-Forums */
    .ForumSous
    {
     
    }

       /* Image New, No New et Lock */
    .ForumIcone
    {
     
    }

       /* Boite des Derniers Messages */
    .ForumLast
    {
     
    }
                   /*Fin CATEGORIES*/

    • Pour commencer, attaquons par la description.
    EXERCICE :
    • "ForumDescription" va prendre les propriétés suivantes :
    ♦ Une hauteur de 115px
    ♦ Un texte justifié (text-align: justify)
    ♦ Une taille de police de 11px

    Correction:
    Code:
     .ForumDescription
    {
      height: 115px;
      text-align: justify;
      font-size: 11px;
    }

    • Maintenant, on passe à la boite qui contient le titre du forum. On va lui donner un fond de couleur #01121a, des bordures de couleur #014165, une largeur (387px), une taille de police (12px).
    Code:
     .ForumTitle
    {
      background-color: #01121a;
      border-left: 1px solid #014165;
      border-right: 1px solid #014165;
      width: 387px;
      font-size: 12px;
    }

    • On va faire passer le tout en gras, lui modifier sa police (12px), le passer en lettre capitale, le centrer, lui donner une ombre (X= 0, Y=0, Z= 2 et couleur = #000) et lui imposer une marge extérieure de 5px en haut et en bas de la boite.
    Code:
     .ForumTitle
    {
      background-color: #01121a;
      border-left: 1px solid #014165;
      border-right: 1px solid #014165;
      width: 387px;
      font-size: 12px;
      font-weight: bold;
      font-family: 'Georgia', 'Arial', serif;
      text-transform: uppercase; /* Lettres capitales */
      text-align: center; /*Texte centre */
      text-shadow: 0px 0px 2px #000; /* Ombre sur le texte */
      margin-top: 5px;
      margin-bottom: 5px;
    }

    Ensuite, on va modifier directement le lien en lui-même pour faire comprendre que c’est un lien et pas seulement un texte. On va donc lui appliquer une transition. Il faut le récupere via .ForumTitle a et .ForumTitle a :hover.

    Ca donne :
    Code:
     .ForumTitle a
    {
      color: #04334a !important;
      transition: 1s all;
    }
    .ForumTitle a:hover
    {
      color: #56A0BF !important;
      transition: 1s all;
    }

    J’ai mis !important pour que la couleur soit celle appliquée et donc la plus importante dans l’affichage des couleurs. C’est souvent une manipulation récurrente à faire pour les liens sur ForumActif Wink !

    • On modifie ensuite la boite qui contient les sous-forums et le dernier message : On ne va que lui ajouter des dimensions : 419*78
    Code:
    .ForumStats
    {
      width: 419px;
      height: 78px;
    }

    • On créer une boite pour afficher la barre de défilement s’il y a trop de sous-forums et on les fait flotter sur la gauche dans leur conteneur :
    EXERCICE :
    • "ForumSous" va prendre les propriétés et valeurs suivantes :
    ♦ Un flottement sur la gauche
    ♦ Une barre de défilement automatique (overflow: auto)
    ♦ Ayant pour dimensions 184*78
    ♦ Un texte centré
    Correction:
    Code:
    .ForumSous
    {
      float: left;
      overflow: auto;
      width: 184px;
      height: 78px;
      text-align: center;
    }

    • Modifions maintenant l’affichage de l’image new/no new/lock. On va la placer de telle façon qu’elle empiète sur les derniers messages.
    Code:
     .ForumIcone
    {
      position: absolute;
      margin-left: -178px; /* Se décale sur la gauche de 178px */
      margin-top: -5px; /* Se décale en haut de 5px */
    }

    • Enfin, on termine par l’aspect du dernier message. On le fait flotter également, on lui ajoute un fond, des bordures, des dimensions, des marges de telle façon à ce qu’il soit assez éloigné , des ombres et un alignement central du texte.
    Code:
     .ForumLast
    {
      float: left;
      background-color: #021925;
      border: 1px solid #053c5b;
      width: 150px;
      height: 68px;
      text-align: center;
      padding: 2px;
      margin-left: 30px;
      box-shadow: 0px 0px 3px #000;
    }

    Oh finalement, on va peut-être lui arrondir ses coins légèrement, 5px suffit !
    Code:
     .ForumLast
    {
      float: left; /* Flottement  */
      background-color: #021925;
      border: 1px solid #053c5b;
      width: 150px;
      height: 68px;
      text-align: center;
      padding: 2px; /*Marge intérieure */
      margin-left: 30px; /* Marge Extérieure sur la gauche pour être dans le coin droit */
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }

    •Pour finir, nous allons ajouter l’image de notre catégorie. Direction Général> Forum> Catégories&Forums puis cliquez sur l’une de vos catégories. A la place d’un texte mettez-y votre image comme ceci :
    Code:
     <img src=" " alt="NOM DE LA CATEGORIE" />


    Organisation de sa description dans les forums


    J'avais pensé à vous laisser organiser la chose comme vous le vouliez - Ce tuto est très bon et se prête incroyablement bien à nos catégories - Mais je suis finalement revenu sur ma décision pour vous donner quelque chose de sobre et simple.

    • Direction Général> Forum> Catégories et Forums> Le forum
    Nous allons réaliser quelque chose de très simple : Une image de dimension 35*100 (Largeur*Longueur) de Ce type qui flotte sur la gauche d'une boite avec une bordure sur la gauche et une barre de défilement (overflow: auto). Dans la description de votre forum, il suffit d'ajouter le code d'une image puis d'une div. Pour les moins débrouillards, voici le tout :
    Code:
    <img src="urldevotreimage" class="ForumDImg" alt="NOM DU FORUM" /><div class="ForumDText">Description du forum - Description du forum - Description du forum - Description du forum - Description du forum</div>
    <div style="clear: both"></div>

    Pourquoi avoir ajouté Clear: both ? Et bien, c'est dis plus haut dans le tutoriel, il permet d'annuler le flottement et donc le bon affichage des statistiques qui viennent après !

    • Nous avons donc créée deux class : "ForumDImg" et "ForumDText". Nous allons les mettre en style dans le CSS. Juste après :
    Code:
    .ForumDescription
    {
      text-align: justify;
      font-size: 11px;
      height: 115px;
    }

    On va ajouter :
    Code:
    .ForumDImg
    {

    }

    .ForumDText
    {

    }

    • Notre première intention était de faire flotter l'image, nous allons donc lui donner cette propriété en oubliant pas, bien sûr, de lui ajouter des marges extérieures de 5px - Margin: 5px; - pour éviter l'effet de "collage".
    Code:
    .ForumDImg
    {
      float: left;
      margin: 5px;
    }

    • Modifions à présent le texte de la description. Nous voulons lui ajouter une bordure sur la gauche de 2px, solide de la couleur #053c5b. Ensuite, nous lui donnons des dimensions (325*100), une marge extérieure de 5px et un marge intérieure de 2px. On oublie pas ensuite, la barre de défilement - overflow: auto; -
    Code:
    .ForumDText
    {
      overflow: auto; /*Barre de défilement */
      float: left;
      border-left: 2px solid #053c5b;
      width: 325px;
      height: 100px;
      margin: 5px;
      padding: 2px;
    }

    Et voilà, nous avons terminé !
    Récapitulatif du CSS :
    Code:
                   /*Début STRUCTURE*/
       /* Fond du forum*/
    body
    {
      background-color: #021925;
      background-image: url('http://img507.imageshack.us/img507/6665/bottomsw.jpg'), url('http://img203.imageshack.us/img203/964/midjf.jpg');
      background-position: bottom left, top left;
      background-repeat: no-repeat, repeat-y;
      background-attachment: scroll, scroll;
      margin: 0px;
    }

       /* Corps du forum*/
    .bodyline
    {
      background-color: #052231;
      border-left: 1px solid #095279;
      border-right: 1px solid #095279;
      width: 948px;
      margin: auto;
      padding: 0px; /*Pas de marge intérieur dans le corps*/
      box-shadow: 0px 0px 3px #000;
    }

       /* Soulignement liens */
    a:link, a:link hover, a:link active, a:link target
    {
      text-decoration: none !important;
    }
                   /*Fin STRUCTURE*/

                   /*Début HEADER*/
        /* Bannière */
    #i_logo
    {
      border-bottom: 1px solid #095279;
      width: 750px;
      height: 279px;
    }

       /* Boite Navigation */
    .Navigation
    {
      background-color: #01121a;
      border-left: 1px solid #095279;
      border-bottom: 1px solid #095279;
      width: 197px;
      height: 280px;
    }

       /* Titre Navigation */
    .NavigationTitle
    {
      background-color: #01121a;
      border-bottom: 1px solid #01121a;
      width: 100%; /* Il prend toute la largeur dans la div */
      height: 15px;
      text-align: center; /* On center le texte dans la div */
      color: #04334a;
      font-size: 13px; /* Taille de la police */
      font-weight: bold; /* Titre en gras */
      font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
      text-shadow: 0px 0px 3px #000; /*Ombre sur le texte */
    }

       /* Liens Navigation */
    .Navigation a
    {
      display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
      background-color: #031c28;
      border-bottom: 1px solid #01121a;
      width: 100%;
      height: 17px;
      font-size: 15px;
      font-family: 'Arial', serif;
      text-align: center;
      text-shadow: 0px 0px 2px #000;
      padding-top: 3px;
      padding-bottom: 3px;
      transition: 1s all;
    }
    .Navigation a:hover
    {
      background-color: #01121a;
      border-bottom: 1px solid #031c28;
      color: #04334a;
      transition: 1s all;
    }
                   /*Fin HEADER*/
             
                   /*Début PAGE ACCUEIL*/

                   /*Fin PAGE ACCUEIL*/
       
                   /*Début CATEGORIES*/
       /* Corps Catégorie */
    .TopCategorie
    {
      background: url('http://img4.hostingpics.net/pics/210434screen27.png') top center no-repeat;
      height: 99px;
      width: 865px;
      margin: auto;
      margin-top: 15px; /* Annule le margin: auto pour la marge extérieure du haut */
    }

    .MidCategorie
    {
      background: url('http://img4.hostingpics.net/pics/718196screen28.png') center center repeat-y;
      width: 865px;
      margin: auto;
    }

    .FootCategorie
    {
      background: url('http://img4.hostingpics.net/pics/850533screen29.png') bottom center no-repeat;
      height: 60px;
      width: 865px;
      margin: auto;
    }

       /* Titre des catégories */
    .CategorieTitle
    {
      padding-top: 20px;
    }

       /* Affichage des Forums */
    .Forums
    {
      width: 900px;
      margin: auto;
    }

    .TheForum
    {
      float: left;
      background-image: url('http://img824.imageshack.us/img824/556/fondfo.png');
      width: 389px;
      height: 220px;
      margin: 20px;
      margin-bottom: 50px;
    }

       /* Description */
    .ForumDescription
    {
      text-align: justify;
      font-size: 11px;
      height: 115px;
    }

    .ForumDImg
    {
      float: left;
      margin: 5px;
    }

    .ForumDText
    {
      overflow: auto; /*Barre de défilement */
      float: left;
      border-left: 2px solid #053c5b;
      width: 325px;
      height: 100px;
      margin: 5px;
      padding: 2px;
    }

       /* Boite titre du Forum */
    .ForumTitle
    {
      background-color: #01121a;
      border-left: 1px solid #014165;
      border-right: 1px solid #014165;
      width: 387px;
      font-size: 12px;
      font-weight: bold;
      font-family: 'Georgia', 'Arial', serif;
      text-transform: uppercase; /* Lettres capitales */
      text-align: center; /*Texte centré */
      text-shadow: 0px 0px 2px #000; /* Ombre sur le texte */
      margin-top: 5px;
      margin-bottom: 5px;
    }

       /* Titre du Forum */
    .ForumTitle a
    {
      color: #04334a !important;
      transition: 1s all;
    }
    .ForumTitle a:hover
    {
      color: #56A0BF !important;
      transition: 1s all;
    }

       /* Boite qui contient Sous-forums et Dernier Message */
    .ForumStats
    {
      width: 419px;
      height: 78px;
    }

       /* Sous-Forums */
    .ForumSous
    {
      float: left;
      overflow: auto;
      width: 184px;
      height: 78px;
      text-align: center;
    }

       /* Image New, No New et Lock */
    .ForumIcone
    {
      position: absolute;
      margin-left: -178px;
      margin-top: -5px;
    }

       /* Boite des Derniers Messages */
     .ForumLast
    {
      float: left; /* Flottement  */
      background-color: #021925;
      border: 1px solid #053c5b;
      width: 150px;
      height: 68px;
      text-align: center;
      padding: 2px; /*Marge intérieure */
      margin-left: 30px; /* Marge Extérieure sur la gauche pour être dans le coin droit */
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }
                   /*Fin CATEGORIES*/

                   /*Début SUJETS*/

                   /*Fin SUJETS*/

                   /*Début MESSAGES*/

                   /*Fin MESSAGES*/

                   /*Début QEEL*/

                   /*Fin QEEL*/

                   /*Début FOOTER*/

                   /*Fin FOOTER*/

                   /*Début CHATBOX*/

                   /*Fin CHATBOX*/

    Récapitulatif du Template Index_box :
    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 -->
       <div class="TopCategorie"><div class="CategorieTitle">{catrow.tablehead.L_FORUM}</div></div>
       <div class="MidCategorie">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
       <div class="Forums">
            <div class="TheForum">
             
       <div class="ForumDescription genmed">{catrow.forumrow.FORUM_DESC}</div>
            <div class="ForumTitle"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
             
            <div class="ForumStats gensmall">
            <div class="ForumSous" id="subforums">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>

                  <script type="text/javascript">
                  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                  </script>
             
       <img class="ForumIcone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

            <div class="ForumLast">
            {catrow.forumrow.TOPICS} Sujets et {catrow.forumrow.POSTS} Messages<br />
       {catrow.forumrow.LAST_POST}
       </div>
             
       </div>
            </div>
            </div>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
            <div style="clear: both"></div>
       </div>
       <div class="FootCategorie"></div>
       <!-- END tablefoot -->
       <!-- END catrow -->
    C’est officiel, nous avons terminé nos catégories ! YOUPI ! Il est temps d’aller triturer le QEEL =D !

    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mar 23 Avr 2013 - 12:37

    Étape 6 - Élaboration du "Qui est en ligne?"



    Introduction


    Le Qui Est En Ligne, ou QEEL, est la partie qui vient clore avec votre Footer, votre forum. Malheureusement, elle fait partie des parties les plus négligées avec l’affichage des sujets et des messages … C’est dommage parce que ces choses négligées laissent un arrière-goût de travail bâclé et donc pas terminé dans l'esprit du visiteur. Au final, il sera peut-être beaucoup moins motivé pour rejoindre le forum. Vous l’aurez donc compris, le QEEL et son cousin le Footer sont à l’honneur.

    Création du titre QEEL


    Tout d’abord, nous allons créer notre titre QEEL. Ce sera une image de ce type :

    • Ouvrez Photoshop et créez un nouveau document de dimensions 948*127. (Largeur * Longueur)
    • A l’aide du pot de peinture, remplissez le document de la couleur #17344f et supprimez la moitié du document (En hauteur).

    • Créez une typographie « QUI EST EN LIGNE ? » – J’ai pris Blue Highway – et placez la au centre de la barre : Taille de police : 52px, couleur : #224c74.
    Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.

    • Créez une nouvelle typographie « sur le forum » – J’ai pris Exmouth – et placez la en-dessous du mot « LIGNE » : Taille de police : 36px, couleur : #4574a2.
    Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.

    • Fusionnez les calques (CTRL+MAJ+E) et enregistrez le document en .PNG

    Analyse du template


    Tout d’abord, Où se trouve-t-il ce petit QEEL ?
    Et bien il est dans le Template nommé Index_Body, vous savez celui qui modifie l’apparence de la Page Accueil, de l’emplacement de votre Chatbox … Des éléments essentiels Wink !

    Commençons par une compréhension large du Template :
    Code:
     <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- BEGIN message_admin_titre -->
       <tr>
          <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
       </tr>
       <!-- END message_admin_titre -->
       <!-- BEGIN message_admin_txt -->
       <tr>
          <td class="row1" rowspan="3" align="center" valign="middle">
          <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
          </td>
       </tr>
       <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->
    Le Template commence par un tableau tout mignon qui est votre PA.

    Il est délimité en deux parties :
    Code:
       <!-- BEGIN message_admin_titre -->
       <tr>
          <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
       </tr>
       <!-- END message_admin_titre -->
    Partie qui va gérer l’affichage du titre de votre Page Accueil

    Et :
    Code:
        <!-- BEGIN message_admin_txt -->
       <tr>
          <td class="row1" rowspan="3" align="center" valign="middle">
          <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
          </td>
       </tr>
       <!-- END message_admin_txt -->
    Partie qui va gérer l’affichage du contenu de la Page Accueil.

    C’est pourquoi si vous voulez modifier l’affichage du cadre des catégories, il suffit de modifier la class="" du premier et de la modifier dans le CSS, Facile non ?

    Code:
     <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <!-- BEGIN switch_fb_connect_no -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td class="row1" align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td><span class="genmed">{L_USERNAME}:</span> </td>
                      <td><input class="post" type="text" size="10" name="username"/> </td>
                      <td>
                         <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                         <span class="gensmall">{L_AUTO_LOGIN}</span> 
                      </td>
                   </tr>

                   <tr>
                      <td><span class="genmed">{L_PASSWORD}:</span> </td>
                      <td><input class="post" type="password" size="10" name="password"/> </td>
                      <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect_no -->

       <!-- BEGIN switch_fb_connect -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td valign="top" width="100%" class="row1" align="center">
                <table width="100%">
                   <tr>
                      <td width="55%" valign="middle" align="right">
                         <table class="right">
                            <tr>
                               <td><span class="genmed">{L_USERNAME}:</span> </td>
                               <td><input class="post" type="text" size="10" name="username"/> </td>
                               <td>
                                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                  <span class="gensmall">{L_AUTO_LOGIN}</span> 
                               </td>
                            </tr>

                            <tr>
                               <td><span class="genmed">{L_PASSWORD}:</span> </td>
                               <td><input class="post" type="password" size="10" name="password"/> </td>
                               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                            </tr>
                         </table>
                      </td>
                      <td width="10%" align="center" valign="middle">
                         <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                      </td>
                      <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_header -->
    Voilà un gros pavé de lignes pour gérer la connexion (Comme quoi, on peut croire que c’est du chinois mais le commentaire HTML l’annonce clairement Razz (User_Login) Gros pavé suivi de deux lignes intéressantes :
    Code:
     {CHATBOX_TOP}
    Ceci gère l’affichage de la Chatbox lorsqu’elle est affichée en haut, c'est-à-dire qu’on peut prendre cette ligne et la mettre en bas, elle s’affichera en bas, mais c’est plutôt inutile, il y a son homonyme plus loin.
    Code:
    {CHATBOX_BOTTOM}

    Code:
     {BOARD_INDEX}
    Ceci annonce l’affichage des catégories ! Ceci implique deux choses : La mobilité de chaque élément dans le Template (La PA peut devenir le QEEL et inversement) mais aussi le mélange de plusieurs éléments, un exemple où le QEEL est directement mélangé à la Page Accueil.

    Code:
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td width="50%" valign="top">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
             <!-- END switch_user_logged_in -->
             <!-- BEGIN switch_delete_cookies -->
             <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
             <!-- END switch_delete_cookies -->
          </td>
          <td width="50%" align="right">
             <span class="gensmall">
                <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
                <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
                <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
                <!-- BEGIN switch_on_index -->
                   <!-- BEGIN switch_delete_cookies -->
                   <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
                   <!-- END switch_delete_cookies -->
                <!-- END switch_on_index -->
             </span>
          </td>
       </tr>
    </table>
    Comme dans les categories, ce sont les petits liens qui suivent vos catégories « Supprimer les cookies du forum » etc…

    Code:
     <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <!-- BEGIN switch_fb_connect_no -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td class="row1" align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td><span class="genmed">{L_USERNAME}:</span> </td>
                      <td><input class="post" type="text" size="10" name="username"/> </td>
                      <td>
                         <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                         <span class="gensmall">{L_AUTO_LOGIN}</span> 
                      </td>
                   </tr>

                   <tr>
                      <td><span class="genmed">{L_PASSWORD}:</span> </td>
                      <td><input class="post" type="password" size="10" name="password"/> </td>
                      <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect_no -->

       <!-- BEGIN switch_fb_connect -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td valign="top" width="100%" class="row1" align="center">
                <table width="100%">
                   <tr>
                      <td width="55%" valign="middle">
                         <table class="right">
                            <tr>
                               <td><span class="genmed">{L_USERNAME}:</span> </td>
                               <td><input class="post" type="text" size="10" name="username"/> </td>
                               <td>
                                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                  <span class="gensmall">{L_AUTO_LOGIN}</span> 
                               </td>
                            </tr>

                            <tr>
                               <td><span class="genmed">{L_PASSWORD}:</span> </td>
                               <td><input class="post" type="password" size="10" name="password"/> </td>
                               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                            </tr>
                         </table>
                      </td>
                      <td width="10%" align="center" valign="middle">
                         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                      </td>
                      <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_footer -->
    On retrouve notre pave. Hé oui, après la connexion en haut, elle vient en bas si on l’a coché dans les options !

    Code:
     <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
       </tr>
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
       <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
             </span>
          </td>
       </tr>
       <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->
    La partie qui va nous intéresser puisqu’elle gère l’affichage du QEEL ! On la laisse de coté pour l’approfondissement pour plus tard !

    Code:
     <!-- BEGIN switch_legend -->
    <table border="0" cellspacing="3" cellpadding="0" align="center">
       <tr>
          <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NEW_POSTS}</span></td>
          <td></td>
          <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
          <td>  </td>
          <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
          <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
       </tr>
    </table>
    <!-- END switch_legend -->
    Enfin, c’est ce qui affiche vos trois icones de catégories tout en bas de votre forum. Je vous conseille de les supprimer –Pour ma part, c’est déjà fait - C’est une petite tâche d’esthétisme assez inutile au vue des images que nous avons puisqu’elle indique l’état du forum.

    Modification du QEEL


    • Procédons enfin à la modification du QEEL. Nous allons l’organiser en trois colonnes séparées, ce seront trois blocs juxtaposés. Ciblons la partie que nous allons traiter :
    Code:
     <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
       </tr>
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
       <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
             </span>
          </td>
       </tr>
       <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

    Pour commencer, nous allons supprimer la partie qui concerne la Chatbox.
    Supprimez donc cette partie :
    Code:
        <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
             </span>
          </td>
       </tr>
       <!-- END switch_chatbox_activate -->

    Maintenant, nous allons reprendre ces lignes :
    Code:
        <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
       </tr>
    Pour les reporter juste après le commentaire HTML qui ouvre le QEEL. Nous allons créer le titre du qeel via une div.
    Il sera donc nécessaire de supprimer les lignes précédemment citées.
    Code:
        <div class="QeelIMG"></div >

    Etat du Template :
    Code:
     <!-- BEGIN disable_viewonline -->
       <div class="QeelIMG"></div>
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
    </table>
    <!-- END disable_viewonline -->

    • Maintenant, nous allons créer une div qui contiendra le tableau du QEEL. Ainsi, juste avant le début du table créez une div du nom de « Qeel ». Fermez-la juste après que le tableau soit clos. Ensuite, supprimez tous les attributs - Ils ont la forme de : Nomattribut="" - et ne gardez que la class="forumline". Remplacez forumline par « QeelTable».
    Code:
     <!-- BEGIN disable_viewonline -->
       <div class="QeelIMG"></div>

       <div class="Qeel">
     <table class="QeelTable">
       <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
       </tr>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
    </table>
    </div>
    <!-- END disable_viewonline -->

    • Validez le Template et passez dans le Feuille de Style. Juste avant nous avons crée 3 div : « QeelIMG », « Qeel » et « QeelTable ». Nous allons les ajouter dans la partie qui est prévue pour le QEEL :
    Code:
                    /*Début QEEL*/
       /*Titre QEEL*/
    .QeelIMG
    {
     
    }

       /*QEEL*/
    .Qeel
    {
     
    }

       /*QEEL tableau*/
    .QeelTable
    {
     
    }
                   /*Fin QEEL*/

    • Nous allons à donner « QeelIMG » pour fond le titre que nous avons crée au début et le positionner en bas au centre.Il prendra pour dimensions celle du fond et sera centré.
    Code:
     .QeelIMG
    {
      background: url('http://img194.imageshack.us/img194/4238/wior.png') bottom center;
      width: 948px;
      height: 73px;
      margin: auto;
    }

    • Maintenant, pour « Qeel », on lui donne une position relative, c'est-à-dire qu’il deviendra plus important. On évitera l’affichage de la bordure du Footer qui ne va servir que dans toutes les autres pages. Le Qeel aura pour couleur de fond : #17344f, une bordure en bas de 1px de couleur #17344f. Ses dimensions sont 948*330 et aura une marge extérieure en bas négative [-28px] ; C'est-à-dire qu’au lieu de se décaler vers le haut, il se rapprochera du bas.
    EXERCICE :
    • "Qeel" va prendre les propriétés et valeurs suivantes :
    ♦ Une position relative (Position primordiale sur les autres éléments)
    ♦ Une fond de couleur #17344f
    ♦ Une bordure sur le bas de 1px, solide de couleur #17344f
    ♦ Ayant pour dimensions 948*330
    ♦ Une marge extérieure en bas de -28px

    • "QeelTable" va prendre les propriétés et valeurs suivantes :
    ♦ Une largeur de 848px
    ♦ Une centrement automatique (margin : auto)

    Correction:
    Code:
    .Qeel
    {
      position: relative; /*Position primordiale sur les autres éléments */
      background-color: #17344f;
      border-bottom: 1px solid #17344f;
      width: 948px;
      height: 330px;
      margin-bottom: -28px;
    }

     .QeelTable
    {
      width: 848px;
      margin: auto;
    }
    Validez le CSS et retournez dans le Template !

    • Nous allons commencer à nouveau par supprimer la partie qui gère l’affichage de l’image QEEL que l’on ajoute dans la gestion d’image.
    Code:
           <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

    • Supprimons maintenant ce qui gère l’affichage des groupes :
    Code:
     <span class="gensmall">{LEGEND} :&nbsp;{GROUP_LEGEND}</span>

    • Maintenant, on va retirer tous les attributs des cellules (td) et leur ajouter valign="top" qui placera leur contenu dans le haut de la cellule. Ca donne :
    Code:
     <!-- BEGIN disable_viewonline -->
       <div class="QeelIMG"></div>

       <div class="Qeel">
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <span class="gensmall">
                 {TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}
       </span>
          </td>
       </tr>
     
       <tr>
          <td valign="top">
       <span class="gensmall">
               {TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}
       </span>
                 </td>
       </tr>
          {L_CONNECTED_MEMBERS}
          {L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}
              <tr>
          <td valign="top">
                     
               </td>
       </tr>
    </table>
    </div>
    <!-- END disable_viewonline -->

    • On ajoute maintenant dans chaque cellule (td) une div nommée « Row » ou « colonne » en français qui commencera juste après l’ouverture de la cellule et se terminera juste avant sa fermeture. On supprime également toutes les lignes (tr) excepté la première et la dernière :
    Code:
     <!-- BEGIN disable_viewonline -->
       <div class="QeelIMG"></div>

       <div class="Qeel">
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <div class="QeelRow">
                 {TOTAL_POSTS}<br />
       {TOTAL_USERS}<br />
       {NEWEST_USER}
       </div>
          </td>

          <td valign="top">
       <div class="QeelRow">
               {TOTAL_USERS_ONLINE}<br />
       {RECORD_USERS}<br />
       <br />
       {LOGGED_IN_USER_LIST}
       </div>
                 </td>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}

          <td valign="top">
       <div class="QeelRow">
       
       </div>
               </td>
       </tr>
    </table>
    </div>
    <!-- END disable_viewonline -->

    • A présent, on va ajouter une div qui va contenir les statistiques du forum [Messages et Membres]. Elle viendra dans la première cellule où ils sont déjà présents.
    Code:
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <div class="QeelRow">
       <div class="QeelStats">
       {TOTAL_USERS}<br />{TOTAL_POSTS}.
       {NEWEST_USER}
       </div>
          </td>

    • On va venir ajouter après deux sauts de lignes sous la phrase qui affiche le nouveau venu (NEWEST_USER) les utilisateurs qui sont en lignes (Membres, Invisibles et Invités) [TOTAL_USERS_ONLINE] puis en-dessous, la liste des membres connectés.
    Code:
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <div class="QeelRow">
       <div class="QeelStats">
       {TOTAL_USERS}<br />{TOTAL_POSTS}.
       </div>
       {NEWEST_USER}<br /> <br />
       {TOTAL_USERS_ONLINE}<br /> <br />
             
            {LOGGED_IN_USER_LIST}
       </div>
          </td>

    Bien entendu, supprimez les éléments ajoutés dans cette cellule de la cellule où ils étaient présents avant.

    • Maintenant, on va déplacer
    Code:
     {L_CONNECTED_MEMBERS}
    L’entourer d’un tableau(table) pour qu’il soit affiché correctement puisqu’il génère automatiquement un ligne et une cellule de tableau.
    Code:
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <div class="QeelRow">
       <div class="QeelStats">
       {TOTAL_USERS}<br />{TOTAL_POSTS}.
       </div>
       {NEWEST_USER}<br /> <br />
       {TOTAL_USERS_ONLINE}<br /> <br />
             
            {LOGGED_IN_USER_LIST}
       </div>
          </td>

          <td valign="top">
       <div class="QeelRow">
    <table>{L_CONNECTED_MEMBERS}</table>
       </div>
                 </td>

    Enfin, on va déplacer :
    Code:
        {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
    Qui gère l’affichage des anniversaires dans la journée puis dans la semaine. Nous allons également les entourer d’un tableau (table) car ils ont la même propriété que la liste des membres connectés depuis 24heures [L_CONNECTED_MEMBERS].
    Code:
     <!-- BEGIN disable_viewonline -->
       <div class="QeelIMG"></div>

       <div class="Qeel">
     <table class="QeelTable">
       <tr>
          <td valign="top">
       <div class="QeelRow">
       <div class="QeelStats">
       {TOTAL_USERS}<br />{TOTAL_POSTS}.
       </div>
       {NEWEST_USER}<br /> <br />
       {TOTAL_USERS_ONLINE}<br /> <br />
             
            {LOGGED_IN_USER_LIST}
       </div>
          </td>

          <td valign="top">
       <div class="QeelRow">
    <table>{L_CONNECTED_MEMBERS}</table>
       </div>
                 </td>

          <td valign="top">
       <div class="QeelRow">
    <table>{L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK}</table>
       </div>
               </td>
       </tr>
    </table>
    </div>
    <!-- END disable_viewonline -->

    • Maintenant, en-dessous de la liste des connectés dans les dernières 24h, nous allons ajouter les groupes du forum. Ajoutez une liste de lien après avoir sauté une ligne avec :
    Code:
    <br />

    Code:
           <td valign="top">
       <div class="QeelRow">
    <table>{L_CONNECTED_MEMBERS}</table>
       <br />
       <a href="liendugroupe" class="gr1">Groupe 1</a>
       <a href="liendugroupe" class="gr2">Groupe 2</a><br />
            <a href="liendugroupe" class="gr3">Groupe 3</a>
       <a href="liendugroupe" class="gr4">Groupe 4</a><br />
       <a href="liendugroupe" class="gr5">Groupe 5</a>
            <a href="liendugroupe" class="gr6">Groupe 6</a>
       </div>
          </td>

    Il faudra sauter une ligne tous les deux groupes. On va les centrer grâce à center et on va ajouter pour chaque lien une class (gr1, gr2, gr3, gr4 etc.).
    Code:
           <td valign="top">
       <div class="QeelRow gensmall">
    <table>{L_CONNECTED_MEMBERS}</table>
       <br />
       <center><a href="liendugroupe" class="gr1">Groupe 1</a>
       <a href="liendugroupe" class="gr2">Groupe 2</a><br />
            <a href="liendugroupe" class="gr3">Groupe 3</a>
       <a href="liendugroupe" class="gr4">Groupe 4</a><br />
       <a href="liendugroupe" class="gr5">Groupe 5</a>
            <a href="liendugroupe" class="gr6">Groupe 6</a></center>
       </div>
                 </td>


    • Direction votre feuille de style CSS à présent. Nous avons créé les class : « QeelRow », « QeelStats » et « gr1, gr2, gr3, gr4, gr5, gr6 ». Nous allons donc les mettre en forme :
    Code:
        /*Colonne*/
    .QeelRow
    {
     
    }

       /*Stats Messages/Membres*/
    .QeelStats
    {
     
    }

       /*Groupes*/
    .gr1, .gr2, .gr3, .gr4, .gr5, .gr6
    {
     
    }
    /*NOMDUGROUPE*/
    .gr1
    {
     
    }
    /*NOMDUGROUPE*/
    .gr2
    {
     
    }
    /*NOMDUGROUPE*/
    .gr3
    {
     
    }
    /*NOMDUGROUPE*/
    .gr4
    {
     
    }
    /*NOMDUGROUPE*/
    .gr5
    {
     
    }
    /*NOMDUGROUPE*/
    .gr6
    {
     
    }

    Pourquoi avoir fais ceci ?
    Code:
     .gr1, .gr2, .gr3, .gr4, .gr5, .gr6
    {

    }
    Parce qu’ils auront tous des propriétés en communs et la virgule viendra dire « gr1 et gr2 et gr3 et etc. » La seule différence sera leur couleur, d’où la reprise de leur classe en solo. Nous allons commencer par mettre en forme les colonnes.

    •Jusqu’à maintenant, j’ai fais que vous dire ce que vous deviez faire en vous donnant directement la réponse. Désormais, je vous mettrai la réponse en spoiler pour pouvoir vous faire progresser !

    EXERCICE :
    • « QeelRow » va prendre les propriétés et valeurs suivantes
    ♦ Une barre de défilement
    ♦ Une position « absolute » : Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix en la faisant bouger grâce à des margin.
    ♦ Un « z-index » de valeur 1 : « Eh bien, le z-index associé à des positions comme "absolute", "fixed" et "relative", permet de définir quel bloc aura la priorité d'affichage sur l'autre lors d'un chevauchement. » Source : Scavenger
    ♦ Un fond de couleur #010f16
    ♦ Une bordure de 1px solid #095279
    ♦ Des dimensions (280*300)
    ♦ Une police d’écriture de 9px
    ♦ Un marge extérieure de 15px sur le haut<

    Correction:
    Code:
     .QeelRow
    {
      overflow: auto;
      position: absolute;
      z-index: 1;
      background-color: #010f16;
      border: 1px solid #095279;
      width: 280px;
      height: 300px;
      font-size: 9px;
      margin-top: 15px;
    }
    Je pense que les commentaires sont inutiles ici. Pensez à consulter les tutos sur le codage et le graphisme, ils apprennent énormément de choses sans qu'on s'en rende compte, le côté pédagogique de la chose est vraiment bien fait !

    • Si vous n’avez eu aucune faute, félicitations, vous progressez de plus en plus et serez bientôt incollable en CSS ! A présent, nous allons ajouter à notre colonne une propriété de transparence, appelée « opacity ». Elle se décline en plusieurs suffixes suggérés par sa comptabilité. Votre « QeelRow » devient:
    Code:
     .QeelRow
    {
      overflow: auto;
      position: absolute;
      z-index: 1;
      background-color: #010f16;
      border: 1px solid #095279;
      width: 280px;
      height: 300px;
      font-size: 9px;
      margin-left: 0px;
      margin-top: 15px;
      opacity: 0.5;
    }

    • Passons à la personnalisation des statistiques. Nous allons ajouter à « QeelStats » une police de taille 11px, un texte en gras et un alignement centré.
    Code:
     .QeelStats
    {
      font-size: 11px;
      font-weight: bold;
      text-align: center;
    }

    • Enfin les groupes. La « super-balise » contenant tous les groupes prendra une police de taille 15px, un texte en gras, un alignement centré, des lettres capitales et une marge extérieure à gauche et à droite de 10px.
    Code:
     .gr1, .gr2, .gr3, .gr4, .gr5, .gr6
    {
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      margin-left: 10px;
      margin-right: 10px;
    }

    Maintenant, donnez la couleur à chacun de vos groupes, pour ma part ça donne ça :
    Code:
     /*Groupe 1*/
    .gr1
    {
      color: #494949 !important;
    }
    /*Groupe 2*/
    .gr2
    {
      color: #787878 !important;
    }
    /*Groupe 3*/
    .gr3
    {
      color: #b2b2b2 !important;
    }
    /*Groupe 4*/
    .gr4
    {
      color: #e12727 !important;
    }
    /*Groupe 5*/
    .gr5
    {
      color: #e3bb41 !important;
    }
    /*Groupe 6*/
    .gr6
    {
      color: #426ae3 !important;
    }

    Je fais un gros bisou à ceux qui ont pensé à mettre le « !important ». En effet, ce sont des class données à des liens donc pour que la couleur devienne prioritaire, il faut rajouter le !important :)

    Maintenant, il temps de faire un petit check-up. On a un beau QEEL mais pas encore optimisé ! Et oui, imaginons qu’il y ait eu 230membres connectés durant les 24h, on ne verra plus les groupes … Même si le overflow : auto donnera une barre de défilement, autant éviter de le faire et avoir toujours un œil sur les groupes. Nous ajouterons donc une boite autour de ce qui gère l’affichage des membres connectés durant les 24h dernières heures. Ensuite, il sera temps d’ajouter un peu d’interaction Forum/Utilisateur, on jouera donc avec les transitions !

    • Dans votre Template, vous avez :
    Code:
     <table>{L_CONNECTED_MEMBERS}</table>
    On va l’entourer d’une div que l’on va appeler « QeelConnected » et à laquelle on donnera des dimensions et une barre de défilement de telle façon que la barre de défilement de la colonne ne s’affiche pas.
    Code:
            <div class="QeelConnected">
    <table>{L_CONNECTED_MEMBERS}</table>
       </div>

    Le problème est réglé et vous pouvez valider votre template, passons maintenant à l’interaction. Je proposerai d’ajouter un effet de zoom sur la colonne lorsqu’elle est survolée par la souris, sympa non ? Ceci implique deux choses :
    - Modifier les valeurs des z-index pour que les priorités d’affichage changent et que la colonne survolée soit prioritaires.
    - Modifier les valeurs des dimensions de la boite des connectés dans les 24h dernières heures lorsque la colonne et survolée.



    • Ajoutons d’abord les transitions à « QeelRow »
    Code:
     .QeelRow
    {
      overflow: auto;
      position: absolute;
      z-index: 1;
      background-color: #010f16;
      border: 1px solid #095279;
      width: 280px;
      height: 300px;
      font-size: 9px;
      margin-left: 0px;
      margin-top: 15px;
      opacity: 0.5;
      transition: 1s;
    }

    Maintenant, grâce au suffixe :hover, ajoutons l’effet de zoom en augmentant ses dimensions :
    Code:
     /*Colonne survolée*/
    .QeelRow:hover
    {
      width: 350px;
      height: 400px;
      transition: 1s;
    }

    Cependant, nous devons à la fois modifier sa priorité d’affichage et sa position. Nous allons passer le z-index à 99 et enlever une marge extérieure à gauche et en haut de 50px : Margin-left : -50px ; margin-top : -50px
    Code:
     .QeelRow:hover
    {
      z-index: 99; /* Priorité d'affichage */
      width: 350px;
      height: 400px;
      margin-top: -50px;
      margin-left: -50px;
      transition: 1s;
    }

    N’oublions pas de donner les valeurs que nous voulions donner à « QeelConnected » que nous avons créé et de lui en donner de nouvelles lors du survolement :
    Code:
        /*Connexions dernières 24h*/
    .QeelConnected
    {
      overflow: auto;
      width: 250px;
      height: 190px;
      transition: 1s;
    }
    .QeelRow:hover .QeelConnected
    {
      width: 340px;
      height: 290px;
      transition: 1s;
    }

    Ooops, je vais un peu vite non ? héhé désolé !
    .QeelRow:hover .QeelConnected peut se traduire par « Lorsque la colonne est survolée, l’élément qu’elle contient et qui s’appelle QeelConnected se transforme en … ». Ceci ne marche que dans le cas ou l’élément que vous voulez changé est contenu dans un autre ! Dans d’autre cas, ça ne marche pas : / On peut parler de la réciprocité mathématique qui marche très bien dans ce cas avec le « Si et Seulement Si »

    Ils est super notre QEEL non ?
    Et bien voilà, vous avez terminé la confection de votre Qui Est En Ligne et votre forum avance à grand pas !

    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mar 23 Avr 2013 - 12:52

    Étape 7 - Élaboration du Footer



    Introduction


    C'est plutôt optionnel de réaliser un Footer aujourd'hui, pourtant je trouve que ça collait parfaitement à notre esprit sur le forum alors je me suis dis : Je vais leur apprendre un truc super classe ! Et en effet, le rendu est vraiment classe !

    Création graphique d'un Footer


    Nous allons commencer par modifier notre Footer. Ce dernier est généré par les Templates : Overall_Footer_Begin et Overall_Footer_End. « Begin » gère l’affichage du bloc du footer tandis que « End » va gérer les liens de copyright qu’il contient et la clôture du corps du forum et de la page web. Cette petite partie concernant le Footer n’aura aucune manipulation HTML puisque tout est déjà à notre portée !

    Avant de commencer la seconde manipulation sur Photoshop, vous allez avoir besoin d’enregistrer cette image :
    Nebula

    • Ouvrez Photoshop et créez un nouveau document de dimensions 948*127. (Largeur * Longueur)

    • A l’aide de l’outil pot de peinture, remplissez le document de la couleur #17344f.

    • Collez la nébuleuse à une position propice, pour ma part je l’ai positionné comme ceci :

    • Passez le calque de la nébuleuse en superposition et gommez le haut du calque avec le second motif de la gomme :

    • Faites en sorte qu’on est une petite fondue sur le haut. J’ai obtenu ceci :

    • Maintenant, nous allons réaliser la typographie où vous marquerez le nom de votre forum. J’ai de nouveau utilisé Blue Highway en 43px de couleur #053c5b. Je l’ai placé dans le coin gauche de l’image en bas.
    J’ai appliqué un contour : #275d7f, Position : Extérieur, Taille : 1px, Opacité : 57%.
    J’ai appliqué une lueur externe : #297198, Opacité : 23%, Grossi : 0%, Taille : 21px, Superposition.
    J’ai appliqué une ombre portée : Opacité : 70%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 5px.
    Enfin, une incrustation en dégradé : Inverser.

    (#031f2f -- #053c5b)

    • Dupliquez le calque de texte et effacez le style de calque.
    Passez-le en Lumière tamisée avec une opacité de 57%.
    Appliquez une incrustation en dégradé du noir au blanc en mode Superposition. Ajoutez-lui une opacité de 70%.

    • Dupliquez le calque de texte et effacez le style de calque.
    Passez-le en Densité couleur + avec une opacité de 57%.
    Appliquez une incrustation en dégradé du noir au blanc en mode Lumière Tamisée.

    • Enfin, ajoutez une typo plutôt légère - j’ai pris Exmouth – où vous ajouterez un sous-titre et positionnez-là au-dessus de la typo que nous avons fait. Taille de police : 34px ; Couleur : #035786.
    Appliquez une Incrustation en couleur : #086fe2.
    Appliquez une ombre portée : Opacité : 75%, Angle : 90°, Distance : 2px, Grossi : 0%, Taille : 1px.
    Appliquez une lueur externe : #ffffff, Opacité : 4%, Grossi : 0%, Taille : 10px, Superposition.

    • Fusionnez tous vos calques (CTRL + MAJ + E) et enregistrez le document en .jpg

    • Direction votre forum test.

    Création d'un Footer (Codage)


    Nous allons compléter la partie :
    Code:
                    /*Début FOOTER*/

                   /*Fin FOOTER*/

    La balise que nous allons modifier est l’ID « page-footer ». Nous modifierons également ses liens donc le css devient :
    Code:
                    /*Début FOOTER*/
    #page-footer
    {
     
    }

       /*Liens du Footer*/
    #page-footer a
    {
     
    }
                   /*Fin FOOTER*/

    • Ajoutez à #page-footer un fond de couleur #17344f et votre image. Une bordure sur le haut de 1px (#095279) . Les dimensions seront : 948*122 donc on ajoutera une marge intérieure sur le haut de 5px. Enfin, ajoutez une ombre portée sur le texte.
    EXERCICE
    • "page-footer" va prendre les propriétés et valeurs suivantes :
    ♦ Un fond de couleur #17344f .
    ♦ Un fond avec l'image que nous venons de créer
    ♦ Une bordure vers le haut de 1px, solide de couleur #095279.
    ♦ Ayant pour dimensions 948*122
    ♦ Une ombre portée sur le texte avec X=1, Y=1, Z=1 et pour couleur #000
    ♦ Une marge intérieure sur le haut de 5px

    Correction:
    Code:
     #page-footer
    {
      background: #17344f url('http://img594.imageshack.us/img594/5756/footerod.jpg');
      border-top: 1px solid #095279;
      width: 948px;
      height: 122px;
      text-shadow: 1px 1px 1px #000 !important;
      padding-top: 5px;
    }

    • Modifions les liens du Footer en leur ajoutant une taille de police (10px) et une couleur : #086fe2.
    Code:
     #page-footer a
    {
      font-size: 10px;
      color: #086fe2 !important;
    }

    Vous aviez oublié le !important ? Ce n’est pas grave, c’est un réflexe qui va venir très rapidement vous verrez Wink ! Validez votre feuille de Style et :

    La prochaine étape ne contient pas de manipulation, juste un petit bilan de ce que nous avons fais, appris et ce que l’on va faire, ce n’est pas une excuse pour la zapper, elle servira de mémo Wink !

    Étape 8 - Résumé des étapes précédentes



    Introduction
    Nous nous retrouvons dans cette étape pour un résumé de tout ce que nous avons fais précédemment !

    Pour le moment, nous avons réalisé les étapes suivantes :
    - Index & Introduction :
    - Étape 1 : Réaliser son fond et sa bannière
    - Étape 2 : Préparer sa feuille de style CSS
    - Étape 3 : Poser les fondations du codage du forum
    - Étape 4 : Mise en forme de la navigation
    - Étape 5A : Création graphique des catégories
    - Étape 5B : Installation des catégories
    - Étape 6 : Élaboration du "Qui Est En Ligne ?"
    - Étape 7 : Élaboration du Footer

    Cette étape intermédiaire, séparant l'apparence de la façade de votre forum et de celle de son contenu servira de mémo pour tout ce que vous avez appris à faire. Vous l'aurez remarqué, nous n'avons pas encore abordé la Page Accueil, c'est une grosse étape que nous aborderons en dernier, c'est, selon moi, la cerise sur le gâteau qui doit être en harmonie avec l'ensemble du forum.

    Étape 1


    Cette étape était entièrement consacrée au graphisme. Vous avez peut-être pu le remarquer, mais je ne suis pas une bête en graphisme, le but de ce tutoriel est déjà fixé à cette étape, vous apprendrez plus de choses en Codage qu'en Graphisme mais j'essaye tout au long des étapes de vous apprendre le maximum de ce que je sais en graphisme ^^
    Le fruit de notre travail nous aura amené à réaliser notre fond :

    Ainsi que notre bannière :

    Étape 2


    Étape essentiellement consacrée au CSS puisque vous apprenez à organiser votre feuille de style CSS. Cette étape me tenait à cœur puisqu'une feuille CSS se doit d'être bien organisée et où l'on se repère facilement !

    Organiser son CSS :
    Code:
                  /*Début STRUCTURE*/
                  /*Fin STRUCTURE*/

                  /*Début HEADER*/
                  /*Fin HEADER*/
           
                  /*Début PAGE ACCUEIL*/
                  /*Fin PAGE ACCUEIL*/
     
                  /*Début CATEGORIES*/
                  /*Fin CATEGORIES*/

                  /*Début SUJETS*/
                  /*Fin SUJETS*/

                  /*Début MESSAGES*/
                  /*Fin MESSAGES*/

                  /*Début QEEL*/
                  /*Fin QEEL*/

                  /*Début FOOTER*/
                  /*Fin FOOTER*/

                  /*Début CHATBOX*/
                  /*Fin CHATBOX*/


    Étape 3


    Là encore, une étape essentielle pour pouvoir correctement Coder/Grapher son forum. Les réglages primaires ne sont pas à négliger et il faut vous assurer qu'ils ont été fait ! Dans cette étape, vous avez appris à :

    ♦ Mettre plusieurs fonds, influer sur le position, leur répétition et leur défilement grâce au CSS :
    Code:
      background-color: #;
      background-image: url(''), url(''), url('');
      background-position: bottom left, top left, bottom right, top right, center center, center top, center bottom, top center, bottom center;
      background-repeat: no-repeat, repeat-y, repeat-x, repeat;
      background-attachment: scroll, fixed;
    Je vous ajoute les différentes valeurs qu'ils peuvent avoir, cette liste est non-exhaustive pour position puisque vous pouvez jouer avec les px : Plus d'infos - W3Schools

    Étape 4


    Modification de la navigation pour cette étape. C'est un tutoriel que je voulais faire mais finalement, je l'ai gardé pour ce cursus puisqu'elle collait parfaitement au design final. Concrètement, vous avez appris comment modifier un template pour en tirer des profits et également comment redonner à votre navigation son caractère interactif.

    Une barre de navigation type :
    Code:
      <a href="http://adresseduforum/" alt="Accueil">Accueil</a>
      <a href="http://adresseduforum/search" alt="Rechercher">Rechercher</a>
      <a href="http://adresseduforum/memberlist" alt="Membres">Membres</a>
      <a href="http://adresseduforum/groups" alt="Groupes">Groupes</a>
      <a href="http://adresseduforum/profile?mode=editprofile" alt="Profil">Profil</a>
          <!-- BEGIN switch_user_logged_in -->
      <a href="http://adresseduforum/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a>
      <a href="http://adresseduforum/login?logout" alt="Déconnexion">Déconnexion</a>
          <!-- END switch_user_logged_in -->
          <!-- BEGIN switch_user_logged_out -->
      <a href="http://adresseduforum/login" alt="Connexion">Connexion</a>
      <a href="http://adresseduforum/register" alt="S'inscrire">Nous rejoindre</a>
          <!-- END switch_user_logged_out -->
      <a href="http://adresseduforum/">Règlements</a>
      <a href="http://adresseduforum/">Présentations</a>
            <a href="http://adresseduforum/">Questions au staff</a>
      <a href="http://adresseduforum/">Flood</a>
                                    <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

    Et le JavaScript pour les Messages Privés :
    Code:
    jQuery().ready(function(){
            var newmp = $("#i_icon_mini_new_message");
            if(!newmp.length) return;
            $("#mp").attr('style','STYLE DU NOUVEAU MESSAGE');
    });

    Étape 5


    Elle a été divisé en 2 et je ne m'attarderais pas sur la partie Graphique tout simplement parce qu'il n'y a pas grand chose à retenir si ce n'est : La confection d'un corps de catégorie n'est pas difficile, au contraire, parfois un cadre et un motif peuvent amplement suffire. De nos jours, la simplicité à le goût de rendre les choses meilleures pour notre vie alors n'hésitez pas à jouer avec cette notion de légèreté et de simplicité.

    Vous avez sûrement passé beaucoup de temps sur la partie B puisqu'elle se décline en trois temps :
    ♦ Analyse du Template Index_Box
    ♦ Création du corps de catégorie
    ♦ Création du contenu des catégories

    Commençons par l'analyse. Elle va être postée prochainement dans un tutoriel isolé et plus précis. Je n'allais pas vous assommer de connaissances dans une application, le but est de pratiquer et pas de théoriser, cependant, un point sur le template était obligatoire pour savoir ce que nous allions traiter.

    Venait ensuite la création du corps de catégorie, jusque là tout allait bien puisque ce n'était qu'une création de trois div. Vous avez cependant reçu une nouvelle connaissance en CSS, le pouvoir de comprimer les propriétés de type "Background" en une "Super-Propriété". Le problème, c’est que lorsque l’on doit mettre plusieurs images comme nous l'avons fait pour .body, la propriété ne fonctionne pas et les suffixes doivent réapparaître.
    Code:
    background : #COLOR url(‘IMAGE’) POSITION POSITION REPEAT ATTACHMENT;

    Enfin, la création du contenu des catégories, riche en propriétés CSS et en manipulation HTML. Vous avez appris à jouer avec les flottements - Float - pour retirer les tableaux et également avec les positions, les transitions et une petite partie de JavaScript. Le point le plus important reste, à mes yeux, celui sur le clear: both INDISPENSABLE pour un bon affichage. Pensez donc à le mettre si vous venez à réaliser ceci en commande où sur votre forum.

    Des propriétés CSS à retenir :
    Code:
      text-transform: uppercase, lowcase, capitalize, none; /* capitalize viendra mettre votre première lettre de chaque mot en majuscule, lowcase forcera les lettres à être en minuscule */
      text-align: left, center, right; /*Texte centre */
      text-shadow: Xpx Ypx Zpx #COLOR; /* Ombre sur le texte */
      float: left, right, none; /* Flottement */
      overflow: auto; /*Barre de défilement */
      transition: 1s all;

    Un code JavaScript utile : Des sous-forums en retour à la ligne
    Code:
            <span id="subforums">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
                  <script type="text/javascript">
                  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                  </script>


    Étape 6


    Huhu, cette étape est l'une des plus conséquentes, tant par sa taille que par les choses qu'on y apprend. C'est, avec l'étape de la page d'accueil et des catégories, celle qui va sûrement vous épuiser le plus, d'où le choix d'avoir posé ce résumé juste après, ça vous permet de faire un check-up, essentiel aussi pour vous assurer que vous n'avez rien oublié, et une pause pipi entre deux abdos \0/. Bon ok, peut-être un seul ... Même pas é_è ? Vous êtes déconcertants =P !

    On commence d'abord par la création du titre QEEL, rapide, efficace et classe !

    Ensuite vient la grosse manipulation HTML dans le Qui Est En Ligne. Tout comme les catégories, il est divisé en trois parties :
    ♦ Analyse du template Index_body
    ♦ La création du QEEL en lui-même
    ♦ La mise en interaction avec l'utilisateur

    Je ne vais pas revenir sur l'analyse puisqu'elle sera, comme pour Index_box, reprise plus précisément dans un tutoriel.

    Pour la création du QEEL, je vous ai appris à jouer avec les tableaux, comme avec les div. Vous devez comprendre que parfois, le float est mal choisi dans la forme et que le tableau est nécessaire. Il n'y a pas grand chose de nouveau sur cette partie, ça reste du CSS et du HTML pur. Vous avez eu également un exercice, j'espère que vous avez réussi et compris ce que j'attendais de vous x) !

    Enfin, la mise en interaction avec l'utilisateur était le jeu de transition et de z-index. Cette notion reste la plus récente que vous devez aborder, n'hésitez donc pas le lien que je vous ai mis vers l'article rédigé par Scavenger : Lien vers l'article

    Propriétés CSS utiles :
    Code:
      position: absolute, fixed, relative, scroll; /*Relative rend l'élément prioritaire dans l'affichage*/
      z-index: 1 --> 99; /*Priorité d'affichage */
      color: #COLOR !important; /*le !important indispensable lorsque l'on traite des liens*/
      opacity: 0, 0.1, 0.2, etc.. --> 1;

    Étape 7


    Une étape également divisée entre Graphisme et Codage. Nous avons créée un Footer tout mignon grâce, à nouveau, aux nébuleuses. Le principal à retenir de cette étape, c'est le fait que le Footer ne doit pas être trop large au risque de paraître vide. Si vous êtes un graphiste en herbe comme moi, vos fonds seront souvent vides et donc donneront une impression de travail non fini au visiteur. Niveau codage, vous pouvez retenir la balise qui permet de mettre en forme les liens de copyright qui sont dans le Footer :
    Code:
     #page-footer a
    {
      /*Vos propriétés ici*/
    }

    A quoi s'attendre maintenant pour la suite ?


    Et bien, tout ce que je peux vous dire, c'est qu'il nous reste 3 étapes de construction pure et dure : La liste des sujets, l'affichage des message et enfin la Page Accueil. J'essaierai, pour les prochaines étapes de vous donner plus d'exercices, n'hésitez toujours pas à me MP vos résultats ou vos questions, ma boite MP reste ouverte : Créer MP.

    Suite de l'application :
    - Étape 9 : Structure de l'affichage des sujets
    - Étape 10 : Mise en forme des messages
    - Étape 11 : La Page Accueil, mise en avant d'un élément décisif.
    - Étape 12 : Des petits plus ?
    - Étape 13 : Zoom sur l'ensemble du tutoriel et Bilan
    - Étape mystère : Que peut-elle être ?

    Étape 9 - Structure de l'affichage des sujets



    Introduction


    "En voilà une chose ! Pourquoi devrait-on changer l'affichage des sujets, et puis, ça se modifie ?"
    "Sortez les canons et les baïonnettes, cet homme ne doit plus vivre !"

    Plus sérieusement, j'ai dis que le QEEL était un élément négligé, mais je pense que les sujets sont encore plus que négligés, ils sont ... oubliés, souillés, poussiéreux, enfouis dans un tour recouvert par des kilomètres de souvenirs lointains et ... Bref. Parfois, une petite organisation en rajoutant en cadre ou autre peut tout simplement suffire et pourtant, c'est un template totalement omis, peut-être parce que personne ne le comprend ou parce que personne ne prend la peine de le comprendre ... ou encore parce que l'on est aujourd'hui trop concentré sur l'apparence de la façade de notre forum ! Cette étape sera donc entièrement consacrée aux sujets et leur affichage. Le template qui gère l'affichage des sujets s'appelle topics_list_box. Contrairement aux démarches que nous avons précédemment utilisées, nous n'analyserons pas ce template puisqu'il sera entièrement analysé dans un tutoriel à venir. Disons que j'estime que le minimum à expliquer sera fait pendant la manipulation !

    Manipulation HTML


    Nous allons directement commencer par manipuler dans topics_list_box et retirer les lignes qui correspondent aux titres tels que "Vues" "Réponses" etc... Qui ne vont pas nous servir.

    • Ainsi, retirez les lignes suivantes :
    Code:

          <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
          <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
          <th align="center" nowrap="nowrap" width="100"> {topics_list_box.row.L_AUTHOR} </th>
          <th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th>
          <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>

    Nous voici maintenant face à ce qui gère directement l'affichage de la liste des sujets :
    Code:
    <!-- 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"><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 -->
          <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="topictitle" 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="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
          <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{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>
       <!-- END topic -->

    • Nous allons y créer un tableau de manière astucieuse entre :
    Code:
    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
       <tr>
    Et
    Code:

       </tr>
       <!-- END topic -->

    Ainsi, il faudra créer une cellule qui englobera toutes les autres.

    EXERCICE :
    • Créez une cellule entre tr et /tr
    • Créez une tableau qui aura comme classe : Sujet
    • Créez une ligne au tableau (tr) englobant le reste des cellules.
    Réponse:
    Code:
    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
       <tr>
          <td>
    <table class="Sujet" width="100%" border="0" cellspacing="1" cellpadding="0">
       <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 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 -->
          <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="topictitle" 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="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
          <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{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>
          </td>
       </tr>
       <!-- END topic -->
    Vous pouvez comme toujours me MP si vous n'avez pas compris certaines choses dans les exercices ou si vous avez besoin de plus amples informations !

    Maintenant que nous avons crée ce qui va contenir notre liste de sujets, nous allons organiser son contenu.
    A la fin de notre passage nous avons :
    Code:
          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
          <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>

    Le but va être de créer une seule cellule qui contiendra une div du nom de "SujetPosted" et qui contiendra le nombre de vues, de réponses et les informations relatives au dernier message.

    •Il faut déjà supprimer les autres colonnes et donner la class à la toute première :
    Code:
    <td class="row2" align="center" valign="middle">
       <div class="SujetsPosted">
                      {topics_list_box.row.REPLIES}
                      {topics_list_box.row.TOPIC_AUTHOR}
                      {topics_list_box.row.VIEWS}
                     {topics_list_box.row.LAST_POST_TIME}<br />
                      {topics_list_box.row.LAST_POST_AUTHOR}
                      {topics_list_box.row.LAST_POST_IMG}
       </div>
                 </td>

    Vous l'aurez remarqué, la création de la div entraine la suppression des spans ! Maintenant, nous allons créer une div autour des statistques et retirer la ligne qui gère l'affichage de l'auteur du sujet, nous la réimplanterons quelque part d'autre.
    Code:
          <td class="row2" align="center" valign="middle">
       <div class="SujetsPosted">
                <div class="SujetsStats">{topics_list_box.row.REPLIES} Réponses - {topics_list_box.row.VIEWS} Vues</div>
                     {topics_list_box.row.LAST_POST_TIME}<br />
                      {topics_list_box.row.LAST_POST_AUTHOR}
                      {topics_list_box.row.LAST_POST_IMG}
       </div>
                 </td>

    C'est terminé pour cette partie, nous allons maintenant modifier un peu plus au-dessus dans le template, je parle de cette partie :
    Code:
          <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="topictitle" 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>

    Nous allons uniquement modifier l'affichage du titre et modifier une div pour modifier l'affichage plus tard. Ainsi, nous allons retirer la balise qui fait du titre un titre important (h2).
    Code:
             <div class="SujetTitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                   <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
             </div>

    Ensuite, en-dessous de la div qui contient le titre, nous allons y ajouter celle qui contiendra l'auteur du nom de "SujetAuteur"
    Code:
             <div class="SujetAuteur">Ce sujet a été écrit par {topics_list_box.row.TOPIC_AUTHOR}</div>

    Enfin, nous allons déplacer l'affichage de l’icône et le mettre à coté de l'ensemble. Juste avant la cellule qui englobe le tableau, juste ici :
    Code:
       <tr>
             
          <td>
    <table class="Sujet" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>

    Coupez donc cette ligne :
    Code:
          <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>

    Et collez-là juste après :
    Code:
    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
       <tr>

    Changez la classe en "SujetIcone" et on arrive à :
    Code:
    {topics_list_box.row.END_TABLE_STICKY}
       <tr>
          <td class="SujetIcone" 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>
             
          <td>
    <table class="Sujet" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>

    Au final, le template devient :
    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 -->

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
       <!-- BEGIN multi_selection -->
       <th 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" /></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>
          <td class="SujetIcone" 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>
             
          <td>
    <table class="Sujet" width="100%" border="0" cellspacing="1" cellpadding="0">
       <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 -->
          <!-- 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="SujetTitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                   <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
             </div>
             <div class="SujetAuteur gensmall">Ce sujet a été écrit par {topics_list_box.row.TOPIC_AUTHOR}</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="row2" align="center" valign="middle">
       <div class="SujetsPosted">
                <div class="SujetsStats">{topics_list_box.row.REPLIES} Réponses - {topics_list_box.row.VIEWS} Vues</div>
                     {topics_list_box.row.LAST_POST_TIME}<br />
                      {topics_list_box.row.LAST_POST_AUTHOR}
                      {topics_list_box.row.LAST_POST_IMG}
       </div>
                 </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>
          </td>
       </tr>
       <!-- END topic -->
     
         <!-- BEGIN no_topics -->
       <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>
       <!-- END no_topics --><!-- BEGIN bottom -->
       <tr>
          <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
                </tr>
             </table>
          </td>
       </tr>
    <!-- END bottom --><!-- BEGIN footer_table -->
    </table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

    Passons maintenant à la modification CSS !

    Manipulation CSS


    Dans la première partie de l'étape, nous avons crée plusieurs classes dont : "Sujet", "SujetIcone", "SujetTitle", "SujetAuteur", "SujetsStats" et "SujetPosted".
    Ainsi, nous copions ceci dans le css entre la section qui est prévu à la modification des sujets :
    Code:
                   /*Début SUJETS*/
       /* Un Sujet */
    .Sujet
    {
     
    }

       /* Icone New/No New/Lock */
    .SujetIcone
    {
     
    }

       /* Titre */
    a.SujetTitle
    {
     
    }

       /* Auteur */
    .SujetAuteur
    {
     
    }

       /* Statistiques */
    .SujetsStats
    {
     
    }

       /* Dernier Message */
    .SujetsPosted
    {
     
    }
                   /*Fin SUJETS*/

    EXERCICE :
    • "Sujeté va prendre les propriétés suivantes :
    ♦ Un fond de couleur : #17344f
    ♦ Une bordure solide de 1px sur tous les cotés de couleur : #095279
    ♦ Une largeur de 890px
    ♦ Une taille minimum de 30px (min-height: Xpx)
    ♦ Une marge intérieure de 15px sur la gauche
    ♦ Une marge intérieure de 5px
    ♦ Une marge extérieure sur le haut et le bat de 5px
    ♦ Une marge extérieure sur la gauche de 20px
    ♦ Un arrondis de 20px
    ♦ Une ombre avec X = 0, Y = 0, Z = 3px et pour couleur #000000
    Correction:
    Code:

    .Sujet
    {
      background-color: #17344f;
      border: 1px solid #095279;
      width: 890px;
      min-height: 30px;
      padding: 5px;
      padding-left: 15px;  /*La marge intérieure devient de 15px uniquement à gauche*/
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 20px; /*On laisse de la place pour l'icone*/
      border-radius: 20px;
      box-shadow: inset 0px 0px 3px #000000;
    }

    Je parie que certains d'entre vous sont tombés dans le piège pour le padding et ont mis en premier le padding-left en premier, puis le padding "général" en second. C'est une erreur à éviter mais ne vous inquiétez pas, ça deviendra un automatisme bientôt Wink !

    • "SujetIcone" va seulement prendre une position: absolute.
    Code:
    .SujetIcone
    {
      position: absolute;
    }

    • Ensuite, a.Sujettitle, le titre du sujet donc, va avoir une taille de police de 13px, des lettres capitales et une ombre portée (X= 0, Y=0, Z=1 et en couleur: #000000).
    Code:
    a.SujetTitle
    {
      font-size: 13px;
      text-transform: uppercase;
      text-shadow: 0px 0px 1px #000000;
    }

    • Puis, la div qui contient l'auteur du sujet et sa phrase va prendre les modifications suivantes :
    ♦ Une taille de police de 10px
    ♦ Une texte en italique
    Correction:
    Code:
    .SujetAuteur
    {
      font-size: 10px;
      font-style: italic;
    }

    • "SujetsStats" va prendre une bordure en bas d'1px, solide, de couleur #095279; une police de taille 10px et une marge extérieure en bas de 1px.
    Code:
    .SujetsStats
    {
      border-bottom: 1px solid #095279;
      font-size: 10px;
      margin-bottom: 1px;
    }

    • Enfin, "SujetPosted" va prendre les modifications suivantes :
    ♦ Une couleur de fond de couleur #052231
    ♦ Une bordure sur tous les côtés de 1px, solide, de couleur #095279
    ♦ La div aura pour dimensions 200*50
    ♦ Une police d'écriture de 10px
    ♦ Une marge extérieure de 5px
    ♦ Une ombre portée avec X = 0, Y = 0, Z = 3 et pour couleur #000000

    Correction:
    Code:
      background-color: #052231;
      border: 1px solid #095279;
      width: 200px;
      height: 50px;
      font-size: 10px;
      margin: 5px;
      box-shadow: 0px 0px 3px #000000;

    Vous l'aurez remarqué sur le screen, l'image catégorie nous déforme l'affichage du forum, nous allons donc ajouter un code qui va la redimensionner de partout sur le forum (Sujets et messages). Ce sera un code à retenir et à garder près de vous si vous utilisez des images catégories !
    Code:
       /*Redimension du titre catégorie*/
    a.nav img
    {
      width: 150px;
    }

    Manipulation Graphique


    Passons à la création des images de sujets, à savoir :
    • Nouveaux messages
    • Pas de nouveaux messages
    • Sujet Verrouillé
    • Annonce
    • Post-it

    Tout comme les images New/No New/Lock que nous avons crée pour les catégories, nous allons faire des textes pour les images des sujets.

    • Créez un document qui a pour dimensions : 44*80 (Largeur*Longueur)

    • Utilisez l'outil de texte horizontal et marquez "Post-it -Marquez un saut de ligne- Sujet" en taille 10px.

    • Placez la typographie au milieu du document et double-cliquez sur le claque du texte.

    • Appliquez :
    - Une incrustation en dégradé : Angle = 0°

    (#005585 -- #00304c)
    - Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.

    • Fusionnez les claques et enregistrez le document en tant que .png

    • Réalisez la même démarche pour "Sujet Annonce" !

    • Passons aux images New/No New/Lock. Ouvrez un document de même dimensions précédentes.

    • Utilisez l'outil de texte horizontal et marquez "MESS -Marquez un saut de ligne- NEW" en taille 18px.

    • Placez la typographie au milieu du document et double-cliquez sur le claque du texte.

    • Appliquez :
    - Une incrustation en dégradé : Angle = 0°

    (#005585 -- #00304c)
    - Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.

    • Utilisez la même démarche pour No New et Lock en variant les dégradés (Noir pour le lock, bleu pâle pour le no new) !

    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mar 23 Avr 2013 - 13:27

    Étape 10 - Mise en forme des messages



    Introduction


    Nous voici dans l'étape 10, l'avant dernière étape de construction de notre forum ! Après avoir dressé nos catégories, notre QEEL, notre Footer et traversé les chemins de nos sujets, nous atteignons une grotte sinueuse et étroite que sont les messages. En effet, s'il sont peu modifiés, la plupart du temps, leur affichage est redondant : Profil sur le haut, message sur le bas, profil sur la gauche, message sur la droite. Ceci s'explique par le fait que l'utilisateur est peu habitué aux grands changements et que lui changer son interface pourrait le perturber ! Nous allons rester ici sur les classiques et mettre en forme quelque chose de très simple mais également, très classe !

    Analyse rapide du template


    • Direction Affichage> Template> Général> Viewtopic_body.

    Considérons le template en trois parties.
    La première partie représente l'affichage du profil :
    Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

    La seconde affiche le message et la signature :
    Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>

    Et tout ce qui gère l'après-message, à savoir la réponse rapide et les droits de modération :
    Code:
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td class="row2" colspan="2" align="center" style="padding:0px">
             <!-- BEGIN switch_user_logged_in -->
             <a name="quickreply"></a>
             {QUICK_REPLY_FORM}<br />
             <!-- END switch_user_logged_in -->
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
                <tbody>
          <!-- BEGIN show_permissions -->
          <tr>
             <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
             <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
          </tr>
          <!-- END show_permissions -->
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <!-- BEGIN show_permissions -->
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                      <!-- END show_permissions -->
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
                <tbody>
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
    </table>

    Je "zappe" délibérément certaines lignes parce qu'elles concernent des choses qui peuvent être justement zappées, ce sont par exemple l'affichage des "règles" d'un forum ou encore des scripts.

    Modification de l'affichage des messages


    • Pour commencer les manipulations, nous allons alterner la partie du message et du profil, nous allons donc inter-changer les places des cellules.
    Code:
       <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
             
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>
       </tr>
       <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
             <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
             <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="middle">
                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                   </td>
                </tr>
             </table>
          </td>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>

    • Créons un tableau juste après que la ligne soit ouverte qui aura pour class :"Message" :
    Code:
       <!-- BEGIN displayed -->
       <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
    <table class="Message" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">
       <div class="postdetails" style="float: left">
       <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   
       <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
       </div>
       <div class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
       </div>
          <br />
                         <div class="message">{postrow.displayed.MESSAGE}</div>
          <br />
       <div class="post-options">
       {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
       </div>
                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                   </td>
                </tr>
             </table>
          </td>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
       <div class="MessageProfil">
             <div class="MessageAuteur"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>
             
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span>
       </div>
          </td>
       </tr>
    </table>
          </td>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>

    • Concentrons-nous maintenant sur la partie qui gère les messages, à savoir celle-ci :
    Code:
    <table class="Message" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>

    Vous avez une ligne qui affiche des bordures vraiment pas esthétiques :
    Code:
                <tr>
                   <td colspan="2" class="hr">
                      <hr />
                   </td>
                </tr>

    Supprimez-la dès que vous la voyez x) ! Ensuite, nous allons déplacer les boutons "Editer", "Supprimer" et les boutons "MSN" "Skype" "Profil" etc..., nous allons les mettre près de la div "postbody".
    Cela veut dire que ces lignes :
    Code:
                <span class="postdetails">
                                      <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   
                                      <img src="{postrow.displayed.MINI_TIME_IMG}" alt="{postrow.displayed.L_MINI_TIME_ALT}" title="{postrow.displayed.L_MINI_TIME_ALT}" border="0" />{postrow.displayed.POST_DATE}
                                 </span>

    Et :

       {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}

    Puis cette ligne :
    Code:
                      {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}

    Vont devenir :
    Code:
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">
                <span class="postdetails">
                                      <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   
                                      <img src="{postrow.displayed.MINI_TIME_IMG}" alt="{postrow.displayed.L_MINI_TIME_ALT}" title="{postrow.displayed.L_MINI_TIME_ALT}" border="0" />{postrow.displayed.POST_DATE}
                                 </span>
       {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                                                     
                         <div>{postrow.displayed.MESSAGE}</div>
                                                     
       {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">

    • Maintenant, on va ajouter une div autour des deux images qui aura pour classe "postdetails" et pour style (style="") un flottement sur la gauche. Le style sert à ajouter des propriétés qui seront plus importantes que celles mises dans la class, ainsi elles seront prioritaires dans l'affichage du style de la div.
    Code:
       <div class="postdetails" style="float: left">
       <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   
       <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
       </div>

    • Maintenant, on ajoute une autre div qui a pour classe "post-options" autour des images types "Éditer" "Citer" "Supprimer etc.."
    Code:
       <div class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
       </div>

    • Et enfin, une autre div qui aura pour classe "post-options" autour des autres boutons, on ajoute également une classe à la div qui entour le message du nom de "message" :
    Code:
                         <div class="message">{postrow.displayed.MESSAGE}</div>
       <div class="post-options">
       {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
       </div>

    État du template :
    Code:
    <table class="Message" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">
       <div class="postdetails" style="float: left">
       <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   
       <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
       </div>
       <div class="post-options">
                      {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
       </div>
          <br />
                         <div class="message">{postrow.displayed.MESSAGE}</div>
          <br />
       <div class="post-options">
       {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
       </div>
                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                   </td>
                </tr>
             </table>
          </td>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

       </tr>
       <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
             <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
       </tr>
    </table>
          </td>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>

    • Validez le Template. Direction la feuille de style CSS !

    • Nous avons créé 2 div : '.Message' et 'message'. Nous allons aller chercher .message grâce à .postbody, ça donne :

    Code:
                   /*Début MESSAGES*/
       /* Cadre Message + Profil */
    .Message
    {
     
    }

       /* Message texte */
    .postbody .message
    {
     
    }
                   /*Fin MESSAGES*/

    EXERCICE :
    • "Message" va prendre les propriétés et les valeurs suivantes :
    ♦ Un fond de couleur #17344f
    ♦ Une bordure de tous les côtés de 1px, solide de couleur #095279
    ♦ Une largeur de 925px
    ♦ Un centrement automatique
    ♦ Une marge extérieure en haut et en bas de 10px
    ♦ Une ombre portée avec X= 0, Y= 0, Z= 3 et une couleur #000000

    Correction:
    Code:
    .Message
    {
      background-color: #17344f;
      border: 1px solid #095279;
      width: 925px;
      margin: auto; /*Boite centrée*/
      margin-top: 10px; /*Marge en haut et en bas de 10px */
      margin-bottom: 10px;
      box-shadow: 0px 0px 3px #000000;
    }

    • Nous allons maintenant donner une hauteur minimum de 520px au message et une marge intérieure de 3px :
    Code:
    .postbody .message
    {
      padding: 3px;
      min-height: 520px;
    }

    Validez votre CSS et retournez dans le template !

    • Nous allons tout d'abord régler des problèmes d'affichage et retirer les titres "Auteur" et "Message" qui s'affiche avant le message. Ainsi, retirez les l.111 à l.114 :
    Code:
       <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
       </tr>

    Retirez également les lignes suivantes :
    Code:
       <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
             <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
       </tr>
    Avant :
    Code:
       <!-- BEGIN first_post_br -->

    • Passons maintenant à la partie qui nous intéresse :
    Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

    EXERCICE :
    • Introduisez une div ayant pour class: "MessageProfil" qui englobera la totalité de la cellule.

    Correction:
    Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
       <div class="MessageProfil">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
       </div>
          </td>

    • Enfin,
    Code:
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
    • Entourez le titre du posteur d'une div du nom "MessageAuteur" et faites les modifications nécessaires !
    Correction:
    Code:
             <div class="MessageAuteur"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>

    Il fallait donc retirer les span et introduire une div, supprimer le saut de ligne qui est déjà occasionné par la div.
    Il était possible de garder la mise en gras mais je l'ai supprimé car je ne veux pas le pseudo en gras ^^ ! Passez finalement dans le CSS !

    • Nous avons crée deux div : "MessageProfil" et "MessageAuteur".
    Code:
       /* Profil */
    .MessageProfil
    {
     
    }

       /* Auteur */
    .MessageAuteur
    {
     
    }

    EXERCICE
    • Tout d'abord, attribués à "MessageProfil" les propriétés suivantes :
    ♦ Une bordure de tous les côtés sauf à droite de 1px, solide de couleur #095279
    ♦ Une largeur de 180px
    ♦ Une hauteur minimum de 450px
    ♦ Un alignement du texte centré
    ♦ Une marge intérieure de 5px
    ♦ Une marge extérieure à droite de -4px
    ♦ Une marge extérieure en haut de -3px
    ♦ Une ombre sur la boite avec X= 0, Y= 0, Z= 3 et pour couleur #000000

    • Ensuite, "MessageAuteur" prend les propriétés suivantes :
    ♦ Un alignement du texte centré
    ♦ Une taille de police de 11px
    ♦ Une ombre portée sur le texte avec X= 0, Y= 0, Z= 1 et pour couleur #000000

    Correction:
    Code:
       /* Profil */
    .MessageProfil
    {
      border: 1px solid #095279;
      border-right: 0px;
      width: 180px;
      min-height: 480px;
      text-align: center;
      padding: 5px;
      margin-right: -4px;
      margin-top: -3px;
      box-shadow: 0px 0px 3px #000000;
    }

       /* Auteur */
    .MessageAuteur
    {
      text-align: center;
      font-size: 11px;
      text-shadow: 0px 0px 1px #000000;
    }

    Nous avons positionné le profil de telle façon qu'il soit ancré dans le coin à gauche ^^ !
    Nous en avons désormais terminé pour la manipulation HTML/CSS des messages, nous allons passer au graphisme !

    Création graphique des images de message


    • Nous allons créer les boutons des messages ! Avant tout, je vais vous demander de ré-héberger les boutons, qui sont les même que Sparrow, servant à la modération :

    Merci de ré-héberger ces images


    Passons à la création des boutons suivants :
    - Nouveau
    - Répondre
    - Verrouillé

    - Éditer
    - Citer
    - Supprimer
    - adresse IP

    - Rechercher ...
    - Profil
    - M.Privé
    - Site web
    - MSN
    - Yahoo
    - Skype
    - En Ligne

    • Ouvrez un document de dimensions 59*18

    • Sélectionnez l'outil de texte horizontal avec une police de 14px, ayant pour couleur #00a2ff et marquez "Nouveau".
    Utilisez la police Xenophone :Download

    • Appliquez :
    - Une incrustation en dégradé : Angle = 90°

    (#15415a -- #277eb0)
    - Une ombre portée d'opacité 37%, Distance 2px, Grossi 0%, Taille : 1px.
    • Enregistrez le document en .png

    • Faites la même chose pour Répondre mais changez le dégradé pour Verrouillé, Partez du noir au bleu foncé.

    • Répétez la même manipulation en ajustant la taille de police pour tous les autres boutons excepté pour "En ligne" sur lequel vous partez du bleu foncé au vert foncé et sur Supprimer sur lequel vous partez du bleu foncé au rouge foncé.




    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mar 23 Avr 2013 - 13:43

    Étape 11 - La Page Accueil, mise en avant d'un élément décisif



    Introduction


    Vous voici dans la dernière étape de construction de votre forum. Les prochaines étapes à venir ne seront que des finitions alors tenez le coup Very Happy ! De tous temps, la page accueil a été le sujet principal de commandes, d'aide ou encore de tutoriels. Aujourd'hui, je vais lever le secret sur ce que doit absolument contenir une page accueil !
    2C2N

    Késako ? C'est mon moyen mnémotechnique pour désigner le Contexte, les Crédits, une Navigation rapide, les News. Ce sont, d'après moi, des éléments essentiels qui doivent se retrouver impérativement dans une Page Accueil facile d'accès, esthétique et complète. Libre à vous d'ajouter des éléments, plus il y en a, plus c'est chargé donc plus l'affaire est complexe ^^ Nous commencerons la création de notre page accueil par le graphisme !

    Amorce graphique de la PA


    • Ouvrez un document de dimension 100*100

    • Remplissez-le à l'aide de l'outil "pot de peinture" de couleur #09527b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpa"
    • Ouvrez un autre document et remplissez le cette fois-ci de la même façon de couleur #0a754b. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpab"
    • Enfin, remplissez un troisième document de couleur #750a0a. Passez l'opacité du calque à 30% et enregistrez le en .png au nom de "Fondpac"


    • Ouvrez un document de dimensions 900*400.

    • Remplissez-le de la couleur #0c2539.

    • Créez un nouveau calque (CTRL + MAJ + N) et remplissez le de blanc (#ffffff). Passez-le en mode Produit.

    • Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation en dégradé".

    (#0b1e29 -- #0f2937)

    • Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le également en mode Produit.

    • Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
    J'ai choisi le même motif que pour mes catégories et ai baissé son opacité à 22% après l'avoir passé en mode Produit.

    Pour terminer, nous allons créer les titres de notre page.
    • Ouvrez un document de dimensions 400*40 et remplissez-le de blanc.

    • Double-cliquez sur le calque 1 et appliquez :
    ♦ Un contour intérieur de 1px, de couleur #053c5b
    ♦ Une Incrustation en dégradé, Angle = 90°

    (#02121a -- #031f2f )

    • Créez à nouveau un calque et remplissez le de blanc (#ffffff). Passez-le en mode Produit.

    • Double-cliquez sur le calque que vous avez crée et sélectionnez "Incrustation de Motif".
    J'ai choisi le même motif que précédemment avec les mêmes valeurs.

    • Fusionnez les calques. Faîtes image, rotation de l'image, 90° antihoraire et enregistrez le en .jpg au nom de "FondContenu"

    Reproduisez les même manipulations que précédemment mais ne les fusionnez pas et enchaînez par la suite :
    • A l'aide de l'outil de texte horizontal, écrivez le titre du premier onglet de votre PA. Moi ce sera tout simplement "Accueil" avec la police Blue Highway en taille de police 35px.

    • Double-cliquez sur le calque et appliquez :
    ♦ Un contour extérieur de 1px, de couleur #022031
    ♦ Une ombre portée d'opacité 37%, Distance 2px, Grossi 0%, Taille : 5px.
    ♦ Une Incrustation en dégradé, Angle = 90°

    (#042230 -- #073a52)

    • Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
    • Appliquez une incrustation en dégradé du noir vers le blanc en mode superposition. Le calque prendra un opacité de 57%.

    • Dupliquez le calque et faites clique droit dessus : Supprimer le style de calque.
    • Appliquez une incrustation en dégradé du blanc vers le noir en mode en mode Lumière Tamisée. Le calque prendra un opacité de 57%.

    • Créez une nouvelle typographie avec une police plus légère - j'ai pris Exmouth- de taille 22px, de couleur #005784. J'ai écris : "Bienvenue sur le forum"
    • Appliquez lui une ombre portée d'opacité 75%, Distance 2px, Grossi 0%, Taille : 1px.
    • Placez le texte au centre de la première typographie, fusionnez les calques et enregistrez en .jpg le document.


    • Procédez de la même manière pour les autres onglets. En changeant le dégradé, voici, pour que vous ayez un modèle, les boutons que j'ai réalisé :




    • Passons à la manipulation HTML/CSS !

    Amorce de la PA (Codage)


    • Direction Affichage> Généralités> Message sur la page d'accueil
    • Nous allons créer une div qui aura pour ID "accueil".
    Code:
       <div id="accueil">
       
       </div>

    • Ensuite, nous allons créer dans cette div, une autre div. Elle aura un ID nommé "page1".
    Code:
       <div id="accueil">
       
       <div id="page1">
       
       </div>
       
       </div>

    • A présent, nous allons dans la div "page1", qu'on appellera plus simplement "Page 1", créer un tableau avec une class nommée "contenu_page".
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td>
       
          </td>
       </tr>
    </table>
       </div>
       
       </div>

    • Enfin, nous allons créer d'autre page (4 précisément). Êtes-vous capable de le faire tout seul =P ?
    Correction:
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td>
       
          </td>
       </tr>
    </table>
       </div>

       <div id="page2">
    <table class="contenu_page">
       <tr>
          <td>
       
          </td>
       </tr>
    </table>
       </div>

       <div id="page3">
    <table class="contenu_page">
       <tr>
          <td>
       
          </td>
       </tr>
    </table>
       </div>

       <div id="page4">
    <table class="contenu_page">
       <tr>
          <td>
       
          </td>
       </tr>
    </table>
       </div>
       
       </div>

    • Pour finir, ajouter une div ayant pour class "contenu" dans chacune des cellules créées :
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page2">
    <table class="contenu_page">
       <tr>
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page3">
    <table class="contenu_page">
       <tr>
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page4">
    <table class="contenu_page">
       <tr>
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>
       
       </div>

    • Passons maintenant au CSS. Nous avons créé six ID et deux class : "#accueil", "page1", "page2", "page3", "page4", "contenu" et "contenu_page".
    Ainsi, nous allons mettre dans le CSS :
    Code:
                   /*Début PAGE ACCUEIL*/
       /* Contenu Accueil*/
    #accueil
    {
     
    }

       /* Onglets */
    #page1, #page2, #page3, #page4
    {
     
    }

       /* Tableau conteneur */
    .contenu_page
    {
     
    }

       /* Contenu */
    .contenu
    {
     
    }
                   /*Fin PAGE ACCUEIL*/

    EXERCICE :
    • Appliquez à "#accueil" les propriétés et valeurs suivantes :
    ♦ Une barre de défilement cachée (overflow: hidden)
    ♦ Un fond avec l'image que nous avons fait de dimensions 900*400 positionnée en haut à gauche qui ne se répète pas.
    ♦ Une bordure de tous les cotés de 3px, solide de couleur #011d2a
    ♦ Ayant pour dimensions 900*400
    ♦ Centré automatiquement

    • Appliquez à "#page1, #page2, #page3, #page4" les propriétés et valeurs suivantes :
    ♦ Un flottement sur la gauche
    ♦ Une barre de défilement cachée
    ♦ Un fond avec l'image que nous avons nommé "FondContenu", positionnée en haut à gauche qui se répète horizontalement.
    ♦ Ayant pour dimensions 40*400

    • Appliquez à ".contenu_page"
    ♦ Une largeur de 100%
    ♦ Une hauteur de 400px

    • Appliquez enfin à ".contenu"
    ♦ Une barre de défilement cachée
    ♦ Ayant pour dimensions 0*0
    ♦ Une marge intérieure de 6px
    ♦ Une opacité de 0

    Correction:
    Code:
       /* Contenu Accueil*/
    #accueil
    {
      overflow: hidden;
      background: url('http://img829.imageshack.us/img829/8812/36497741.jpg') top left no-repeat;
      border: 3px solid #011d2a;
      width: 900px;
      height: 400px;
      margin: auto;
    }

       /* Onglets */
    #page1, #page2, #page3, #page4
    {
      float: left;
      overflow: hidden;
      background: url('http://img690.imageshack.us/img690/1970/pa2hs.jpg') top left repeat-x;
      width: 40px;
      height: 400px;
    }

       /* Tableau conteneur */
    .contenu_page
    {
      width: 100%;
      height: 400px;
    }

       /* Contenu */
    .contenu
    {
      overflow: hidden;
      width: 0px;
      height: 0px;
      padding: 6px;
      opacity: 0;
    }
    Vous avez remarqué ? Vous êtes capable de faire des choses presque tous seuls maintenant, vous devenez vraiment des experts Very Happy !

    • Retournons dans notre code, nous allons placer les titres et amorcer la mobilité des onglets. Pour placer les titres, nous allons créer une cellule avant celle qui a le contenu. La cellule aura pour style une barre de défilement cachée et une largeur de 40px.
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">

          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    Ensuite nous plaçons notre image de titre entourée d'une span ayant pour class : page_titre.
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img841.imageshack.us/img841/2518/accueilfc.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    • Faites la même chose pour les autres pages en prenant soin de remplacer le lien de l'image titre.
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img841.imageshack.us/img841/2518/accueilfc.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page2">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img201.imageshack.us/img201/551/actualites.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page3">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img405.imageshack.us/img405/8356/rleplay.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

       <div id="page4">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img819.imageshack.us/img819/4447/amisy.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>
       
       </div>

    • Passez dans le CSS, on va amorcer la mobilité des onglets !
    Avant tout, nous avons crée une class : "page_titre".
    Code:
       /* Titre Page */
    .page_titre
    {
     
    }

    •".page_titre" prend les valeurs suivantes :
    ♦ On lui donne un "display: inline-block" pour que chaque titre soit l'un à côté de l'autre.
    ♦ Des dimensions : 400*40
    ♦ On aligne le contenu (text-align: center)
    ♦ Une marge extérieure de -180px
    ♦ Une rotation de -90deg :
    Code:

      -webkit-transform: rotate(-90deg); 
      transform: rotate(-90deg);

    Au final donc :
    Code:
       /* Titre Page */
    .page_titre
    {
      display: inline-block;
      width: 400px;
      height: 40px;
      text-align: center;
      margin-left: -180px;
      -webkit-transform: rotate(-90deg); 
      transform: rotate(-90deg);
    }

    • Maintenant, nous allons créer l'interaction avec nos onglets. Ceci se fera au survole des pages, on peut donc poser :
    Code:
    /* Page Survolée  */
    #page1:hover, #page2:hover, #page3:hover, #page4:hover
    {
     
    }

    Ajoutons leur une barre de défilement cachée, une largeur de 80%, une hauteur de 400px et les propriétés de transition, sans oublier de les ajouter aux pages quand elles ne sont pas survolées :
    Code:
       /* Onglets */
    #page1, #page2, #page3, #page4
    {
      float: left;
      overflow: hidden;
      background: url('http://img690.imageshack.us/img690/1970/pa2hs.jpg') top left repeat-x;
      width: 40px;
      height: 400px;
      transition: 1s all;
    }
       /* Onglets survolés */
    #page1:hover, #page2:hover, #page3:hover, #page4:hover
    {
      overflow: hidden;
      width: 80%;
      height: 400px;
      transition: 1s all;
    }

    Puis, nous allons faire en sorte que lorsque la page est survolé, le contenu ait de nouvelles valeurs, soit "#page1:hover .contenu, #page2:hover contenu, etc..." Nous l'avons fait précédemment, vous vous souvenez ?

    Code:
    #page1:hover .contenu,  #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu
    {
     
    }

    Donnez-leur comme propriétés :
    ♦ Une barre de défilement cachée
    ♦ Des dimensions 650*380
    ♦ Une marge extérieure de -180px
    ♦ Une opacité totale "1"
    ♦ Les propriétés de transition.

    Code:
       /* Onglets survolés contenu devient */
    #page1:hover .contenu,  #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu
    {
      overflow: none;
      width: 650px;
      height: 380px;
      margin-left: -180px;
      opacity: 1;
      transition: 1s all;
    }

    Ensuite, nous allons donner les fonds colorés à faible opacité que nous avons donné précédemment à chaque contenu de différentes pages survolés sachant que la page1 et la page4 auront le fond bleu :
    Code:
       /* Fonds des pages */
    #page1:hover .contenu, #page:hover .contenu
    {
      background-image: url('http://img801.imageshack.us/img801/2486/fondpa3.png');
    }
    #page2:hover .contenu
    {
      background-image: url('http://img689.imageshack.us/img689/8647/fondpa3b.png');
    }
    #page3:hover .contenu
    {
      background-image: url('http://imageshack.us/a/img90/9420/fondpa3c.png');
    }

    • Il est temps de remplir notre page d'accueil ! Repassez donc dans votre code, nous allons nous occuper de cette partie :
    Code:
       <div id="accueil">
       
       <div id="page1">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img841.imageshack.us/img841/2518/accueilfc.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    Nous allons tout d'abord créer un titre "accueilb" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
    Code:
       <div class="contenu">
       
       </div>

    Ainsi :
    Code:
       <div class="contenu">
       <div class="accueilb">Bienvenue sur NOM DE VOTRE FORUM</div>

       </div>

    Ensuite, directement en-dessous, nous allons créer nos deux boites qui vont flotter :
    Code:
       <div class="contenu">
       <div class="accueilb">Bienvenue sur NOM DE VOTRE FORUM</div>

       <div class="paboxb">
    Boite n°1
       </div>
       <div class="paboxb">
    Boite n°2
       </div>
       <div style="clear: both"></div>

       </div>

    Il ne faut pas oublier le clear: both qui permet de retirer l'effet de flottement sur les éléments à venir et enfin, la navigation rapide :
    Code:
       <div class="contenu">
       <div class="accueilb">Bienvenue sur NOM DE VOTRE FORUM</div>

       <div class="paboxb">
    Boite n°1
       </div>
       <div class="paboxb">
    Boite n°2
       </div>
       <div style="clear: both"></div>

       <div class="fastlinks">
       <a href="#">Site</a>
       <a href="#">Règlement</a>
       <a href="#">Contexte</a>
       <a href="#">Présentations</a>
       <a href="#">Rôle Play</a>
       <a href="#">Flood</a>
       </div>
       </div>

    On valide le tout et on passe dans le CSS ;D !

    Nous avons créé trois class: "accueilb", "paboxb" et "fastlinks".
    Aussi :
    Code:
       /* Titre bleue */
    .accueilb
    {
     
    }

       /* Boites bleues */
    .paboxb
    {
     
    }

       /* Navigation Rapide */
    .fastlinks
    {
     
    }
       /* Liens Navig Rapide */
    .fastlinks a
    {
     
    }
       /* Liens Navig Rapide Survolés */
    .fastlinks a:hover
    {
     
    }

    On prévoit à l'avance que les liens auront un effet lorsqu'ils seront survolés ^^ !

    EXERCICE :
    • "accueilb" prend les propriétés et les valeurs suivantes :
    ♦ Une largeur de 100%
    ♦ Une bordure sur le bas de 5px, solide de couleur #011d2a
    ♦ Un alignement du texte à gauche
    ♦ Un texte en gras
    ♦ Une taille de police de 15px
    ♦ Une couleur de police #3F6C85
    ♦ Une ombre portée avec X= 1, Y= 1, Z= 0 et pour couleur #000000
    ♦ Une marge intérieure de 10px sur la gauche
    ♦ Une marge extérieure en haut et en bas de 10px

    • "paboxb" prend les propriétés et les valeurs suivantes :
    ♦ Une barre de défilement automatique
    ♦ Un flottement sur la gauche
    ♦ Un fond de couleur #0b344b
    ♦ Une bordure de 2px, solide de couleur #011d2a sur tous les cotés, elle sera de 5px sur la gauche et sur la droite.
    ♦ Ayant pour dimensions 280*150
    ♦ Un alignement du texte justifié
    ♦ Une marge intérieure de 3px
    ♦ Une marge sur le haut de 20px, de 25 px sur la gauche et une marge de 10px sur tous les côtés

    • "fastlinks" prend les propriétés et les valeurs suivantes :
    ♦ Une barre de défilement cachée
    ♦ Une bordure à droite et à gauche de 5px, solide de couleur #011d2a
    ♦ Une largeur de 80%
    ♦ Une hauteur de 112px
    ♦ Une marge extérieure sur le haut de 5px
    ♦ Un centrement automatique
    ♦ Un arrondis de 70px

    Correction:
    Code:
       /* Titre bleue */
    .accueilb
    {
      width: 100%;
      border-bottom: 5px solid #011d2a;
      text-align: left;
      font: 15px bold;
      color: #3F6C85;
      text-shadow: 1px 1px 0px #000;
      padding-left: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

       /* Boites bleues */
    .paboxb
    {
      overflow: auto;
      float: left;
      background-color: #0b344b;
      border: 2px solid #011d2a;
      border-left: 5px solid #011d2a;
      border-right: 5px solid #011d2a;
      width: 280px;
      height: 150px;
      text-align: justify;
      padding: 3px;
      margin: 10px;
      margin-top: 20px;
      margin-left 25px;
    }

       /* Navigation Rapide */
    .fastlinks
    {
      overflow: hidden;
      border-left: 5px solid #011d2a;
      border-right: 5px solid #011d2a;
      width: 80%;
      height: 112px;
      margin: auto;
      margin-top: 5px;
      border-radius: 70px;
    }

    Les pièges étaient à nouveau sur la disposition des propriétés, d'abord margin: auto; puis margin-top: 15px, j'insiste sur cela parce que c'est une erreur fréquente ^^ ! Vous l'aurez remarqué, j'ai compressé la propriété "font" à la manière de background, ça marche de la même manière !
    Code:
    font: Xpx bold/normal/italic/oblique small-caps;

    • Nous allons ensemble modifier le style des liens de la navigation rapide.
    Code:
       /* Liens Navig Rapide */
    .fastlinks a
    {
     
    }
       /* Liens Navig Rapide Survolés */
    .fastlinks a:hover
    {
     
    }

    Les liens de la navigation rapide, lorsqu'ils ne sont pas survolés, vont devenir des "blocs" grâce à la propriété display: block (à l'inverse de inline-block qui aligne des éléments type bloc). Nous leur donneront un fond de couleur #011d2a, une bordure en bas de 1px, solide ##0b344b, une largeur de 100%, un texte centré, un taille de police de 13px en gras. On ajoute également les propriétés de transition.

    Code:
    .fastlinks a
    {
      display: block;
      background-color: #011d2a;
      border-bottom: 1px solid #0b344b;
      width: 100%;
      text-align: center;
      font: 13px bold;
      transition: 1s all;
    }

    Lorsque le lien sera survolé, on changement la couleur du fond pour #0b344b :
    Code:
    .fastlinks a:hover
    {
      background-color: #0b344b;
      transition: 1s all;
    }

    • Enregistrez votre CSS.

    • Il est temps de faire le contenu de la seconde page ! Nous allons donc nous concentrer sur cette partie de notre code :
    Code:
       <div id="page2">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img201.imageshack.us/img201/551/actualites.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    • Comme précédemment, nous allons créer un titre "accueilv" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
    Code:
       <div class="contenu">
       
       </div>

    Ainsi :
    Code:
       <div class="contenu">
       <div class="accueilv">Derniers Messages et Annonces</div>

       </div>

    Ensuite, nous allons créer un tableau à trois cellules :
    Code:
       <div class="contenu">
       <div class="accueilv">Derniers Messages et Annonces</div>

    <table width="100%">
       <tr>
          <td width="25%">
          
          </td>
          
          <td width="50%"></td>
          
          <td width="25%">
          
          </td>
       </tr>
    </table>
       </div>

    Nous ne remplirons que la première et la dernière cellule d'une boite ayant pour class : "paboxv"
    Code:
       <div class="contenu">
       <div class="accueilv">Derniers Messages et Annonces</div>

    <table width="100%">
       <tr>
          <td width="25%">
       <div class="paboxv">
       
       </div>
          </td>
          
          <td width="50%"></td>
          
          <td width="25%">
       <div class="paboxv">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    • Validez la page accueil et allez dans votre CSS.

    • Nous avons créé deux div : "accueilv" et "paboxv". les propriétés d'"accueilv" sont semblables à celles que nous avons donné à "accueilb" alors nous allons utiliser la "super-balise" !
    Code:
       /* Titre bleue */
    .accueilb
    {
      width: 100%;
      border-bottom: 9px solid #011d2a;
      text-align: left;
      font: 15px bold;
      color: #3F6C85;
      text-shadow: 1px 1px 0px #000;
      padding-left: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    Va devenir :
    Code:
       /* Titre bleu et vert */
    .accueilb, .accueilv
    {
      width: 100%;
      border-bottom: 5px solid #011d2a;
      text-align: left;
      font: 15px bold;
      color: #3F6C85;
      text-shadow: 1px 1px 0px #000;
      padding-left: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
       /* Titre vert */
    .accueilv
    {
     
    }

    Ainsi, nous allons modifier la couleur du texte et la couleur de la bordure de "accueilv" :
    Code:
    .accueilv
    {
      color: #3f8544 ;
      border-bottom: 5px solid #012a04 ;
    }

    EXERCICE :
    • "paboxv" va prendre les propriétés et les valeurs suivantes :
    ♦ Une barre de défilement automatique
    ♦ Une police de couleur #3f8544
    ♦ Une bordure sur tous les cotés de 2px, solide de couleur #012a02 sauf sur la gauche et la droite où elle doit être de 5px
    ♦ Ayant pour dimensions 200*320
    ♦ Un texte justifié
    ♦ Une marge extérieure de 5px

    Correction:
    Code:
       /*Boites vertes */
    .paboxv
    {
      overflow: auto;
      background-color: #275027;
      color: #3f8544;
      border: 2px solid #012a02;
      border-left: 5px solid #012a02;
      border-right: 5px solid #012a02;
      width: 200px;
      height: 320px;
      text-align: justify;
      margin: 5px;
    }

    On rajoutera également une nouvelle couleur (#113113) aux liens dans les boites vertes :
    Code:
       /* Liens boite verte*/
    .paboxv a
    {
      color: #113113!important;
    }


    • Nous allons maintenant faire apparaître les derniers messages sur le forum dans votre page accueil ! C'est un nouveau système plutôt simple et vraiment très intéressant. Pour ce faire, direction Modules> Gestion des widgets du forum> Oui.

    • A présent, on va cacher la partie des widgets sur la gauche parce qu'on ne veut seulement les derniers messages ! Ainsi, on va ajouter ceci au CSS :
    Code:
    #left
    {
      display: none;
    }
    Ajoutez ce bout de code dans la partie STRUCTURE du CSS.

    • On retourne enfin dans notre code. Dans la première colonne de la partie sur laquelle nous travaillons, nous allons ajouter une div avec un id:"recent-topics" pour contenir les derniers messages, ensuite, une code JavaScript va venir mettre la partie des derniers messages des widgets vers la div que l'on a créé. Copiez le code suivant juste après la div que nous venons de créer. Ce dernier récupère à l'aide de l'ID dans les widgets le contenu des derniers messages et le bascule vers notre div.
    Code:
       <script type="text/javascript">jQuery.get('/forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>

    • Enfin, dans la seconde colonne, nous allons créer un défilement. Ce dernier se compose en deux parties, d'abord la balise marquee et ensuite le span qui contient ... le contenu Very Happy !
    Code:
    <marquee>
    <span>
    </span>
    </marquee>

    Cependant, marquee va prendre plusieurs attributs, notamment pour modifier sa vitesse de défilement, sa direction, sa hauteur. Nous allons donc lui donner l'ordre de défiler vers le haut, avec une taille de 280px, à un vitesse de "2" unités (plus le chiffre est haut, plus ça va vite) et enfin une vitesse en millisecondes qui augmente l'intervalle moyen entre les déplacements du texte, plus le chiffre est haut, plus c'est long !

    Code:
       <marquee behavior="scroll" direction="up" height="280px" scrollamount="2" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
       <span style="text-align: justify;font-size: 11px;">

       </span>
       </marquee>
    Oups, j'avais oublié de vous dire, on va donner à span une taille de police de 11px et un texte justifié !
    Voici un bon site pour les défilements, il est vraiment complet ^^ Voir le site

    C'est ici que vous mettrez vos news, j'ai pour habitude de prendre cette forme :
    Code:
       <strong>~ xx/xx/xxxx :</strong> News <br />
       <strong>~ xx/xx/xxxx :</strong> News <br />
       <strong>~ xx/xx/xxxx :</strong> News <br />
       <strong>~ xx/xx/xxxx :</strong> News

    Pour terminer avec cette page, on va ajouter un titre dans chaque boite pour faciliter la compréhension. Nous nommerons la div qui le contiendra "VTitle". Ainsi ça donne :
    Code:
       <div class="contenu">
       <div class="accueilv">Derniers Messages et Annonces</div>

    <table width="100%">
       <tr>
          <td width="25%">
       <div class="paboxv">
       <div class="VTitle">Derniers Messages</div><br />
       <div id="recent-topics"></div>
       <script type="text/javascript">
       jQuery.get('/forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});
       </script>
       </div>
          </td>
          
          <td width="50%"></td>
          
          <td width="25%">
       <div class="paboxv">
       <div class="VTitle">Annonces Importantes</div><br />
       <marquee behavior="scroll" direction="up" height="280px" scrollamount="2" scrolldelay="1">
       <span style="display: block; text-align: justify;font-size: 11px;">
       <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
       <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
       <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
       <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
       </span>
       </marquee>
       </div>
          </td>
       </tr>
    </table>
       </div>

    • On passe dans la CSS, notre deuxième page est bientôt terminée ! Nous avons créée la div "VTitle".

    EXERCICE :
    • "VTitle" va prendre les propriétés et les valeurs suivantes :
    ♦ Une couleur de fond #011a02
    ♦ Une bordure en bas de 1px, solide de couleur #011a02
    ♦ Une largeur de 100%
    ♦ Une couleur de police #074a04
    ♦ Une taille de police de 12px, en gras, écrite en Georgia (font-family: 'Georgia'Wink
    ♦ Un texte en lettres capitales
    ♦ Un texte aligné au centre
    ♦ Une ombre portée sur le texte avec X= 0, Y= 0, Z= 3 et avec une couleur #000000

    Correction:
    Code:
       /* Titre boite verte*/
    .VTitle
    {
      background-color: #011a02;
      border-bottom: 1px solid #011a02;
      width: 100%;
      color: #074a04;
      font: 12px bold 'Georgia';
      text-transform: uppercase;
      text-align: center;
      text-shadow: 0px 0px 3px #000000;
    }

    • Nous allons passer à la création du contenu de la troisième page !
    C'est donc cette partie qui nous intéresse :
    Code:
       <div id="page3">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img405.imageshack.us/img405/8356/rleplay.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    Comme précédemment (et ce sera fait pour les deux prochaines pages également) nous allons ajouter un titre.
    Nous allons donc créer un titre "accueilr" (b=bleu, v=vert, r=rouge) que nous allons insérer entre :
    Code:
       <div class="contenu">
       
       </div>

    Ainsi :
    Code:
       <div class="contenu">
       <div class="accueilr">Tableaux des effectifs</div>

       </div>

    Vous l'aurez compris, nous allons créer un tableau d'effectifs. Rien de bien difficile, c'est tout simplement créer un tableau normalement. Nous allons donc avoir autant de colonne que de groupes (6 étant un bon nombre) et 5 lignes (Une pour le titre, une pour le nom des groupes, une pour le chef du groupe, une pour l'effectif et une pour la situation du groupe [Fermé/Ouvert])
    (. Au passage, la table prendra comme class "AccueilEffectifs"
    Code:
       <div class="contenu">
    <table class="AccueilEffectifs">
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
    </table>
       </div>

    Etant donné que notre première ligne ne contiendra que notre titre, nous pouvons "fusionner" toutes les colonnes en une ligne grâce à "colspan=""". Si nous devons fusionner 2 colonnes, ça donnera colspan="2". Ici, nous en avons 6. Vous prendrez soin d'ajouter le titre entouré d'une div ayant pour class :"RTitle".
    Code:
    <table class="AccueilEffectifs">
       <tr>
          <td colspan="6">
       <div class="RTitle">Effectifs du forum</div>
          </td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
    </table>

    • Notre seconde ligne contiendra le nom des groupes. Nous allons donc reprendre les divs que nous avons créé dans le QEEL pour entourer le nom de nos groupes comme ceci :
    Code:
    <table class="AccueilEffectifs" cellspacing="0" cellpadding="0" align="center" border="0">
       <tr>
          <td colspan="6">
       <div class="RTitle">Effectifs du forum</div>
          </td>
       </tr>

       <tr>
          <td class="gr1"> Groupe </td>
          <td class="gr2"> Groupe </td>
          <td class="gr3"> Groupe </td>
          <td class="gr4"> Groupe </td>
          <td class="gr5"> Groupe </td>
          <td class="gr6"> Groupe </td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
       
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr>
    </table>

    Ensuite, vous n'avez plus qu'à remplir normalement les autres cellules avec le Chef, l'effectif et le statut du groupe.
    Code:
    <table class="AccueilEffectifs" cellspacing="0" cellpadding="0" align="center" border="0">
       <tr>
          <td colspan="6">
       <div class="RTitle">Effectifs du forum</div>
          </td>
       </tr>

       <tr>
          <td class="gr1"> Groupe </td>
          <td class="gr2"> Groupe </td>
          <td class="gr3"> Groupe </td>
          <td class="gr4"> Groupe </td>
          <td class="gr5"> Groupe </td>
          <td class="gr6"> Groupe </td>
       </tr>
       
       <tr>
          <td> Chef </td>
          <td> Chef </td>
          <td> Chef </td>
          <td> Chef </td>
          <td> Chef </td>
          <td> Chef </td>
       </tr>
       
       <tr>
          <td> Effectif total </td>
          <td> Effectif total </td>
          <td> Effectif total </td>
          <td> Effectif total </td>
          <td> Effectif total </td>
          <td> Effectif total </td>
       </tr>
       
       <tr>
          <td> Ouvert / Fermé </td>
          <td> Ouvert / Fermé </td>
          <td> Ouvert / Fermé </td>
          <td> Ouvert / Fermé </td>
          <td> Ouvert / Fermé </td>
          <td> Ouvert / Fermé </td>
       </tr>
    </table>

    • Passons dans le CSS. Nous avons créée "accueilr", "AccueilEffectifs" et "RTitle". Comme avant, "accueilr" a les même propriétés que accueilb et accueilv, seul sa bordure et sa couleur change ça donne donc :
    Code:
       /* Titre bleue, vert et rouge */
    .accueilb, .accueilv, .accueilr
    {
      width: 100%;
      border-bottom: 5px solid #011d2a;
      text-align: left;
      font: 15px bold;
      color: #3F6C85;
      text-shadow: 1px 1px 0px #000;
      padding-left: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
       /* Titre vert */
    .accueilv
    {
      color: #3f8544 !important;
      border-bottom: 5px solid #012a04 !important;
    }
       /* Titre rouge */
    .accueilr
    {
     
    }

    Nous allons donner à accueilr un couleur de police (#853f3f) et une bordure de 5px vers le bas, solide de couleur #2a0101.
    Code:
    .accueilr
    {
      color: #853f3f;
      border-bottom: 5px solid #2a0101;
    }

    EXERCICE :
    • "RTitle" va prendre les propriétés et les valeurs suivantes :
    ♦ Une couleur de police #853f3f
    ♦ Une largeur de 100%
    ♦ Une taille de police de 13px, en gras, en Georgia.
    ♦ Une alignement du texte centré.
    ♦ Un texte avec des lettre capitales
    ♦ Un espace entre les lettres de 3px (letter-spacing: 3px;)
    ♦ Une ombre portée avec X= 0, Y= 0, Z= 1 et pour couleur #000000

    • "AccueilEffectifs" va prendre les propriétés et les valeurs suivants :
    ♦ Une couleur de fond #4f2727
    ♦ Une bordure sur tous les cotés de 1px, solide de couleur #780808
    ♦ Ayant pour dimensions 600*320
    ♦ Un texte centré
    ♦ La police prend la couleur #853f3f
    ♦ Un centrement auto
    ♦ Une marge extérieure en haut et en bas de 10px
    ♦ Un arrondis de 10px;
    ♦ Une ombre portée sur la boite avec X= 0, Y= 0, Z= 3 et avec une couleur #000000

    Correction:
    Code:
       /* Titre boite rouge */
    .RTitle
    {
      color: #853f3f;
      width: 100%;
      font: 13px bold 'Georgia';
      text-align: center;
      text-shadow: 0px 0px 1px #000000;
      text-transform: uppercase;
      letter-spacing: 3px; /*Espace entre chaque lettres*/
    }
       /* Boite rouge */
    .AccueilEffectifs
    {
      background-color: #4f2727;
      border: 1px solid #780808;
      width: 600px;
      height: 320px;
      text-align: center;
      color: #853f3f;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      box-shadow: 0px 0px 3px #000000;
      border-radius: 10px;
    }

    • Nous allons nous occuper de la page 4 pour terminer :
    Code:
       <div id="page4">
    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img805.imageshack.us/img805/2270/vdfq.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       </div>
          </td>
       </tr>
    </table>
       </div>


    • On finira par la dernière page, la page 4.
    Code:
       <div id="page4">

    <table class="contenu_page">
       <tr>
          <td style="width: 40px; overflow: hidden;">
       <span class="page_titre"><img src="http://img819.imageshack.us/img819/4447/amisy.jpg" /></span>
          </td>
          
          <td>
       <div class="contenu">
       
       </div>
          </td>
       </tr>
    </table>
       </div>

    Nous allons ajouter le titre "accueilb" puisque la page est bleue :
    Code:
       <div class="contenu">
       <div class="accueilb">Partenariats, Crédits et Remerciements</div>
       </div>

    On créer un tableau à deux colonnes :

    Code:
    <table width="100%">
       <tr>
          <td>
          
          </td>
       
          <td>
          </td>
       </tr>
    </table>

    Le width="100%" va venir dire que le tableau prendre toute la largeur de la page. Maintenant, on va ajouter un style à la première cellule. Elle va avoir une largeur de 35%, une hauteur de 320px et une bordure sur la droite de 1px en petits points (dotted) de couleur #011d2a . De même, la seconde cellule va avoir une largeur de 65% et une largeur de 320px;

    Code:
    <table width="100%">
       <tr>
          <td style="width: 35%; height: 320px; border-right: 1px dotted #011d2a">
          
          </td>
       
          <td style="width: 65%; height: 320px;" >
          </td>
       </tr>
    </table>

    La première colonne accueillera les crédits, je vous laisse ajouter dès maintenant une petite phrase de remerciement pour NU Razz
    La seconde accueillera les partenaires. Aussi, nous allons créer des liens avec des classes et une image :
    Code:
       <a href="http://www.never-utopia.com/" class="Amis"><img src="http://img4.hostingpics.net/pics/271766logo4.jpg" /></a

    • Passons une dernière fois dans le CSS !

    Nous avons créée une div: "Amis".
    Code:
    .Amis
    {
     
    }

    Nous allons lui donner une bordure sur tous les côtés de 1px, solide de couleur #095279, une largeur automatique (elle s'adaptera au logo) une hauteur de 10px, une marge intérieure de 10px à gauche et à droite, une marge extérieure en haut de 10px et un arrondis de 5px.
    Code:
    .Amis
    {
      border: 1px solid #095279;
      width: auto;
      height: 10px;
      padding-left: 10px;
      padding-right: 10px;
      margin-top: 10px;
      border-radius: 5px;
    }

    Et voilà, j'en ai terminé de mes explications longues et interminables ou parfois pas assez présentes. Dans tous les cas ce fut un réel plaisir de pouvoir vous aider tout au long de cette application. Ce n'est pas encore terminé, il nous reste quelques "petits plus" mais après ce sera fini ! ^^
    N'hésitez pas à m'envoyer vos rendus par MP ou sur le topic dans les tutos, c'est toujours un plaisir de voir ce que vous pouvez faire grâce à ce qu'on tente de vous apprendre.

    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mar 23 Avr 2013 - 13:47

    Étape 12 - Des petits plus ?



    Introduction


    Ceci est en quelque sorte une étape bonus, des petits codes en vrac qui vous serviront pour supprimer des défauts ou autres.

    Petits codes en plus


    On commence tout de suite par une super-balise en CSS qui vous permettra d'ôter ces bordures :

    Code:
    .row3Right, .thHead, .thCornerL, .thCornerR, .thTop, .thLeft, .thRight, .catLeft, .catRight, .catHead, .catBottom
    {
      border: none !important;
      border-left: none !important;
      border-right: none !important;
    }

    Ensuite, vous avez la possibilité de changer le style des balises code, spoiler, hide et citation ! FA nous donne ceci :
    Code:
    .code
    {
     
    }

    .quote
    {
     
    }
     
    .spoiler_closed hidden,  .spoiler_content, .spoiler_closed
    {
     
    }

    Il suffit de leur ajouter un fond, une bordure, un padding, une couleur d'écriture et le tour est joué, pour ma part, j'ai fais ceci :
    Code:
    .code
    {
      background-color: #052231;
      border: 1px solid #095279;
      padding: 3px;
      color: #658899;
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }

    .quote
    {
      background-color: #052231;
      border: 1px solid #095279;
      padding: 3px;
      color: #658899;
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }
     
    .spoiler_closed hidden,  .spoiler_content, .spoiler_closed
    {
      background-color: #052231;
      border: 1px solid #095279;
      padding: 3px;
      color: #658899;
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }

    Enfin, nous terminons par la mise en couleurs des boutons et des "aires" d'écritures. Par définition, une aire d'écriture s'ouvre avec la balise "textarea" et un bouton par "input" ainsi, pour les modifier il suffit de mettre dans le CSS :
    Code:
    textarea
    {
     
    }

    input
    {
     
    }

    J'ai ajouté les même propriétés et valeurs que pour les citations etc... histoire de rester dans quelque chose d'uniforme.
    Code:
    textarea
    {
      background-color: #17344F;
      border: 1px solid #095279;
    }

    input
    {
      background-color: #17344F;
      border: 1px solid #095279;
      text-shadow: 0px 0px 1px #000;
      box-shadow: 0px 0px 3px #000;
      border-radius: 5px;
    }

    Voilà, c'est tout ce que je pouvais vous donner comme codes pratiques pour le moment, s'il m'en venait d'autres, je les ajouterais dans un tutoriel Wink !
    Et bien je crois que nous avons terminé, ne nous reste plus qu'un dernier bilan à faire et l'étape mystère qui vous réserve une surprise Very Happy !

    Étape 13 - Zoom sur l'ensemble du tutoriel et Bilan



    Introduction


    Nous voici dans la dernière partie de l'application, c'est triste de se dire qu'après ça, on ne se verra plus T_T ... Ah non, il reste le forum Very Happy ! Venez participez, ne faîtes pas les timides, pour de vrai, on s'y éclate vraiment ! Bref, revenons à nos moutons.

    Résumé sur l'ensemble des réalisations


    Rapidement, une petite liste des éléments qui ont été modifiés :
    - Header (Bannière + Navigation)
    - Catégories
    - QEEL
    - Footer
    - Sujets
    - Messages
    - Page Accueil
    - Boutons et aires de texte.

    Et bien disons que c'est une liste à dresser avant la création du design d'un forum même si certains éléments ne sont pas obligatoirement à changer !! Je rappelle à nouveau qu'un beau design est bien souvent un design simple, léger alors modifier tous les templates, les tirailler de tous les côtés ne va pas forcément arranger les choses ...

    Bilan


    En guise de bilan, que dire ?
    Et bien que tout d'abord, la plupart des choses faîtes dans ce tutoriel étaient à votre portée, et pour cause, vous en aurez la clef dans la prochaine étape !
    La partie la plus simple dans le codage reste bien évidemment le CSS, qui est calé en anglais se débrouillera vraiment facilement en CSS. Ça équivaut aussi pour le HTML mais ça demande déjà quelques notions intuitives et quelques connaissances en plus.
    Pour terminer, je dirais que le codage d'un forum est illimité. Si j'aime plus le codage que le graphisme, c'est parce qu'il est d'abord repoussé par beaucoup de monde, on se dit souvent que c'est des maths, et pourtant non ^^
    Certes, la construction au codage est plus longue mais elle n'en reste pas moins passionnante, on construit son monde peu à peu, comme on le voit dans notre tête parce que la plupart du temps, si je code un thème, c'est pour retransmettre dans le réel (ou du moins dans le virtuel) une simple idée de thème qui m'avait traversé !

    L'imagination est un fruit rare mais à manger sans modération.


    Étape 14 : Révélations et Remerciements



    Introduction


    "Saviez-vous que Never Utopia recèle de trésors à la valeur exorbitante et qu’à chacun des recoins du navire se trouve la possibilité d’apprendre quelque chose ? Saviez-vous que Never Utopia compte aujourd’hui environ 600 tutoriels de graphisme et environ 300 tutoriels de codage ? Vous aimeriez modifier votre QEEL (Qui Est En Ligne) mais vous n’en êtes pas capable car vous ne connaissez pas ce qui constitue son contenu, vous voudriez modifier les catégories mais vous vous perdez dans les templates et bien chaque tutoriel s’efforce de vous apprendre toutes ces choses."


    Vous devez sûrement être nombreux à vous en rendre compte, mais cette application vous a permis de revisiter de nombreux tutoriels du forum. Pour cause, le design du forum a été entièrement réalisé avec des tutoriels de Never Utopia, tant Graphismes que Codages. J'ai, bien entendu, rajouté ma touche personnelle ainsi que certaines astuces en plus mais la base reste : l'enseignement fournie par Never Utopia.
    En bref, quel était le but de cette application ?

    Tout simplement de vous faire prendre conscience que chaque tutoriel du forum recèle de précieuses informations à exploiter et à revisiter. Ici, nous n'avons fait que de l'application pure et dure, mais vous avez sûrement pu comprendre en profondeur certaines choses non-expliquées dans certains tutoriels, soit par manque de temps, parce que si vous ne vous en rendez pas compte, l'écriture d'un tutoriel est longue et surtout très éprouvante car rien ne doit être oublié, soit parce qu'il vise une catégorie de lecteurs déjà expérimentés.

    Liant Tutoriels Théoriques et Astuces Pratiques, j'ai tenté tout au long de cette application de vous inculquer un précieux savoir : celui de la création. Parfois, on peut chercher pendant de nombreuses heures THE "truc de ouf qui va tout déchirer de la mort qui tue" alors que la simplicité peut parfois faire des choses miraculeuses. J'espère avoir été assez précis durant toute cette longue application et j'espère également ne pas vous avoir déçu ou vous avoir perdu.

    L'apprentissage du codage est ouvert à tous, même aux plus nuls, ce n'est qu'une question de volonté !

    Pour terminer, j'aimerai remercier toutes les personnes qui m'auront aidé pour la conception du design !

    Remerciements


    - HammHetfield pour son tutoriel sur Débuter en WebDesign
    - Wasp pour son tutoriel sur "Inter Nebula"
    - Capucine pour son tutoriel sur "Créer des ombres"
    - Sparrow-Style pour son tutoriel sur "Le bloc de navigation rapide -Haut, bas et ancres-"
    - Eraendil pour son tutoriel sur "Créer sa propre barre de navigation"
    - Sparrow-Style pour son tutoriel sur "PA en accordéon horizontal en CSS"
    - Sparrow-Style pour son tutoriel sur "Les forum sur deux colonnes"
    - Sui' pour son tutoriel sur "Personnaliser vos titres de forum/catégorie"
    - Taktiik pour son tutoriel sur "Un corps catégorie"
    - Taktiik pour son tutoriel sur Des sous-forums en retour à la ligne
    - Sparrow-Style pour son tutoriel sur "Optimiser et réduire la taille des titres de catégorie dans les forums"
    - Lucky Numb£r pour son tutoriel sur "Modifier les colonnes de messages et sujets dans les forums"
    - Sui' pour son tutoriel sur "Inverser le profil et le message dans un sujet"
    - Sparrow-Style pour son tutoriel sur "Qeel en 3 colonnes avec Effet Zoom"
    - Taktiik pour son tutoriel sur "Comprendre son QEEL et le personnaliser"
    - Taktiik pour son tutoriel sur "Les Variables FA"
    - Zayl pour son tutoriel sur "Retirer les soulignement sous les pseudos"
    - Sparrow-Style pour son tutoriel sur "Supprimer toutes les vilaines bordures de titres"
    - Undomiel pour son tutoriel sur "Le widget des derniers sujets où vous le désirez"
    - Sparrow-Style pour son tutoriel sur "Opacité réduite ou transparence"
    - Lucky Numb£r pour son tutoriel sur "Les Widgets et le principe de défilement"
    - Xplo-Sion pour son tutoriel sur "L'effet de transition, infobulle, rotation et agrandissement"
    - Skyleen pour son tutoriel sur "Comment créer une div"
    - Taktiik pour son tutoriel sur "Le déroulant fluide"
    - Lucky Numb£r pour son tutoriel sur "Le principe des ombres portées"
    - Aeden pour son tutoriel sur "Les Ombres"
    On remercie enfin également les personnes qui ont aidé pour l'écriture de cette application, à savoir principalement Sparrow-Style, Neva, Narja, Halloween ainsi que tous les autres membres du staff qui m'ont été d'une précieuse aide dans leurs avis et leurs jugements !

    Une dernière fois, n'hésitez pas à me MP sur le forum si vous avez des questions ou besoin d'aide : Envoyer un MP.

    Ce tutoriel a été le fruit d'un travail conséquent, merci de ne pas le copier, totalement ou partiellement. Vous pouvez le mettre en pratique librement, mais pas vous en approprier l'invention. Vous êtes autorisés à mettre des liens vers cette page où vous le souhaitez.

    avatar
    Shaneliae
    FémininAge : 20Messages : 789

    le Ven 15 Mai 2015 - 16:51

    Tutoriel réellement très intéressant et encore plus complet que le tuto proposé par Sparrow : cette fois on revoit ENTIÈREMENT le design du forum. Rien quand testant un peu ce tuto on y passe des heures et c'est là qu'on se rend réellement compte du travail que c'est de créer un bon design ! Bref, j'ai adoré ce tuto et je me suis bien amusée à le refaire ! J'ai d'ailleurs réussi à refaire toutes les images conçues ici sans PhotoShop et en utilisant uniquement Photofiltre Wink (un autre entraînement graphique très sympathique !)

    J'ai repéré une ou deux petites erreurs dans des codes, notamment sur un template : on nous indique qu'une balise a été mal positionné. Avec un tout petit peu de réflexion on comprend qu'il fat simplement déplacer d'une ou deux ligne plus haut la balise indiquée en rouge (merci la coloration syntaxique !) J'ai trouvé aussi que l'on se perd rapidement dans les modifications des templates : un ou deux rappels de "voilà à quoi ressemble notre template maintenant" en plus seraient les bienvenue ! D'ailleurs, la quasi totalité (même toutes...) les lignes indiquées pour les modifications de templates sont fausses, il y a toujours au moins un décalage de 5 lignes, pour ceux n'ayant pas l'habitude ça devient vite embêtant !

    Bref, quand même un très bon et très agréable. Malgré ces quelques petites erreurs on s'y retrouve très bien et très facilement ! Ce tuto a été bien mené et de façon à ce que le lecteur fasse les choses en ayant une certaine réflexion et fasse les choses dans l'ordre. Je le conseille vivement à ceux souhaitant modifier le design complet de leur forum, au moins pour s'entraîner Wink



    avatar
    Kuvera
    FémininAge : 23Messages : 30

    le Mar 26 Mai 2015 - 21:39

    Coucou. J'ai voulu tester ton tutoriel sur le Forum que je souhaite créer, car je trouve qu'il est très bien expliqué et j'aurais aimé effectué quelques modifs sur le design. Seulement, je crois que je me suis planté dans le CSS (je crois)... Mais genre complètement... Je ne sais pas d'où ça vient ni comment rectifier cette erreur, étant totalement nulle en codage!.

    Je suis vraiment désolée, je ne voulais pas demandé de l'aide alors que ce tuto est vraiment fait pour les noobs...

    A l'aaaaaaaaide :'( :calimero:
    avatar
    Kuvera
    FémininAge : 23Messages : 30

    le Mer 27 Mai 2015 - 13:57

    J'ai rectifié mon erreur ! Merci beaucoup pour ce Tuto.
    avatar
    Richard York
    FémininAge : 27Messages : 24

    le Ven 24 Juil 2015 - 18:49

    Bonjour et merci pour ce tuto asse facile pour quelqu'un qui n'avait jamais fait de codage auparavant Very Happy

    Cependant j'ai un petit soucis, voilà en fait dans l'Etape 4 tu dit:

    "l.265 à 269 et retirez ce qui gère l’affichage de la barre de navigation"

    Sauf que le forum m'indique que c'est à la ligne 273 donc du coup je n'ose pas supprimer de peur de faire une méga erreur qui me ferais tout planter parce que du coup aussi, après tu dit

    " Dirigez-vous à la l.245 "

    Du coup je ne trouve pas le "Begin Logo Center" :titanic:

    Pourrais-tu me conseiller s'il te plait? :)

    Merci d'avance :love:



    avatar
    Neva
    FémininAge : 25Messages : 18562

    le Ven 24 Juil 2015 - 22:36

    Salut !

    Le tuto date de 2013 et il arrive que Forumactif modifie ses templates donc la numérotation marche pas toujours. Ne regarde donc pas les lignes mais le texte.
    Pour la partie je la trouve L255 environ et le logo_center est juste un peu plus bas :)



     
    avatar
    Richard York
    FémininAge : 27Messages : 24

    le Sam 25 Juil 2015 - 15:04

    Bonjour,

    Merci beaucoup Neva :)



    avatar
    Spring
    FémininAge : 15Messages : 110

    le Mar 28 Juil 2015 - 18:11

    C'est super mais je comprend rien xD



    avatar
    Cruelly
    FémininAge : 23Messages : 2524

    le Mar 11 Aoû 2015 - 4:02

    Je retente ma chance avec ce tuto qui m'avais fait galérer la première fois x) Ayant plus l'habitude avec le codage je crois pouvoir bien m'en sortir cette fois ^^

    A oui et merci Taktiik pour tout le temps que tu a mis sur ce tuto ^^



    Absente pour le moment. Je reviens bientôt c'est promis :ange:
    avatar
    Nippon Syndrom
    FémininAge : 23Messages : 43

    le Lun 28 Déc 2015 - 23:49

    Hello !

    Merci beaucoup pour ce tuto !! Very Happy

    Bon... Je suis face à une catastrophe, et j'ai bien besoin d'aide... x)
    Je suis donc censée arriver à ça :


    Mais j'arrive à... ça :


    Une idée d'où j'ai fait la bourde ? x)

    Un grand merci d'avance :hug:



    avatar
    Nippon Syndrom
    FémininAge : 23Messages : 43

    le Mar 29 Déc 2015 - 0:01

    Erf... Je suis vraiment désolée, j'ai trouvé >.<
    Je suis désolée pour le DP, du coup, aussi... Je n'ai pas trouvé la fonction éditer >.<

    Pardon du dérangement :michi3:



    avatar
    Cicéro
    FémininAge : 26Messages : 14

    le Lun 13 Juin 2016 - 8:40

    Tuto impressionnant, et vraiment clair. Merci Taktiik. o_o
    Quelqu'un aurait une idée du comment procéder, au mieux, pour appliquer l'étape 9 (structure de l'affichage des sujets), mais cette fois dans la messagerie privée ?
    A mon sens, c'est le seul point qui manque à ce tuto ; le reste est nickel. :love:
    Contenu sponsorisé


      La date/heure actuelle est Dim 30 Avr 2017 - 13:02