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.

-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

    Mise en forme des Sous-forums

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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.



    InkBoy
    InkBoy
    MasculinAge : 31Messages : 66

    Mer 30 Juil 2014 - 14:47

    Merci pour ce codage de catégories



    Mise en forme des Sous-forums - Page 2 351tqox
    WhiteRaaven
    WhiteRaaven
    FémininAge : 27Messages : 39

    Jeu 7 Aoû 2014 - 13:34

    j'aime beaucoup, merci !
    Kreazen
    Kreazen
    FémininAge : 27Messages : 46

    Dim 10 Aoû 2014 - 23:57

    merci pour le code



    Arrow
    Saya Akimoto
    Saya Akimoto
    FémininAge : 38Messages : 130

    Ven 15 Aoû 2014 - 18:42

    Merci beaucoup, j'espère que ça va m'aider.



    Mise en forme des Sous-forums - Page 2 Signat11
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Ven 22 Aoû 2014 - 8:00

    merci Very Happy 
    Just4Adventure
    Just4Adventure
    MasculinAge : 29Messages : 48

    Ven 22 Aoû 2014 - 22:18

    Merci, je vais tester ça immédiatement sur mon forum. Wink
    Lamia
    Lamia
    FémininAge : 28Messages : 154

    Dim 24 Aoû 2014 - 21:28

    Merci !!
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Lun 25 Aoû 2014 - 11:31

    Merci !
    Runendoniel
    Runendoniel
    MasculinAge : 37Messages : 26

    Jeu 4 Sep 2014 - 12:15

    Merci :)



    Mise en forme des Sous-forums - Page 2 591479KitSweety2NeverUtopia
    avatar
    Del
    MasculinMessages : 110

    Mer 10 Sep 2014 - 23:35

    Merci.



    « Run you clever boy and remember... »
    Haaken
    Haaken
    FémininAge : 30Messages : 43

    Jeu 11 Sep 2014 - 21:37

    Merci !
    kevin85400
    kevin85400
    MasculinAge : 30Messages : 176

    Dim 14 Sep 2014 - 19:05

    merci



    Mise en forme des Sous-forums - Page 2 Sans_t11
    avatar
    Miyoshi
    FémininAge : 29Messages : 54

    Mer 17 Sep 2014 - 21:16

    C'est parfait ! Merci. :3
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Jeu 25 Sep 2014 - 3:32

    merci
    GeoNimo
    GeoNimo
    FémininAge : 39Messages : 48

    Ven 26 Sep 2014 - 14:57

    merci
    Nasu
    Nasu
    FémininAge : 27Messages : 70

    Sam 27 Sep 2014 - 8:21

    Oh merci, c'est ce que je cherchais. o.o
    Nonze
    Nonze
    MasculinAge : 30Messages : 85

    Mar 30 Sep 2014 - 22:36

    Merci
    avatar
    LunaRiza
    FémininAge : 30Messages : 29

    Sam 4 Oct 2014 - 13:42

    merchi *^*
    Ikigami
    Ikigami
    FémininAge : 35Messages : 37

    Sam 4 Oct 2014 - 16:34

    merci :)
    Kau
    Kau
    FémininAge : 22Messages : 148

    Dim 5 Oct 2014 - 3:25

    Trop cool, merci <3
    sandy13
    sandy13
    FémininAge : 34Messages : 15

    Lun 6 Oct 2014 - 21:11

    Merci
    Jack Sawyer
    Jack Sawyer
    MasculinAge : 40Messages : 15

    Mer 8 Oct 2014 - 12:04

    Merci
    Draly
    Draly
    FémininAge : 31Messages : 119

    Sam 11 Oct 2014 - 12:31

    Plutôt sympa, à tester.:p
    picka234
    picka234
    FémininAge : 59Messages : 636

    Sam 11 Oct 2014 - 13:32

    merci!!!
    C. Hook
    C. Hook
    FémininAge : 26Messages : 45

    Mar 14 Oct 2014 - 21:32

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 7:43