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.



    Agnïeszka
    Agnïeszka
    FémininAge : 24Messages : 41

    le Sam 10 Jan 2015 - 21:27

    merci :)
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 33Messages : 84

    le Mar 20 Jan 2015 - 18:20

    Merci ^^



    .
    Chorks
    Chorks
    MasculinAge : 22Messages : 32

    le Mer 21 Jan 2015 - 1:24

    Très beau merci! ^^
    patriciadpt30
    patriciadpt30
    FémininAge : 56Messages : 240

    le Lun 26 Jan 2015 - 23:07

    Merci :)



    Patricia :)
    Rudein
    Rudein
    FémininAge : 22Messages : 83

    le Dim 15 Fév 2015 - 23:17

    merci beaucoup !
    Lady Doll
    Lady Doll
    FémininAge : 30Messages : 101

    le Mar 17 Fév 2015 - 12:57

    merci =)
    Paradéo
    Paradéo
    FémininAge : 21Messages : 21

    le Mar 17 Fév 2015 - 14:48

    merciiii !
    L'Epineuse
    L'Epineuse
    FémininAge : 24Messages : 32

    le Mar 17 Fév 2015 - 14:54

    merci du partage !
    Faraday
    Faraday
    FémininAge : 28Messages : 39

    le Mar 17 Fév 2015 - 16:12

    Thank's
    Nox
    Nox
    FémininAge : 19Messages : 8

    le Lun 23 Fév 2015 - 21:31

    merci !



    Mise en forme des Sous-forums - Page 4 226103Signanoxutopia
    Litonya
    Litonya
    FémininAge : 17Messages : 149

    le Dim 1 Mar 2015 - 19:05

    Mici
    Amacky
    Amacky
    FémininAge : 27Messages : 135

    le Mar 10 Mar 2015 - 10:05

    Merci :)
    Lakia
    Lakia
    FémininAge : 21Messages : 114

    le Mer 25 Mar 2015 - 13:27

    Merci ! :)
    Petit Prince
    Petit Prince
    MasculinAge : 26Messages : 26

    le Mar 31 Mar 2015 - 17:06

    Merci beaucoup. Très beau rendu.
    Romee
    Romee
    FémininAge : 24Messages : 40

    le Mer 1 Avr 2015 - 15:17

    SUPERBE ! :)



    Mise en forme des Sous-forums - Page 4 Tumblr_nno4a4w5gs1riczrxo4_500
    Ghabriel
    Ghabriel
    MasculinAge : 22Messages : 13

    le Jeu 2 Avr 2015 - 23:30

    Merci !
    Saphire
    Saphire
    FémininAge : 21Messages : 146

    le Mer 8 Avr 2015 - 17:15

    merciiiiii
    Asunie
    Asunie
    FémininAge : 27Messages : 68

    le Jeu 23 Avr 2015 - 13:56

    Merci ! Very Happy
    Anonymous
    Invité

    le Ven 24 Avr 2015 - 5:10

    Thanks ♥
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Dim 3 Mai 2015 - 21:16

    super merci
    Reiõ
    Reiõ
    MasculinAge : 26Messages : 206

    le Lun 4 Mai 2015 - 2:53

    Merci bien ! o/
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Mar 12 Mai 2015 - 9:19

    oh merci !



    Mise en forme des Sous-forums - Page 4 121217030106243656
    Haniwa
    Haniwa
    FémininAge : 24Messages : 206

    le Lun 18 Mai 2015 - 15:18

    Merci
    Scythe
    Scythe
    FémininAge : 28Messages : 40

    le Lun 15 Juin 2015 - 14:40

    Pratique, merci !
    Lilynufare
    Lilynufare
    FémininAge : 28Messages : 341

    le Mer 17 Juin 2015 - 20:17

    oh merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 17 Juil 2019 - 13:17