Bonsoir,
J'ouvre ce sujet pour solliciter votre aide. J'ai utilisé ce tutoriel :
https://www.never-utopia.com/t52822p30-forums-en-images-de-fond
Sur mon forum test : http://test-kpopfans.forumactif.org/
J'aimerais savoir comment faire en sorte que cette ligne "x messages dans y sujets" apparaissent au début et disparaisse avec le survol, soit l'effet contraire.
J'ai cherché et testé des choses dans le css mais je trouve pas :/
Voici mon css :
Le template :
Je vous remercie pour votre attention,
Cordialement Hidem.
J'ouvre ce sujet pour solliciter votre aide. J'ai utilisé ce tutoriel :
https://www.never-utopia.com/t52822p30-forums-en-images-de-fond
Sur mon forum test : http://test-kpopfans.forumactif.org/
J'aimerais savoir comment faire en sorte que cette ligne "x messages dans y sujets" apparaissent au début et disparaisse avec le survol, soit l'effet contraire.
J'ai cherché et testé des choses dans le css mais je trouve pas :/
Voici mon css :
- Spoiler:
- Code:
/********** DÉBUT FORUMS **********/
/* Retire le bord du forumline */
.forumline {
border: 0px solid;
}
/* Retire le padding du bodyline */
.bodyline {
padding: 0px;
}
/* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
.un_forum:nth-child(odd) {
margin-right: 25px;
}
/* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
.un_forum:last-child, .un_forum:nth-last-child(2) {
margin-bottom: 20px;
}
/* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
.un_forum {
/* Ne pas toucher */
position: relative;
display: inline-block;
vetical-align: top;
/* Largeur puis hauteur */
width: 400px;
height: 250px;
/* Marge du haut */
margin-top: 20px;
/* Empêche que ce qui dépasse soit vu: ne pas toucher. */
overflow: hidden;
/* Applique un bord, puis une ombre */
border: 3px solid white;
border-radius: 5px;
box-shadow: 0 1px 4px grey;
}
/* Mise en forme du titre de forum */
.un_titre {
position: relative;
/* Largeur: prend toute la largeur, puis hauteur */
width: auto;
height: 40px;
/* Dot être de la même taille que "height": centre le texte */
line-height: 40px;
padding: 10px;
/* Taille de la police */
font-size: 30px;
overflow: hidden;
}
/* Met la police au titre de forum */
.un_titre h3, .un_titre h2 {
font-family: 'Amatic SC';
}
.un_titre .hierarchy {
font-size: 30px;
}
/* Couleur du titre forum et effet au passage de la souris */
.un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
color:black;
text-decoration: none !important;
text-shadow: 1px 1px 5px white;
letter-spacing: 5px;
transition: all ease 1s;
}
/* Effet du titre au passage de la souris */
.un_titre a:hover {
color: white;
text-decoration: none !important;
text-shadow: 1px 1px 5px black;
letter-spacing: 2px;
transition: all ease 1s;
}
/* On met tout le reste en position absolue */
.image_messages, .img_forum, .sous_titre, .dernier_message {
position: absolute;
}
/* On place l'image au-dessus de tout */
.img_forum{
top: 0;
left: 0;
z-index: 1;
}
/*On place out le reste au-dessus */
.un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums, .mess_et_sujets {
z-index: 2;
}
/* On place l'image de new/nonew/etc en haut à droite */
.image_messages {
top: 0;
right: 0;
}
/* Mise en forme du sous-titre du forum qui se trouve dans la description */
.un_forum .sous_titre {
/* Placement */
top: 65px;
left: 20px;
padding: 5px 10px;
/* Couleur de fond puis de texte */
background: rgba(0, 0, 0, 0.8);
color: white;
/* Police, taille et mise en gras */
font-family: 'Courgette';
font-size: 15px;
font-weight: bold;
/* Largeur maximale du titre = la moitié de la taille - le padding */
max-width: 180px;
/* Visible si la souris n'est pas dessus */
opacity: 1;
transition: all ease 1s;
}
/* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
.un_forum:hover .sous_titre {
opacity: 0;
transition: all ease 1s;
}
/* Mise en forme de la description du sous-forums */
.un_forum .description .contour_desciption {
overflow: visible;
position: relative;
/* Taille. Width: il prend toute la largeur. */
width: auto;
height: 125px;
padding: 10px;
/* Couleur de fond */
background: rgba(0, 0, 0, 0.8);
/* Police, puis taille de police, puis couleur du texte */
font-family: 'Courgette';
font-size: 13px;
color: white;
/* On le met au-dessus de tout le reste */
z-index: 3;
/* Alignement du texte */
text-align: justify;
/* Effet de disparition */
-webkit-transform: translateX(400px);
transform: translateX(400px);
transition: all ease 0.8s;
}
/* Effet d'apparition de la description du forum */
.un_forum:hover .description .contour_desciption {
-webkit-transform: translateX(0px);
transform: translateX(0px);
transition: all ease 0.8s;
}
/* Mise en forme du texte de description */
.description .contour_desciption p {
/* Fait apparaitre une barre de défilement */
overflow: auto;
position: relative;
/* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
width: auto;
height: 100px;
padding: 10px;
text-align: justify;
font-family: 'Courgette';
font-size: 13px;
color: white;
}
/* Mise en forme des liens vers les sous-froums */
.un_forum .sous_forums {
/* Placement */
position: relative;
top: -42px;
/* Prennent toute la largeur et font 40 px de haut */
width: auto;
height: 20px;
padding: 10px;
/* PAr-dessus tout le reste */
z-index: 3;
/* S'il y en a trop une barre de défilement apparait */
overflow: auto;
/* N'apparaissent pas normalement */
opacity: 0;
transition: all ease 0.2s;
}
/* Effet d'apparition des liens vers les sous-forums */
.un_forum:hover .sous_forums {
opacity: 1;
transition: all 0.8s ease 0.5s;
}
/* Mise en forme des leins de sous-forums */
a:hover {
color: #F9AA5C !important;
}
.contour_desciption a, .contour_desciption a:link, .contour_desciption a:visited, .contour_desciption a:active {
color: white; /*couleur des liens dans description forum*/
}
div.postbody a{
color:#4C85E9 !important;
}
div.postbody a:hover{
color:#F9AA5C !important;
}
/* Effet sur les liens de sous-forums au passage de la souris */
.sous_forums a:hover {
text-decoration: none !important;
letter-spacing: 1px;
transition: all ease 1s;
}
/* Mise en forme du dernier message */
.un_forum .dernier_message {
/* Poistionnement */
bottom: 10px;
/* Taille */
width: 380px;
height: 40px;
/* S'il est trop long une barre de défilement apparait */
overflow: auto;
padding: 5px 10px;
/* Mise en forme du texte: police, taille, couleur, ombre du texte */
font-family: 'Courgette';
font-size: 12px;
color: white;
text-shadow: 1px 1px 5px black;
/* Effet de disparition */
opacity: 0;
transition: all ease 1s;
}
/* Effet d'apparition du denrier message */
.un_forum:hover .dernier_message {
opacity: 1;
transition: all ease 1s;
}
/* Mise en forme du texte "message et sujets" */
.dernier_message {
display: block;
margin-bottom: 5px;
}
/* Mise en forme de la date du dernier message: taille */
.dernier_message .liens_mess {
font-size: 12px;
}
/* Mise en forme de tout le reste pour le dernier message: taille */
.dernier_message .liens_mess a {
font-size: 12px;
text-decoration: none !important;
color: white;
}
/********** FIN FORUMS **********/
Le template :
- Spoiler:
- Code:
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END message_admin_index -->
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">
</span>
<!-- END switch_user_logged_in -->
</td>
<td class="gensmall" align="right" valign="bottom">
</td>
</tr>
</table>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><center><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
{catrow.tablehead.L_FORUM}
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<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>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<div class="un_forum">
<div class="un_titre">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
{catrow.forumrow.FORUM_NAME}
</a>
</h{catrow.forumrow.LEVEL}>
</div>
<div class="image_messages">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="description">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="dernier_message">
<span class="mess_et_sujets"><br />
{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
</span>
<span id="last" class="liens_mess">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
</a>
<!-- END switch_topic_title -->
</span>
<script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
</div>
</div>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table></center><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Je vous remercie pour votre attention,
Cordialement Hidem.
Dernière édition par Hidem le Mer 11 Mar 2015 - 15:18, édité 1 fois
