AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    [HTML5 & CSS3] - Catégories & forums modernes

    Fangs
    Fangs
    MasculinAge : 106Messages : 91

    Mer 1 Juil 2015 - 18:58




    Catégories et forums modernes

    Bonjour à tous !  cheers


    Me voici avec un nouveau libre service ! Ca faisait très longtemps que j'avais pas codé et du coup cet après midi je me suis dit qu'il était temps de s'y remettre !


    Ce que je vous propose la c'est une mise en page des catégories et forums que j'aime pas mal. Je me suis bien débrouillé :)


    Pour avoir un petit aperçu je vous invite à regarder cette image. (À noter que la description de forum apparaît au survol de l'image).


    Il y a donc trois étapes à suivre pour ce LS donc:
    - Le HTML dans les templates
    - Le CSS
    - Quelques codes dans la description de vos forums et dans votre titres de catégories


    Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2 ou PUNBB.

    Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:

    Assez parlé, tout d'abord on va premièrement se rendre dans le template 'index-box'. Vous allez tout selectionner et remplacer par 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>
    <div class="index_fc">
    <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="categorie">{catrow.tablehead.L_FORUM}</div>
       <!-- END tablehead -->
       <!-- BEGIN forumrow -->
          <div class="forum">
                    <div class="forum_case">
                         <div class="description">
                            {catrow.forumrow.FORUM_DESC}
                         </div>
                         <div class="bottom_section"></div>
                         <div class="bottom_border"></div>                  
                         <div class="forum_name">
                               <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                         </div>
                         <div class="tnm">
                            {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                         </div>
                    </div>
          </div>
       <!-- END forumrow -->

    <!-- END catrow -->
    </div>

    N'oubliez pas de publier votre template. Donc à ce stade-ci, votre forum doit être aussi laid que possible. C'est pourquoi nous allons nous occuper des CSS, et plus particulièrement ceux-ci que vous allez coller dans vos feuilles de style:

    Code:

    /* DEBUT MISE EN PAGE CATEGORIES ET FORUMS - FANGS */
    /* clearfix categorie - regle un bug*/
    .index_fc::after {
      clear: both;
      content: "";
      display:block;
    }

    .categorie {
      position: relative;
      clear: both;
      height: 50px;
      position: relative;
      margin-top: 50px;
      margin-bottom: -18px;
      margin-left: 35px;
      z-index: 2;
    }

    .categorie_txt {
      position: relative;
      font-size: 40px;
      font-family: 'Josefin Slab', Georgia, serif;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      text-align: right;
    }

    .forum {
      width: 980px;
      margin: auto !important;
    }

    .forum_case {
      float: left;
      width: 490px;
      height: 245px;
      background-color: #111418;
    }

    .description {
      position: relative;
      width:490px;
      height: 245px;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bottom_section {
      position: relative;
      margin-top: -40px;
      width: 490px;
      height: 40px;
      background-color: #fff;
      opacity: 0.3;
    }

    .bottom_border {
      position: relative;
      margin-top: -40px;
      width: 490px;
      height: 40px;
      border-top: 1px solid #fff;
    }

    .tnm {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width: 480px;
      margin-right: 11px;
      text-align: right;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000;
      font-family: Georgia, Arial, serif;
    }

    .forum_name {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width: 480px;
      margin-left: 10px;
      z-index: 2;
    }

    .forum_link {
      color: #fff !important;
      text-shadow: 1px 1px 2px #000;
      font-variant: small-caps !important;
      text-decoration: none;
      font-size: 16px;
      font-family: Georgia, Arial, serif;
    }

    .description_img {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
    }

    .description_img:hover {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
      opacity: 0.2;
    }

    .description_txt {
      position: relative;
      width: 460px;
      height: 215px;
      padding: 15px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      font-size: 12px;
      font-family: Georgia, Arial, serif;
      text-align: justify;
    }

    /* FIN MISE EN PAGE CATEGORIES ET FORUMS - FANGS */

    Les deux premières étapes sont terminées. Mais ce n'était que du copier-coller. Les deux porchaines risquent d'être un peu plus longues.


    Vous allez vous rentre dans la configuration de vos catégories et forums et pour chaque titre de catégories vous allez entrer ce code:


    Code:
    <span class="categorie_txt">Nom de votre catégorie</span>

    Et enfin vous allez vous rendre dans les description de vos forums et allez utiliser ce code:


    Code:
    <div class="description_txt">
           Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet.    
    </div>
    <div class="description_img">
          <img alt="**" src="URL DE L'IMAGE 490*245" />
    </div>

    Cette étape peut paraître longue mais elle est nécessaire.


    Bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



    Si vous avez une question, je vous rappelle que cette section est disponible !


    Mercurion
    Mercurion
    MasculinAge : 29Messages : 58

    Ven 3 Juil 2015 - 21:54

    Merci pour ce LS, c'est super joli :)
    LyN[ss]
    LyN[ss]
    FémininAge : 32Messages : 105

    Jeu 3 Sep 2015 - 3:13

    Je trouve cette mise en page super intéressante et originale comme tout. Je suis curieuse de voir comment tu t'y es pris pour obtenir ce résultat. Dans tous les cas, Merci pour ce partage =)
    Anonymous
    Invité

    Jeu 3 Sep 2015 - 8:48

    Merci (●`・(エ)・´●)
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Dim 27 Sep 2015 - 2:34

    Merci ^^



    .
    Morry
    Morry
    FémininAge : 40Messages : 28

    Dim 27 Sep 2015 - 18:22

    Merci :p



    [HTML5 & CSS3] - Catégories & forums modernes Signat13
    Grande
    Grande
    FémininAge : 36Messages : 207

    Mar 29 Déc 2015 - 4:59

    Merci



    [HTML5 & CSS3] - Catégories & forums modernes 171074gwenj10
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 4 Mar 2016 - 19:58

    Hello et désolée pour le retard! ^^
    Est-ce qu'au lieu d'un lien vers le forum, on pourrait avoir une capture d'écran s'il-te-plaît? Au cas où il y aurait suppression ou changement de design! ^^
    Merci d'avance! ^^



    Anonymous
    Invité

    Lun 16 Mai 2016 - 3:44

    Merci beaucoup pour ce code, j'adore le rendu que ça donne, c'est original :)
    Sheewps
    Sheewps
    MasculinAge : 23Messages : 23

    Ven 24 Juin 2016 - 18:09

    merci :p
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Sam 10 Sep 2016 - 18:07

    Merci pour ce partage, c'est super beau *o*
    Mariana Greyson
    Mariana Greyson
    FémininAge : 25Messages : 78

    Jeu 15 Sep 2016 - 22:41

    :)
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Mar 4 Oct 2016 - 10:08

    Merci très cool :)



    Patricia :)
    Donquichotte
    Donquichotte
    MasculinAge : 28Messages : 48

    Mer 5 Oct 2016 - 2:03

    mrci
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Jeu 6 Oct 2016 - 22:04

    Merci !!



    ....
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 15 Oct 2016 - 22:22

    Il y a vraiment personne qui écoute le "c'est un LS à corriger, pas touche", right?

    Whatever, j'ai corrigé le tout, donc c'est validé et ce sera bientôt déplacé dans le Libre Service.

    PS : Et j'adore le rendu, c'est sujet joli ♥



    avatar
    Lupa
    FémininAge : 27Messages : 183

    Lun 31 Oct 2016 - 18:37

    Splendide, merci pour ce beau partage =D



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    *-Atlas-*
    *-Atlas-*
    MasculinAge : 35Messages : 138

    Ven 23 Déc 2016 - 11:05

    Merci beaucoup joli travail



    [HTML5 & CSS3] - Catégories & forums modernes 539522Atlasnewban
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Mar 3 Jan 2017 - 22:41

    Merci c'est très joli
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Sam 25 Mar 2017 - 8:23

    merci Very Happy
    Örmée
    Örmée
    MasculinAge : 37Messages : 139

    Mer 29 Mar 2017 - 9:34

    Merci :)
    Mahogany
    Mahogany
    FémininAge : 30Messages : 54

    Lun 17 Avr 2017 - 17:34

    Superbe! Merci
    Oxilus
    Oxilus
    MasculinAge : 33Messages : 9

    Dim 30 Avr 2017 - 2:53

    Merci beaucoup :)
    Wildness
    Wildness
    MasculinAge : 31Messages : 16

    Dim 30 Avr 2017 - 17:20

    merci
    ¨Lame Spirit
    ¨Lame Spirit
    FémininAge : 26Messages : 35

    Mar 19 Sep 2017 - 15:23

    Arf magnifique ! merciiiii
    Contenu sponsorisé


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