[HTML & CSS] Catégories du forum

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Bonjour ! Oui voilà, j'ai finis par arrêter de m'arracher les cheveux sur ce codage de catégorie, je ne pense pas que j'y arriverai un jour. Du coup je m'en remets à vous.
Voilà le lien de mon forum et à quoi il ressemble actuellement: Clique ici !
La couleur de fond du forum est #EACFB7. la couleur de fond des catégories est #C7A383 et j'aimerai également y avoir des touches de #356266 dans les titres (La première lettre du titre ou le soulignement par exemple )
J'aimerai également que les titres des catégories soient dans la police Lobster en premier choix. En second Great vibes et s'il le faut vraiment en dernier choix Georgia. Et qu'elles soient bien visibles. Que ce soit essentiellement elles qui décorent la première page du forum. Pourquoi pas dans ce style là:
[HTML & CSS] Catégories du forum Le_cot10

[HTML & CSS] Catégories du forum Le_cot10

Le reste, les forums et sous-forums, pas besoin d'y toucher si vous n'en avez pas envie =D

Le code de mon template (J'ai finis par supprimer l'autre Elu désolée >.< Quand je le bidouille maintenant il fait absolument pas ce que je veux.)

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<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>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<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"> </td>
</tr>


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
   
   <div style="width: 200px;"></div>
   <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
   

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Je vous remercie d'avance et s'il vous manque quelque chose n'hésitez pas à me le dire !

Coucoy Popy(ette) (j'en mange ce soir xD).

Alors, si j'ai bien compris, tu veux juste qu'on code les titres de catégorie pour qu'is ressemblent à l'image que tu nous as donnée ? Smile

.
C'est tout ? Smile

PS : C'est tout à fait possible en Lobster Wink

.

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

C'était bon ? =D

Dans ce style là oui pour l'emplacement. Et si tu le veux bien, mais là j'ai pas vraiment d'idée pour ça, j'ai fais quelques test sur photofiltre qui n'ont pas été convainquant, j'aimerai une touche de bleus ( Le #356266) Afin d'avoir un certain contraste et que tout ne soit pas marron.
Mais ouais, j'ai de la peine à me faire une idée de ce qui est possible de faire sur forumactif. Je vois bien certains forums avec énormément de codage mais je les trouve trop lourd. J'aimerais, à la base, que le forum fasse "Simple, classique mais classe et pro' " si tu vois ce que je veux dire xD

Coucou

Je peux avoir le CSS actuel auussi s'il te plait ? Wink

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Hello,

Désolée oui en effet ce serait plus facile avec peut-être =3

Code:: /* AVATAR SUR CATEGORIE ET FORUM */
.lastpost-avatar img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 60px;
margin-left: 40px;
}
/*PA*/
.nomfow {
font-size: 20px;
font-family: Lobster, Great vibes, georgia;
text-align: center;
color: #356266;
}

/*Titre des blocs*/
.titrep {
display: block;
text-align: center;
width: auto;
height: 22px;
background-color: #C7A383;
color: #EACFB7;
border-bottom: 1px dotted #EACFB7;
font-size: 20px;
font-family: Lobster, great vibes, Georgia;
}

/*Contexte*/
.bloc2 {
border: 1px solid #EACFB7;
border-radius: 10px 10px 10px 0px;
width: 245px;
height: 110px;
background-color: #C7A383;
overflow: hidden;
}

.bloc2texte {
width: 245px;
height: 100px;
font-size: 12px;
font-family: arial;
overflow: auto;
padding: 3px;
text-align: justify;
}

/*Nouveautés*/
.bloc3 {
border: 1px solid #EACFB7;
border-radius: 10px 10px 10px 0px;
width: 245px;
height: 110px;
background-color: #C7A383;
overflow: auto;
font-family: arial;
font-size: 12px;
}

/*partenaires*/
.infobulle {
position: relative;
z-index: 0;
}

.infobulle:hover {
background-color: transparent;
z-index: 50;
}

.infobulle span {
position: absolute;
background-color: #356266;
opacity: 0.8;
color: black;
padding: 5px;
visibility: hidden;
text-align: center;
line-height: 15px;
font-family: arial;
font-size: 12px;
}

.infobulle span img { /*style des images dans l'infobulle*/
padding: 5px;
}

.infobulle:hover span { /*Style de l'infobulle*/
visibility: visible;
bottom: 20px; /*Distance entre l'infobulle et le bas de la cellule*/
left: 50px; /*Distance entre l'infobulle et la gauche de la page*/
width: 100px; /*Largeur de l'infobulle*/
border-radius: 5px;
}

.infobulle a { /*Style des liens*/
color: white;
text-decoration: none;
}

.infobulle a:hover { /*style des liens au passage de la souris*/
font-style: italic;
}

/* Fin de la P.A. */
/*ICONE ONLINE DANS LES SUJETS*/
.post .icones_profil .online{
display: block;
text-align: center;
}
/* COULEUR DANS CITATION */
.code {
color: black;
}
/* QEEL */
.QEEL {
width:100%; height:245px;
background:#EACFB7;
}
/* TITRE QEEL */
.tleQEEL {
padding:3px 5px 3px 0px;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3);
font-family:lobster,Verdana,Arial,Helvetica,sans-serif;
background:#C7A383;
text-align:right;
}
.tleQEEL a{
font-size:32px;
color:white;
}
/* IMAGE QEEL */
#i_whosonline {
position:absolute;
margin-left:-10px; margin-top:35px;
border-radius:200px;
border: 1px solid #FFFFFF;
width:200px; height:200px;
box-shadow:0 0 3px rgba(0,0,0,0.3);
background-image: url('http://i68.servimg.com/u/f68/19/36/45/80/qeel10.png');
}
/* STATISTIQUES QEEL */
.stsQEEL {
position:absolute;
margin-left:195px; margin-top:15px;
width:385px; padding:10px 0;
border-radius:10px;
background-color:#C7A383;
box-shadow:0 0 3px rgba(0,0,0,0.3);
text-align:center;
font-size:11px;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
position:absolute;
margin-top:95px; margin-left:195px;
width:370px; height:65px;
border-radius:10px;
padding:10px;
overflow:auto;
background-color:#C7A383;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
font-size:11px;
}
/* 24H QEEL */
.dayQEEL {
position: right;
margin-left:675px; margin-top:15px;
width:175px; height:145px; padding:10px;
overflow:auto;
background-color:#C7A383
}
/* GROUPES QEEL */
.blocGQEEL {
width:100%; text-align:center;
background:#C7A383;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3);
}
/* NOM GROUPES QEEL */
.blocGQEEL a {
display:inline-block;
padding:5px;
font-size:14px;
text-shadow:0 0 2px black;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
position:absolute; z-index:2;
margin-top:77px; margin-left:570px;
width:145px; padding:10px;
font-family:Arial;
color:white;
background:#C7A383;
text-align:center;
transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
}
.anvQEEL div {
position:absolute; z-index:3;
margin-top:-62px; margin-left:60px;
width:0px; height:145px; padding:10px;
overflow:hidden;
background:#C7A383;
text-align:justify !important;
opacity:0;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
margin-top:28px; margin-left:-25px;
width:175px;
opacity:1;
overflow:auto;
}

