Catégories forum rpg

Sam 23 Juil - 15:03
bonjour !  I love you
je viens pour proposer à vos talents de codage une petite commande de catégories forumactif!  I love you
Largeur maximale : 600px
Hauteur maximale : Auto
Schéma : http://image.noelshack.com/fichiers/2016/29/1469278698-schemacat.png
Éléments : "Welcome to London" sera ici une image de catégorie et non pas une police d'écriture, format png et possibilité de modifier cette image pour chaque catégorie si possible. Couleurs modifiables par ailleurs s'il vous plaît,également pour changer à chaque versions.  I love you
Images :
La nouvelle version étant en cours, les images ne sont pas encore conçues par l'aimable personne donc si possible mettre des images qui pourront être remplacées par exemple. Merci à vous ! Il y a juste l'image de catégorie que vous pouvez trouver sur le forum si il faut les mettre dans le template par exemple.

Animations : J'aimerais un glissement sur le "nom forum" vers la droite  I love you Et le nom du pseudo à droite avec la couleur du groupe dans lequel il est (par exemple le pseudo d'un administrateur sera rouge, modérateur vert. Si besoin des couleurs, voici à peu près les groupes et couleurs: http://image.noelshack.com/fichiers/2016/29/1469278966-groupes.png

Informations supplémentaires : Merci à vous, bonne continuation sur CCC, vous êtes très douée.
Revenir en haut Aller en bas
Sam 23 Juil - 16:53
Bonjour,

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

Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
      <table width="600px" 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>
 <div class="mdlCAT"><!-- END tablehead -->

         <!-- BEGIN cathead -->
         <!-- END cathead -->
        
         <!-- BEGIN forumrow -->
        <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />{catrow.forumrow.FORUM_DESC}</div><div class="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div><div class="lmsgFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets<br/>{catrow.forumrow.POSTS} messages</div>{catrow.forumrow.LAST_POST}</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 -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:10px auto 0; width:600px; text-align:center;
height:50px; /* MODIFIER SELON HAUTEUR IMAGE */
background:url(); /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0;
font-size:42px; text-transform:uppercase;
font-family:Arial; color:white; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:600px; padding:10px 0;
background:wheat; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:auto; width:600px;
height:50px; /* MODIFIER SELON HAUTEUR IMAGE */
background:url(); /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM{
margin:10px auto; width:540px; text-align:center;
}
/* TITRE FORUM */
.tleFRM {
padding-left:25px; text-align:left;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.tleFRM a{
font-family:Dancing Script; font-size:32px;
color:#f26d7d !important; /* MODIFIABLE */
}
/* SURVOL TITRE FORUM */
.tleFRM:hover {
padding-left:50px;
}
/* ICÔNES FORUM */
.imgFRM{
position:absolute; margin-top:10px; margin-left:-45px;
width:45px; height:45px;
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block; vertical-align:top;
width:260px; height:65px; padding:5px; padding-left:30px; overflow:auto;
font-size:10px; text-align:justify;
background:#f26d7d; color:black;  /* MODIFIABLE */
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:75px; height:75px; overflow:hidden;
background:#f26d7d; /* MODIFIABLE */
}
.avaFRM img {
width:75px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top;
width:140px; height:65px; padding:5px;
text-align:center; font-size:10px; line-height:12px;
background:#DEDEDE; color:black; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
margin-bottom:5px;
font-size:9px; text-align:center; line-height:11px;
color:black; /* MODIFIABLE */
}
/* SOUS-FORUMS */
.sfFRM {
margin-top:10px; width:530px; padding:5px;
background:#f7a5ae; color:crimson; /* MODIFIABLE */
font-size:10px; text-align:left; text-transform:uppercase;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
color:crimson !important; /* MODIFIABLE */
}

Placer une image en tant que titre de catégorie :
Code:
<img src="liendel'image.png" />

Colorer les noms des utilisateurs selon leur groupe :

Taille des icônes du forum : 45*45
Revenir en haut Aller en bas
Sam 30 Juil - 21:41
Merci beaucoup d'avoir réalisé la commande !  I love you  I love you
Serait-il possible de modifier l'espace entre l'image mise par mes soins (titre catégorie) et le premier titre de forum ? Car si l'image est trop grande, ça empiète sur le bloc forum comme ici:
http://image.noelshack.com/fichiers/2016/30/1469907636-capturesdf115.png
Merci encore, bonne soirée à vous.
Revenir en haut Aller en bas
Dim 31 Juil - 0:43
Remplacer :
Code:
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:600px; padding:10px 0;
background:wheat; /* MODIFIABLE */
}

Par :
Code:
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:600px; padding:30px 0 10px;
background:wheat; /* MODIFIABLE */
}

Si cela se révèle insuffisant, augmentez simplement le premier nombre du padding :
Code:
padding:30px 0 10px;
Revenir en haut Aller en bas
Lun 1 Aoû - 10:09
Merci beaucoup c'est réglé ! I love you
Bonne journée à vous et bonne continuation !
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum