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

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 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.



    avatar
    Nymeria.
    FémininAge : 23Messages : 307

    le Mar 14 Oct 2014 - 23:10

    Exactement ce que je cherchais. Pouvons-nous changer les couleurs cependant ?
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Mer 15 Oct 2014 - 16:04

    Salut,

    Oui, tu peux personnaliser les tutos que tu trouveras sur Never autant que tu veux. La seule condition c'est de garder le crédit =)



     
    .erin
    FémininAge : 23Messages : 28

    le Sam 18 Oct 2014 - 17:14

    merci :)
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Lun 20 Oct 2014 - 18:04

    Cool ! Merci
    avatar
    reshiram44
    MasculinAge : 20Messages : 380

    le Mar 21 Oct 2014 - 20:50

    merci



    avatar
    Prisver
    FémininAge : 18Messages : 33

    le Mer 29 Oct 2014 - 19:51

    Merci !
    avatar
    Jibunnie
    FémininAge : 20Messages : 105

    le Mer 29 Oct 2014 - 20:59

    Merci P'tit Nyo Very Happy
    avatar
    Nasu
    FémininAge : 21Messages : 70

    le Ven 7 Nov 2014 - 14:37

    Merci ! :)
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Sam 8 Nov 2014 - 10:32

    Merci !
    Claclou02
    FémininAge : 20Messages : 46

    le Sam 8 Nov 2014 - 11:40

    Merci !
    avatar
    Givrix
    MasculinAge : 21Messages : 203

    le Mar 18 Nov 2014 - 15:17

    merci



    avatar
    The One Pandemonium
    FémininAge : 25Messages : 97

    le Mar 18 Nov 2014 - 15:52

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    avatar
    Crowley
    FémininAge : 22Messages : 68

    le Mer 19 Nov 2014 - 12:38

    Merci pour le partage :)
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Dim 23 Nov 2014 - 7:14

    Merci pour le partage
    avatar
    Akina-chan
    FémininAge : 25Messages : 138

    le Dim 30 Nov 2014 - 17:12

    Mefci <3
    avatar
    Melgreb
    MasculinAge : 38Messages : 21

    le Jeu 4 Déc 2014 - 1:37

    très joli, merci :)
    avatar
    EmYasmina
    FémininAge : 18Messages : 85

    le Sam 6 Déc 2014 - 13:50

    Merci!
    avatar
    kyoichii
    MasculinAge : 24Messages : 32

    le Sam 6 Déc 2014 - 15:02

    merci!
    avatar
    Solitude
    FémininAge : 43Messages : 286

    le Mer 10 Déc 2014 - 17:58

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    lexia2mars
    FémininAge : 19Messages : 15

    le Dim 21 Déc 2014 - 18:42

    Merci ! ^o^
    Kakure
    FémininAge : 23Messages : 13

    le Dim 28 Déc 2014 - 19:21

    Merci beaucoup! ^^
    avatar
    Harmonia
    FémininAge : 20Messages : 110

    le Lun 29 Déc 2014 - 12:02

    Merci owo c'est jolie
    avatar
    Invité

    le Lun 29 Déc 2014 - 16:07

    Very Happy
    avatar
    Notch
    MasculinAge : 67Messages : 12

    le Mar 30 Déc 2014 - 18:53

    C'est stylé
    avatar
    Lou'
    FémininAge : 28Messages : 99

    le Mer 31 Déc 2014 - 14:16

    Merci beaucoup <3
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Sep 2018 - 17:51