Merci bien Smile

Alors, déjà essaie avec ça et dis moi :

Code:: .cattitle center{
font-family: 'Lobster', cursive;
font-size: 18px;
color: #87591a;
transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background: linear-gradient(to bottom right, #87591a, #356266);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Tu as juste à ajouter ça dans ton CSS Wink

La résultat est : (en fait c'est un dégradé du marron au bleu)
[HTML & CSS] Catégories du forum AKbCyVJ

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Coucou,
Je te remercie =D
Alors voilà ce que ça donne en fait.

[HTML & CSS] Catégories du forum Avant_10

Oups, en effet, ccela vient d''un problème de compatibilité :/

Code:: .cattitle center{
font-family: 'Lobster', cursive;
font-size: 18px;
color: #87591a;
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
}

.cattitle center:first-letter{
color: #356266;
}

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Ah c'est super sympa j'aime beaucoup merci ! =D

Arf le soucis maintenant c'est que si on veut cliqué sur le premier forum, celui direct après le titre de la catégorie, on y arrive pas, ça clique seulement sur le titre de la catégorie. ( Je sais pas si j'arrive à me faire comprendre >.< ) Y'a moyen de changer ça avec un margin-top ou quelque chose du genre ?

Oui pas de soucis !
Il te suffit de rajouter cela :

Code:: width: 205px;
margin: auto;

Donc

Code:: .cattitle center{
font-family: 'Lobster', cursive;
font-size: 18px;
color: #87591a;
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
width: 205px;
margin: auto;
}

.cattitle center:first-letter{
color: #356266;
}

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Génial ! Merci beaucoup Elu'
C'est tout bon Wink

C'est tout bon !
Tu peux laisser un petit message sur le livre d'or si tu souhaites Wink

.