Bonjour à vous ! =)
Je suis venu faire appel à vous, grand maîtres codeurs, pour m'aider à coder correctement une catégorie ^^. Sur recommandation de mes joueurs, j'ai decidé d'adopter le code de Chesirecat pour mon forum (juste ICI), maius j'aurai voulu lui apporter quelques petites modifications. Normalement, ce n'est rien de bien compliqué. Voici les modifs que je voudrais (à ma conaissance, c'est surtout du HTML, le CSS de toute façon je peux gérer tout seul)
1. Supprimer le fond des catégories à gauche et à droite (pour le remplacer par une couleur de fond unie)
2. déplacer l'image old/new en haut du bloc "inline catLast" (ça ferait un petit bandeau en haut de ce bloc)
3. créer une DIV avec fond de coulur dans laquelle va se placer le titre
4. Mettre la description dans la boîte de gauche (une image doit-être là en permenence et un effet de hover fait apparaître la description /!\ Je veux pouvoir personnaliser cette image pour chaque forum ! /!\)
Voici maintenant un petit schéma explicatif plus clair ^^ (en bas le forum par défaut, en haut ce que j'aimerais avoir).
Quand au code à mettre dans la description du forum (pour personnaliser l'image de ce dernier) comme je sais qu'il n'y en a pas, je vous laisse me le donner !
Merci d'avance !
EDIT : J'ai commencé à bidouiller un peu le CSS de mon côté, voici donc la version actuelle, sachant que j'ai envie d'éviter de toucher le HTML tout seul, je n'ai pas posé un seul doigt dessus ! ^^
Je suis venu faire appel à vous, grand maîtres codeurs, pour m'aider à coder correctement une catégorie ^^. Sur recommandation de mes joueurs, j'ai decidé d'adopter le code de Chesirecat pour mon forum (juste ICI), maius j'aurai voulu lui apporter quelques petites modifications. Normalement, ce n'est rien de bien compliqué. Voici les modifs que je voudrais (à ma conaissance, c'est surtout du HTML, le CSS de toute façon je peux gérer tout seul)
1. Supprimer le fond des catégories à gauche et à droite (pour le remplacer par une couleur de fond unie)
2. déplacer l'image old/new en haut du bloc "inline catLast" (ça ferait un petit bandeau en haut de ce bloc)
3. créer une DIV avec fond de coulur dans laquelle va se placer le titre
4. Mettre la description dans la boîte de gauche (une image doit-être là en permenence et un effet de hover fait apparaître la description /!\ Je veux pouvoir personnaliser cette image pour chaque forum ! /!\)
Voici maintenant un petit schéma explicatif plus clair ^^ (en bas le forum par défaut, en haut ce que j'aimerais avoir).
- HTML:
- Code:
<div class="catLiens">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
{catrow.tablehead.L_FORUM}
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="catCentre">
<div class="inline catGauche">
<div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
<div class="inline catLast">
<img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
{catrow.forumrow.LAST_POST}
</div>
<div class="inline catAvatar">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="inline sousForums">{catrow.forumrow.LINKS}</div>
</div>
<div class="inline catDroite">
<a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<img src="http://zupimages.net/up/17/13/mt9t.png" />
</div><!-- END tablefoot --><!-- END catrow -->
- CSS:
- Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
text-align:center;
}
.categorie{
width:800px;
margin:0 auto;
font-family:calibri;
font-size:12px;
}
.inline{
display:inline-block;
vertical-align:top;
}
.categorie h2{
margin:20px 0 0;
padding:30px 0;
box-sizing:border-box;
background-image:url('http://zupimages.net/up/17/13/mt9t.png');
font-size:30px;
font-weight:normal;
text-align:center;
color: #523e32;
text-shadow: 0 0 3px #55493f;
}
.catCentre{
padding:0 20px 40px 20px;
background:#21130d;
}
.categorie h2 + .catCentre{
padding-top:40px;
}
.catGauche{
width:400px;
background-color:#a9a08b;
margin-right:10px;
padding:10px;
box-sizing:border-box;
}
.catStats{
color:#654f3f;
font-size:15px;
margin-bottom:3px;
text-transform:uppercase;
letter-spacing:1px;
}
.catLast{
width:130px;
height:120px;
padding:5px;
box-sizing:border-box;
background-color:#ccc6b8;
text-align:center;
line-height:20px;
overflow:auto;
}
.catAvatar{
width:80px;
height:120px;
margin:0 10px;
overflow:hidden;
background-color:#ccc6b8;
}
.catAvatar img{
width:100%;
}
.sousForums{
width:150px;
height:120px;
background-color:#ccc6b8;
font-size:0;
overflow: auto;
}
.sousForums a{
display:block;
background:#fff;
font-size:12px;
text-align:center;
margin-bottom:5px;
}
.catDroite{
width:350px;
background-color:#a9a08b;
padding:10px;
box-sizing:border-box;
}
.catTitreForum {
font-size:15px;
text-transform:uppercase;
letter-spacing:1px;
}
.catDescrip{
height:120px;
background-color:#ccc6b8;
margin-top:5px;
padding:10px;
overflow:auto;
text-align:justify;
box-sizing:border-box;
}
Quand au code à mettre dans la description du forum (pour personnaliser l'image de ce dernier) comme je sais qu'il n'y en a pas, je vous laisse me le donner !
Merci d'avance !
EDIT : J'ai commencé à bidouiller un peu le CSS de mon côté, voici donc la version actuelle, sachant que j'ai envie d'éviter de toucher le HTML tout seul, je n'ai pas posé un seul doigt dessus ! ^^
- New CSS:
- Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
text-align:center;
}
.categorie{
width:800px;
margin:0 auto;
font-family:calibri;
font-size:12px;
}
.inline{
display:inline-block;
vertical-align:top;
}
.categorie h2{
margin:20px 0 0;
padding:30px 0;
box-sizing:border-box;
background-image:url('http://zupimages.net/up/17/13/mt9t.png');
font-size:30px;
font-weight:normal;
text-align:center;
color: #523e32;
text-shadow: 0 0 3px #55493f;
}
.catCentre{
padding:10px 10px;
background:#494949;
width:780px;
margin: 30px 0;
}
.categorie h2 + .catCentre{
padding-top:40px;
}
.catGauche{
width:400px;
background-color:#a9a08b;
margin-right:10px;
padding:10px;
box-sizing:border-box;
}
.catStats{
color:#654f3f;
font-size:15px;
margin-bottom:3px;
text-transform:uppercase;
letter-spacing:1px;
}
.catLast{
width:130px;
height:120px;
padding:5px;
box-sizing:border-box;
background-color:#ccc6b8;
text-align:center;
line-height:20px;
overflow:auto;
}
.catAvatar{
width:80px;
height:120px;
margin:0 10px;
overflow:hidden;
background-color:#ccc6b8;
}
.catAvatar img{
width:100%;
}
.sousForums{
width:150px;
height:120px;
background-color:#ccc6b8;
font-size:0;
overflow: auto;
}
.sousForums a{
display:block;
background:#fff;
font-size:12px;
text-align:center;
margin-bottom:5px;
}
.catDroite{
width:370px;
background-color:#a9a08b;
padding:10px;
box-sizing:border-box;
}
.catTitreForum {
font-size:15px;
text-transform:uppercase;
letter-spacing:1px;
}
.catDescrip{
height:120px;
background-color:#ccc6b8;
margin-top:3px;
padding:10px;
overflow:auto;
text-align:justify;
box-sizing:border-box;
}
Dernière édition par Lone wanderer le Ven 6 Juil 2018 - 12:05, édité 1 fois
