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 : -23%
OCEANIC – Table de cuisson induction 3 foyers ...
Voir le deal
99.99 €

    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.



    winji35
    winji35
    MasculinAge : 24Messages : 5

    Jeu 9 Mar 2017 - 20:30

    merci
    Ailla
    Ailla
    FémininAge : 25Messages : 32

    Dim 12 Mar 2017 - 12:17

    Merci !
    Saroush
    Saroush
    FémininAge : 25Messages : 6

    Sam 25 Mar 2017 - 16:35

    Merci !
    Fairytale
    Fairytale
    FémininAge : 27Messages : 22

    Jeu 27 Avr 2017 - 22:10

    Merci beaucoup ! ♥
    Amakhaza
    Amakhaza
    FémininAge : 21Messages : 52

    Dim 7 Mai 2017 - 16:39

    oooh merci beaucoup ♥ c'est très zoli
    charlint
    charlint
    FémininAge : 25Messages : 30

    Mar 9 Mai 2017 - 14:14

    merci Razz
    Corkyie
    Corkyie
    FémininAge : 27Messages : 75

    Dim 21 Mai 2017 - 23:32

    merci !
    Mellusa ~
    Mellusa ~
    FémininAge : 26Messages : 80

    Sam 22 Juil 2017 - 16:27

    Merci pour ce partage ~

    swgzl
    swgzl
    FémininAge : 28Messages : 12

    Lun 24 Juil 2017 - 16:00

    Merci beaucoup !
    ByulYong
    ByulYong
    FémininAge : 32Messages : 5

    Mar 12 Sep 2017 - 16:22

    Wow ! Merci beaucoup !
    Cendre de Lune
    Cendre de Lune
    FémininAge : 61Messages : 11

    Ven 22 Sep 2017 - 9:46

    merci
    Synchro
    Synchro
    MasculinAge : 52Messages : 13

    Mer 4 Oct 2017 - 14:38

    Sympa comme ça merci
    Newteen
    Newteen
    FémininAge : 35Messages : 61

    Ven 17 Nov 2017 - 15:37

    Merci pour le partage !



    "-Voudriez-vous me dire, s'il vous plaît, par où je dois m'en aller d'ici ?
    -Cela dépend beaucoup de l'endroit où tu veux aller.
    -Peu importe l'endroit...
    -En ce cas, peu importe la route que tu prendras.
    -... pourvu que j'arrive quelque part »
    Adein
    Adein
    MasculinAge : 34Messages : 46

    Dim 3 Déc 2017 - 14:02

    merci! :cow:
    Plumy
    Plumy
    FémininAge : 33Messages : 35

    Jeu 21 Déc 2017 - 22:30

    Merciiii
    Tony`s
    Tony`s
    MasculinAge : 33Messages : 64

    Ven 12 Jan 2018 - 8:34

    merci
    Alice's Substitute
    Alice's Substitute
    FémininAge : 29Messages : 12

    Sam 27 Jan 2018 - 5:05

    Merci pour le partage !
    lemonart
    lemonart
    FémininAge : 28Messages : 30

    Lun 26 Mar 2018 - 5:58

    Merci



    Mise en forme des Sous-forums - Page 7 Lemonart
    Yagami Suseri
    Yagami Suseri
    FémininAge : 33Messages : 18

    Lun 26 Mar 2018 - 14:37

    Merci Very Happy
    Yagami Suseri
    Yagami Suseri
    FémininAge : 33Messages : 18

    Lun 26 Mar 2018 - 14:38

    Merci Very Happy
    Shide
    Shide
    FémininAge : 35Messages : 60

    Lun 7 Mai 2018 - 12:11

    merçi
    Cath Graph
    Cath Graph
    FémininAge : 60Messages : 26

    Dim 23 Juin 2019 - 22:26

    Merci du partage



    Mise en forme des Sous-forums - Page 7 Signat10
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:42