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 :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

    Mise en forme des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 13:24



    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.



    Neva
    Neva
    FémininAge : 32Messages : 18565

    Jeu 12 Juin 2014 - 11:00

    Annoté et tout ! Merci Nyo :)



     
    Anéa
    Anéa
    FémininAge : 34Messages : 157

    Jeu 12 Juin 2014 - 15:39

    Oh c'est surement ce que je recherche ! Merci pour le partage ^^



    Mise en forme des Sous-forums 305535lulupsdcopie
    Shinju.dot
    Shinju.dot
    FémininAge : 34Messages : 88

    Ven 13 Juin 2014 - 16:49

    merci
    avatar
    Nivan
    FémininAge : 26Messages : 13

    Dim 15 Juin 2014 - 17:29

    Merci
    Lisou
    Lisou
    FémininAge : 23Messages : 351

    Dim 15 Juin 2014 - 19:42

    Merci ♥
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Dim 15 Juin 2014 - 19:43

    Merci du partage ^^



    Mise en forme des Sous-forums 30xivrd
    LittleChan
    LittleChan
    FémininAge : 33Messages : 62

    Lun 16 Juin 2014 - 0:17

    Merki ^^



    Mise en forme des Sous-forums 34ex18y
    Patou972
    Patou972
    FémininAge : 45Messages : 175

    Lun 16 Juin 2014 - 0:28

    merci beaucoup
    Miyoko
    Miyoko
    FémininAge : 31Messages : 213

    Mer 18 Juin 2014 - 19:29

    merci pour le code



    Mise en forme des Sous-forums 641359838739
    avatar
    misakii
    FémininAge : 26Messages : 37

    Ven 20 Juin 2014 - 19:24

    mercii^^
    Ohkawa
    Ohkawa
    FémininAge : 26Messages : 14

    Ven 27 Juin 2014 - 21:47

    Merci !



    Mise en forme des Sous-forums Sign_l11
    Méandre.
    Méandre.
    FémininAge : 26Messages : 95

    Sam 28 Juin 2014 - 0:14

    Merci !
    Ceecemel
    Ceecemel
    FémininAge : 26Messages : 36

    Sam 28 Juin 2014 - 15:09

    Merciiii
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Sam 28 Juin 2014 - 16:02

    Superbe
    taissafarmiga
    taissafarmiga
    FémininAge : 23Messages : 6

    Sam 28 Juin 2014 - 17:00

    Merci :)
    Snapforum
    Snapforum
    MasculinAge : 36Messages : 23

    Lun 7 Juil 2014 - 13:41

    Merci :)
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Mar 8 Juil 2014 - 10:45

    Merci
    Milka
    Milka
    FémininAge : 35Messages : 112

    Sam 12 Juil 2014 - 10:30

    Merci pour le partage :)
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Ven 18 Juil 2014 - 14:17

    Merci :)
    Sachem
    Sachem
    FémininAge : 27Messages : 51

    Lun 21 Juil 2014 - 19:34

    Merci beaucoup !!
    Nalyana
    Nalyana
    FémininAge : 26Messages : 26

    Lun 21 Juil 2014 - 21:11

    Sympa ! Merci :)
    Acédie
    Acédie
    FémininAge : 25Messages : 91

    Mar 22 Juil 2014 - 9:48

    Merci ♥
    Acédie
    Acédie
    FémininAge : 25Messages : 91

    Mar 22 Juil 2014 - 15:38

    Par contre j'arrive pas à voir les liens des sous forums dans la deuxième colonne et je ne sais pas comment les mettre :/
    Illiade
    Illiade
    FémininAge : 31Messages : 21

    Mar 22 Juil 2014 - 17:09

    Merci beaucoup pour le code, je vais également le tester en plus de l'autre que tu as gentiment fourni !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 5:54