Modification d'un template en LS

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageModification d'un template en LS Dim 18 Sep - 9:33
Bonjour à vous,

Toujours en pleine construction de mon forum, je poursuis sa personnalisation, avec cette fois, le codage des catégories. J'ai choisie ce LS : http://www.aht.li/2909228/CAT40.png, que je trouve très bien penser. J'aime la façon dont est placé l'avatar du dernier posteur et au niveau de la taille, ça correspond parfaitement à mon forum.

J'ai personnalisé deux ou trois petites choses, notamment au niveau de l'avatar du dernier posteur, et j'ai supprimé certains liens qui ne me plaisait pas sur l'index (ce qui permet de voir les messages sans réponses, entre autre chose.

Voici ma css modifié :

Code:
   /* HAUT CATEGORIE */
    .tleCAT{
    margin:5px auto 0; width:800px; padding:10px 0; text-align:center;
    background:coral; /* MODIFIABLE */
    }
    /* TITRE CATEGORIE */
    .tleCAT h2{
    margin:0; font-size:32px; text-transform:uppercase; letter-spacing:3px;
    color:white; font-family:Arial; /* MODIFIABLE */
    }
    /* BLOC CATEGORIE */
    .mdlCAT {
    margin:auto; width:800px; padding:25px 0 10px;
    background:lightgrey; /* MODIFIABLE */
    }
    /* BAS CATEGORIE */
    .btmCAT {
    margin:0 auto 10px; width:800px;
    height:20px; border-radius:0 0 15px 15px; background:#191919; /* MODIFIABLE */
    }
    /* BLOC FORUM */
    .FRM {
    margin:auto; margin-bottom:15px;
    width:800px; text-align:center;
    }
    /* ICÔNES FORUM */
    .imgFRM{
    display:inline-block; vertical-align:bottom;
    width:50px; height:95px;
    }
    /* BLOC POSITIONNEMENT FORUM */
    .boxFRM {
    display:inline-block; vertical-align:top;
    }
    /* BLOC TITRE FORUM */
    .tleFRM {
    margin:auto; margin-bottom:5px;
    width:405px; height:15px; padding:5px 0 5px 10px;
    text-transform:uppercase; text-align:left; font-size:11px;
    background:coral; /* MODIFIABLE */
    }
    /* TITRE FORUM */
    .tleFRM a{
    color:black !important;  /* MODIFIABLE */
    transition:all 1.25s; -webkit-transition:all 1.25s;
    }
    /* SURVOL TITRE FORUM */
    .tleFRM:hover a {
    padding-left:10px; color:white !important; /* MODIFIABLE */
    }
    /* DESCRIPTION FORUM */
    .descFRM {
    margin:0 15px;
    width:405px; height:55px; padding:5px; overflow:auto;
    font-size:11px; text-align:justify;
    background:#303030; color:white; /* MODIFIABLE */
    }
    /* DERNIER MESSAGE FORUM */
    .lmsgFRM {
    display:inline-block; vertical-align:top;
    width:225px; height:58px; padding:7px 0 0 15px;
    text-align:left; font-size:12px; text-transform:uppercase;
    background:#303030; color:white; /* MODIFIABLE */
    }
    /* NOMBRE SUJETS & MESSAGES FORUM */
    .nbFRM {
    margin-top:5px; height:15px; padding:5px; padding-left:10px;
    font-size:11px; text-transform:uppercase; text-align:left;
    background:coral; color:white; /* MODIFIABLE */
    }
    /* AVATAR DERNIER POSTEUR FORUM */
    #avaFRM {
    position:absolute; margin-left:170px; margin-top:-41px;
    width:45px; height:70px; overflow:hidden;
    border-left: 1px #ffffff solid; border-right: 1px #ffffff solid; border-top: 1px #ffffff solid; border-bottom: 1px #ffffff solid;
    box-shadow: 2px 2px 0px black; background:grey;
    filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%);
    }
    #avaFRM img {
    width:50px;
    }
    /* SOUS-FORUMS */
    .sfFRM {
    margin:5px auto 0; width:735px;
    text-align:left; color:rgba(0,0,0,0);
    }
    /* LIEN SOUS-FORUM */
    .sfFRM a{
    display:inline-block; padding:5px 10px;
    text-transform:uppercase; text-align:center; font-size:10px;
    background:grey; color:white !important; /* MODIFIABLE */
    }

