AccueilRechercherS'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.

-8%
Le deal à ne pas rater :
Climatiseur réversible mobile BEKO BX112H (3400 watts – 12000 BTU)
599.99 € 649.99 €
Voir le deal

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

    Fangs
    Fangs
    MasculinAge : 102Messages : 91

    le Mer 1 Juil 2015 - 18:58

    Rappel du premier message :




    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 !


    Syler
    Syler
    FémininAge : 20Messages : 31

    le Mer 20 Sep 2017 - 18:07

    Merci énormément *^*
    Agartheus
    Agartheus
    MasculinAge : 35Messages : 6

    le Ven 17 Jan 2020 - 22:04

    merci c'est top OO
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mai 2020 - 20:03