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.


    Mise en forme des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 25Messages : 5018

    le Ven 30 Mai 2014 - 13:24

    Rappel du premier message :



    Sous-Forums



    Ceci est un code de sous-forums crée suite à la Demande de Araik, ici.

    Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    L'image des sous-forums pour indiquer nouveaux messages/pas de nouveaux messages/verrouillé doit être en 130px*130px. Sinon, il faudra faire des modifications sur le code de positionnement de l'image!
    Notez également qu'il n'y a pas de mise en forme des catégories! En effet, la demande était faite sur des catégories rétractables!


    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\  Repérez la partie comprise entre BEGIN catrow et END forumrow et remplacez-la par le code ci-dessous  /!\ :
    Code:
       <!-- BEGIN catrow --><!-- BEGIN tablehead --><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>
           </tr>
           <!-- END tablehead -->
           <!-- 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 -->
           <!-- BEGIN forumrow -->
           <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
              <!-- END inc -->
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
           <div class="contour_gris_cat">
              <h{catrow.forumrow.LEVEL} class="hierarchy">
                    <div class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                    </div>
                </h{catrow.forumrow.LEVEL}>
                  <div class="cate_bas">
              <div class="descript_caté_entoure"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                <div class="liens_ss_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
                    <div class="position_messages_cat">
                  <div class="last_mess_nyo"><span class="gensmall">{catrow.forumrow.LAST_POST}<br/>{catrow.forumrow.TOPICS} sujets<br/>{catrow.forumrow.POSTS} messages</span></div>
                  <div class="new_images">
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
           </div>
                    </div>
                  </div>
                <script type="text/javascript">
                jQuery(function(){
                 var separator = "<br />";
                   jQuery('span#subforums').each(function(){
                    var links = jQuery(this).find("a");
                    if(links.length > 1){
                       var html = "";
                       links.each(function(i){
                             html += "<a href='"+jQuery(this).attr('href')+"'  title=\""+jQuery(this).attr('title')+"\" class='gensmall'>"+jQuery(this).text()+"</a>";
                         if(i+1 != links.length){
                            html += separator;
                         }
                       });
                       jQuery(this).html(html);
                    }
                    jQuery(this).removeAttr('id');
                   });
                });
              </script>
           </div>
        </td>
          </tr>
          <!-- END forumrow -->

    Le CSS:
    Code:
       /***** DÉBUT CATÉ *******/
        /* Permet de retirer le fond du titre de catégorie */
        .secondarytitle {
          background: none;
        }

        /* Permet de mettre de l'espace entre les sous-forums et retirer le fond de table */
        .cat-table .forumline .row1, .cat-table .forumline .row2, .cat-table .forumline .row3, .cat-table .forumline .row3Right {
          background: none;
          padding-bottom: 50px;
        }

        /* Retire les fond de tables derrières les sous-forums */
        .cat-table td.row1, .cat-table td.row3.over:hover {
            background: none;
        }

        /* Retire les fond de tables derrières les sous-forums */
        .cat-table td.row1.over:hover, .cat-table td.row2 {
            background: none;
        }

        /* Contour des sous-forums */
        .contour_gris_cat {
          width: 730px;
          height: 260px;
          margin: auto;
          overflow: hidden;
          border-radius: 20px;
          /* Couleur de fond des sous-forums */
          background-color: #999999;
        }

         /* Placement des liens et titres du sous-forum */
        .forumlink {
          margin-left: 30px;
          margin-top: 10px;
          width: 425px;
          height: 25px;
          padding-top: 5px;
          padding-bottom: 5px;
          border-radius: 50px;
          background-color: #CCCCCC;
          text-align: center;
        }

        /* Effet sur les liens de sous-forums */
        a.forumlink {
          margin: 0;
          font-size: 18px;
          transition: all ease 1s;
        }

        /* Au passage de la souris */
        a.forumlink:hover,a.forumlink:link, a.forumlink:focus {
          text-decoration:none !important;
          font-size: 18px;
          transition: all ease 1s;
        }

        /* Mise en place des trois parties */
        .cate_bas {
          width: 100%;
          padding-top: 15px;
          padding-left: 10px;
        }

        /* Bloc de description des catégories */
        .descript_caté_entoure {
          width: 350px;
          height: 190px;
          float: left;
          overflow: hidden;
          border-radius: 10px;
          margin-right: 10px;
          /* Couleur de fond */
          background-color: #666666;
        }

        /* Lien vers les sous-forums */
        .liens_ss_forum {
          width: 120px;
          height: 170px;
          float: left;
          /* Alignement */
          text-align: center;
          border-radius: 10px;
          padding: 10px;
          margin-left: 10px;
          margin-right: 15px;
          /* Couleur de fond */
          background-color: #666666;
        }

        /* Effet sur les liens vers les sous-forums */
        .liens_ss_forum a {
          letter-spacing: 1px;
          transition: all ease 1s;
        }

        /* Effet au passage de la souris */
        .liens_ss_forum a:hover {
          letter-spacing: 3px;
          text-decoration:none !important;
          transition: all ease 1s;
        }

        /* Positionnement du dernier message  */
        .position_messages_cat {
          float: left;
          width: 150px;
          height: 170px;
          position: relative;
          margin-left: 10px;
        }
        
       /* Positionnement de l'image des derniers messages */
        .new_images {
          position: absolute;
          top: -30px;
          left: 7px;
        }

        /* Transformer l'image en rond */
        .new_images img {
          border-radius: 50%;
        }

        /* Mise en forme du dernier message */
        .last_mess_nyo {
          position: absolute;
          top: 60px;
          left: 0;
          padding-top: 45px;
          width: 150px;
          height: 85px;
          border-radius: 10px;
          /* Couleur de fond */
          background-color: #666666;
          text-align: center;
        }
        /***** FIN CATÉ *******/

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Kilda
    Kilda
    FémininAge : 39Messages : 73

    le Mar 2 Fév 2016 - 22:17

    merci
    ClaryF
    ClaryF
    FémininAge : 29Messages : 137

    le Dim 21 Fév 2016 - 14:03

    Merci !
    Trimens
    Trimens
    FémininAge : 21Messages : 38

    le Lun 22 Fév 2016 - 10:17

    Merci ! ♥
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Mer 20 Avr 2016 - 19:06

    Merci
    Lilise
    Lilise
    FémininAge : 21Messages : 22

    le Mar 26 Avr 2016 - 23:31

    Merci beaucoup!
    marie-noelle
    marie-noelle
    FémininAge : 62Messages : 110

    le Dim 8 Mai 2016 - 17:59

    merci
    -Resis
    -Resis
    MasculinAge : 23Messages : 25

    le Mer 11 Mai 2016 - 21:38

    thank You very Much
    HinaK
    HinaK
    MasculinAge : 27Messages : 2

    le Jeu 26 Mai 2016 - 22:02

    Merci
    Sighild
    Sighild
    FémininAge : 32Messages : 219

    le Mar 31 Mai 2016 - 19:48

    Je suis curieuse. Merci beaucoup!
    pawnee
    pawnee
    FémininAge : 30Messages : 21

    le Sam 4 Juin 2016 - 23:00

    j'aime beaucoup !
    Chatchoum
    Chatchoum
    FémininAge : 27Messages : 43

    le Lun 6 Juin 2016 - 13:29

    Merci :)
    o.dream
    o.dream
    FémininAge : 31Messages : 11

    le Dim 11 Sep 2016 - 14:31

    merci!
    AshleyV&WK
    AshleyV&WK
    FémininAge : 23Messages : 10

    le Jeu 15 Sep 2016 - 18:58

    Superbe ! Merci !
    Bryan1997
    Bryan1997
    MasculinAge : 22Messages : 51

    le Jeu 3 Nov 2016 - 21:07

    merci
    Seohyunnie
    Seohyunnie
    FémininAge : 23Messages : 22

    le Jeu 1 Déc 2016 - 0:20

    Merci !
    sweetheart.
    sweetheart.
    FémininAge : 32Messages : 120

    le Lun 5 Déc 2016 - 19:03

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Youlia
    Youlia
    FémininAge : 26Messages : 28

    le Mar 6 Déc 2016 - 10:40

    merci du partage Wink
    Sangohan
    Sangohan
    MasculinAge : 22Messages : 6

    le Sam 10 Déc 2016 - 14:17

    merci
    Puale
    Puale
    MasculinAge : 23Messages : 18

    le Dim 11 Déc 2016 - 15:42

    Merci !
    Nyotengu
    Nyotengu
    FémininAge : 25Messages : 85

    le Mar 10 Jan 2017 - 11:52

    merci
    Giovale
    Giovale
    MasculinAge : 27Messages : 16

    le Mar 31 Jan 2017 - 23:36

    Merci !
    sturdya
    sturdya
    FémininAge : 21Messages : 34

    le Lun 6 Fév 2017 - 23:36

    merci
    Lalia
    Lalia
    FémininAge : 20Messages : 44

    le Dim 19 Fév 2017 - 14:58

    Merci! x3
    Kaleessi
    Kaleessi
    FémininAge : 27Messages : 75

    le Ven 24 Fév 2017 - 19:31

    J'aime bien!! :) Merci du partage Very Happy
    Lealily
    Lealily
    FémininAge : 28Messages : 20

    le Mar 28 Fév 2017 - 3:12

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 14 Nov 2019 - 15:35