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.


    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.



    Rhoswen Fay
    Rhoswen Fay
    FémininAge : 32Messages : 66

    le Mar 23 Juin 2015 - 19:46

    merci !
    Djeina
    Djeina
    FémininAge : 22Messages : 233

    le Ven 17 Juil 2015 - 2:56

    Wow magnifique, merci ^^
    Sylfaen
    Sylfaen
    FémininAge : 21Messages : 69

    le Lun 3 Aoû 2015 - 23:16

    Merci beaucoup ! ^_^
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2072

    le Mar 4 Aoû 2015 - 14:10

    Merci ! ヽ(;▽;)ノ
    avatar
    Phénix'
    FémininAge : 17Messages : 93

    le Mar 4 Aoû 2015 - 18:52

    Merci ! :3
    Dodolovelove
    Dodolovelove
    FémininAge : 32Messages : 38

    le Mer 5 Aoû 2015 - 14:05

    ça a l'air parfait! Merci!^^
    Emi.
    Emi.
    FémininAge : 28Messages : 58

    le Dim 9 Aoû 2015 - 23:07

    merci, j'espère arriver à ce que je veux faire ^^
    ptite_perle
    ptite_perle
    FémininAge : 55Messages : 125

    le Mar 1 Sep 2015 - 20:43

    Merci pour le partage :)



    Mise en forme des Sous-forums - Page 5 Signature
    petit lu
    petit lu
    FémininAge : 26Messages : 184

    le Jeu 3 Sep 2015 - 15:57

    Merci tu partages c'est très jolis ♥
    Lessien
    Lessien
    FémininAge : 37Messages : 163

    le Jeu 3 Sep 2015 - 23:07

    Merci !
    Fizzz
    Fizzz
    FémininAge : 25Messages : 17

    le Sam 5 Sep 2015 - 17:40

    mercii !
    Deadpoolio
    Deadpoolio
    MasculinAge : 29Messages : 277

    le Sam 19 Sep 2015 - 15:10

    Merci :)
    Mathou2
    Mathou2
    FémininAge : 28Messages : 15

    le Dim 27 Sep 2015 - 20:43

    Merciiii !!! Very Happy
    neochrome_ltd
    neochrome_ltd
    MasculinAge : 37Messages : 63

    le Lun 28 Sep 2015 - 17:24

    Merci
    Ivelyne
    Ivelyne
    FémininAge : 26Messages : 45

    le Mer 28 Oct 2015 - 9:11

    Merci Very Happy
    SvenO
    SvenO
    MasculinAge : 25Messages : 78

    le Mer 4 Nov 2015 - 22:54

    Merci !



    Mise en forme des Sous-forums - Page 5 703037Bann
    Tit_Kiwi
    Tit_Kiwi
    FémininAge : 27Messages : 26

    le Lun 16 Nov 2015 - 11:40

    Merci beaucoup :heart:
    lacoste
    lacoste
    MasculinAge : 25Messages : 30

    le Lun 21 Déc 2015 - 3:57

    merci c est super se que vous faite
    Anonymous
    Invité

    le Sam 9 Jan 2016 - 0:05

    C'est tout mignon, merciiii :love:
    Skullewen
    Skullewen
    FémininAge : 23Messages : 17

    le Lun 11 Jan 2016 - 17:33

    merci
    Mlle-C
    Mlle-C
    FémininAge : 24Messages : 20

    le Lun 11 Jan 2016 - 22:36

    Merci beaucoup c'est magnifique :love:
    Ciàran
    Ciàran
    FémininAge : 28Messages : 187

    le Mar 12 Jan 2016 - 13:26

    merci
    Biditoche
    Biditoche
    FémininAge : 26Messages : 32

    le Mar 12 Jan 2016 - 16:42

    Très pratique, merci !
    Sandym
    Sandym
    FémininAge : 32Messages : 20

    le Dim 17 Jan 2016 - 17:27

    merci
    Zekarant
    Zekarant
    MasculinAge : 18Messages : 51

    le Sam 30 Jan 2016 - 15:57

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2019 - 2:50