Et mon template modifié :
Code:
   <table width="800px" border="0" cellspacing="1" cellpadding="0" align="center">
         <tr>
         <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
        
        
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
         </td>
         <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
           <center><div class="der-mess"><a class="gensmall" style="font-size:15px;" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></div></center><br />
        
         <!-- END switch_user_logged_in -->
        
         </td>
         </tr>
        </table>
    
     <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
     <div class="mdlCAT">
        <!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
         <div class="FRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="boxFRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}<div id="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div><div class="nbFRM">{catrow.forumrow.TOPICS} sujets  ↠ {catrow.forumrow.POSTS} messages</div></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
         <!-- END forumrow -->
        
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
     </div><div class="btmCAT"></div>
        <!-- END tablefoot --><!-- END catrow -->

Ce que je cherche à faire, c'est mettre les sous-forums entre l'image 50*95 et le descriptif de la catégorie (du coup, le cadre du descriptif serait plus petit), et non en dessous comme c'est le cas actuellement. Mais je ne sais pas comment m'y prendre.

Merci d'avance !
Revenir en haut Aller en bas
MessageRe: Modification d'un template en LS Mar 20 Sep - 11:32
avatar
Nombre de messages : 843
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Bonjour,

Remplacez l'intégralité du template index_box par :

Code:
<table width="800px" border="0" cellspacing="1" cellpadding="0" align="center">
            <tr>
            <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
           
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
            </td>
            <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
              <center><div class="der-mess"><a class="gensmall" style="font-size:15px;" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></div></center>
            <!-- END switch_user_logged_in -->
           
            </td>
            </tr>
            </table>
       
 
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
            <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT">
            <!-- END tablehead -->

            <!-- BEGIN cathead -->
            <!-- END cathead -->
           
            <!-- BEGIN forumrow -->
            <div class="FRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="boxFRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}<div id="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div><div class="nbFRM">{catrow.forumrow.TOPICS} sujets  ↠ {catrow.forumrow.POSTS} messages</div></div></div>
            <!-- END forumrow -->
           
            <!-- BEGIN catfoot -->
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
        </div><div class="btmCAT"></div>
            <!-- END tablefoot --><!-- END catrow -->

Et la partie CSS par :
Code:
/* HAUT CATEGORIE */
.tleCAT{
margin:5px auto 0; width:800px; padding:10px 0; text-align:center;
background:coral; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0; font-size:32px; text-transform:uppercase; letter-spacing:3px;
color:white; font-family:Arial; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px; padding:25px 0 10px;
background:lightgrey; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:0 auto 10px; width:800px;
height:20px; border-radius:0 0 15px 15px; background:#191919; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:auto; margin-bottom:15px;
width:800px; text-align:center;
}
/* ICÔNES FORUM */
.imgFRM{
display:inline-block; vertical-align:bottom; margin-right:15px;
width:50px; height:95px;
}
/* BLOC POSITIONNEMENT FORUM */
.boxFRM {
display:inline-block; vertical-align:top;
}
/* BLOC TITRE FORUM */
.tleFRM {
margin:auto; margin-bottom:5px; margin-right:15px;
width:405px; height:15px; padding:5px 0 5px 10px;
text-transform:uppercase; text-align:left; font-size:11px;
background:coral; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
color:black !important;  /* MODIFIABLE */
transition:all 1.25s; -webkit-transition:all 1.25s;
}
/* SURVOL TITRE FORUM */
.tleFRM:hover a {
padding-left:10px; color:white !important; /* MODIFIABLE */
}
/* SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:135px; height:65px; overflow:auto;
text-align:left; color:rgba(0,0,0,0); line-height:2px;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
display:block; padding:5px 10px;
text-transform:uppercase; text-align:center; font-size:10px; line-height:14px;
background:grey; color:white !important; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block; vertical-align:top; margin-left:5px; margin-right:15px;
width:265px; height:55px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:#303030; color:white; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top;
width:225px; height:58px; padding:7px 0 0 15px;
text-align:left; font-size:12px; text-transform:uppercase;
background:#303030; color:white; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
margin-top:5px; height:15px; padding:5px; padding-left:10px;
font-size:11px; text-transform:uppercase; text-align:left;
background:coral; color:white; /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
#avaFRM {
position:absolute; margin-left:170px; margin-top:-41px;
width:45px; height:70px; overflow:hidden;
border-left: 1px #ffffff solid; border-right: 1px #ffffff solid; border-top: 1px #ffffff solid; border-bottom: 1px #ffffff solid;
box-shadow: 2px 2px 0px black; background:grey;
filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%);
}
#avaFRM img {
width:50px;
}
Revenir en haut Aller en bas
MessageRe: Modification d'un template en LS Mer 21 Sep - 8:17
Merci beaucoup ! C'est parfait :)
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CCCrush. :: Exposition NLDD :: Intruders :: Réalisés-