Modification LS

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageModification LS Dim 4 Déc - 17:35
Bonjour !

Ayant vu votre dernière catégorie mise en LS (soit celle-ci : http://crushcrushcrush.actifforum.com/t83-49-categories#1645 )
J'aimerai modifier ce dernier et faire en sorte de mettre une image descriptive pour chaque catégorie en fond plutôt que d'avoir le fond de couleur fixe.

Je ne sais pas si cela vous aidera à y voir plus clair :
http://zupimages.net/up/16/48/av9c.png

Merci d'avance !
Revenir en haut Aller en bas
MessageRe: Modification LS Lun 5 Déc - 5:30
avatar
Nombre de messages : 891
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 -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </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 -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
        </tr>
        </table>
 
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
     <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->
    
        <!-- BEGIN cathead -->
        <!-- END cathead -->
    
        <!-- BEGIN forumrow -->
      <div id="FRM"><div class="FRM"><div id="avaFRM"><div class="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="boxIIFRM"><div class="nbFRM"><div>{catrow.forumrow.TOPICS}</div><div>{catrow.forumrow.POSTS}</div></div><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></div><div class="triFRM"></div><div class="lmsgFRM"><div>{catrow.forumrow.LAST_POST}</div></div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /></div></div>
        <!-- END forumrow -->
    
        <!-- BEGIN catfoot -->
        <!-- BEGIN inc -->
        <!-- END inc -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:5px auto;
width:800px; padding:20px 0; text-align:center;
background:#191919; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:42px; text-transform:uppercase; letter-spacing:3px;
font-family:Arial; color:white; /* MODIFIABLE */
}
/* BLOC FORUM */
#FRM {
margin:5px auto;
width:800px; height:160px; overflow:hidden; text-align:left;
background:#191919; /* MODIFIABLE */
}
.FRM {
position:relative;
width:800px; height:160px; overflow:hidden;
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
#avaFRM {
display:inline-block; vertical-align:top;
width:200px; height:150px; overflow:hidden;
}
.avaFRM {
position:relative; z-index:3; margin-left:-30px;
width:200px; height:150px; overflow:hidden;
background:#191919; /* MODIFIABLE */
transform:skew(-20deg); -webkit-transform:skew(-20deg);
}
.avaFRM img {
margin-left:60px; width:200px;
filter:grayscale(1); -webkit-filter:grayscale(1);
transform:skew(20deg); -webkit-transform:skew(20deg);
}
/* BLOC TITRE / NOMBRE SUJETS & MESSAGES / DESCRIPTION / SOUS-FORUMS */
.boxFRM {
display:inline-block; vertical-align:top;
width:490px; height:115px; padding-top:30px;
text-align:center; text-transform:uppercase;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.boxFRM:hover {
height:125px; padding-top:20px;
}
/* TITRE ET SA BORDURE FORUM  */
.tleFRM a{
position:relative; z-index:3;
padding-bottom:5px; border-bottom:1px solid;
border-bottom-color:rgba(250,250,250,0.5); color:white !important; /* MODIFIABLE */
text-transform:uppercase; font-size:24px; font-family:Arial;
}
.boxIIFRM {
margin-top:15px; height:75px; overflow:hidden;
}
/* BLOC NOMBRE SUJETS & MESSAGES */
.nbFRM {
position:relative; z-index:3; display:inline-block; vertical-align:top;
width:300px; font-size:24px; text-align:center;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.nbFRM div {
display:inline-block; vertical-align:top;  
width:100px; height:40px; padding-top:10px;
}
.boxFRM:hover .nbFRM{
margin-top:-50px;
}
/* NOMBRE SUJETS FORUM */
.nbFRM div:nth-of-type(1){
background:#FEFEFE; color:black; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbFRM div:nth-of-type(2){
margin-left:10px;
background:#CCC; color:black; /* MODIFIABLE */
}
/* BLOC DESCRIPTION FORUM */
#descFRM {
margin:auto; margin-top:25px;
width:450px; height:50px; text-align:left;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
/* DESCRIPTION FORUM */
.descFRM {
margin:auto; position:relative; z-index:3;
width:450px; height:50px; padding-right:5px; overflow:auto;
color:white; /* MODIFIABLE */
font-size:10px; text-align:justify; text-transform:none;
}
#descFRM img{
position:absolute; z-index:2; margin-top:-149px; margin-left:-80px;
width:595px; height:235px;
}
.boxFRM:hover #descFRM {
margin-top:0;
}
/* SOUS-FORUMS */
.sfFRM {
position:relative; z-index:3;
width:490px; height:25px; overflow-y:auto; color:rgba(0,0,0,0);
}
/* LIEN SOUS-FORUM */
.sfFRM a{
display:inline-block; vertical-align:top; margin-top:8px; padding:2px 5px;
background:white; color:black !important; /* MODIFIABLE */
text-align:center; font-size:10px;
}
/* TRIANGLE DERNIER MESSAGE FORUM */
.triFRM {
position:absolute; z-index:5; margin-top:-85px; margin-left:713px; width:0; height:0;
border-style:solid; border-width:10px 17.3px 10px 0; border-color:transparent;
border-right-color:white; /* MODIFIABLE */
}
/* BLOC DERNIER MESSAGE FORUM */
.lmsgFRM {
position:relative; z-index:3; display:inline-block; vertical-align:top;
width:70px; height:150px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM div{
margin-top:40px;
width:150px; height:50px; padding:10px 0; overflow:hidden;
font-size:10px; text-align:center; text-transform:uppercase;
background:white; color:black; /* MODIFIABLE */
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
/* COULEUR TITRE DERNIER SUJET FORUM */
.lmsgFRM a{
color:black !important; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM{
position:relative; z-index:5;
width:800px; height:10px;
}

Instructions :

Taille des images descriptives : 595 * 235
Encadrer le texte descriptif des balises suivantes :

Code:
<div class="descFRM"> Texte descriptif </div>
Revenir en haut Aller en bas
MessageRe: Modification LS Lun 5 Déc - 16:55
C'est tout simplement parfait, merci beaucoup. ♥
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-