[AIDE] Mettre une simple Image sur certaines Catégories
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
[AIDE] Mettre une simple Image sur certaines Catégories
Bonjour,
J'ai sur mon forum des codes CSS et un Template de catégories et forums qui me permet d'avoir une image cachant la descriptions de ceux-ci avec une petite opacité et qui se décale (transition) sur la droite au passage de la souris pour lire la description. Vous pouvez le voir En Cliquant Ici .
Ce que j'aimerais beaucoup serais d'avoir la possibilité de placer une image flottante (ou autre) en haut à gauche avec un petite rotation sur la description des forums que vous voyer ci-dessus sur le liens. Car, comme le salon est un salon de divers forum pour des discutions j'aimerais simplement changer non pas l'image défilante mais en mettre une en rapport avec le thème de discutions. Bien sur, cela fera donc deux image. Un petit peut dans ce style :
Exemple avec un forum (car je souhaite que les images sur les forum soit différentes et ne soit poser QUE sur certain forum ^^ ) :
Voila mes Template et mon CSS si cela peut vous aider =) :
Index_Box :
La CSS de mes Catégories :
Je vous remercie beaucoup de l'attention que vous avez porter à mon message et à sa lecture, je reste dans l'attente d'une réponse de votre part, d'une petite aide si vous le souhaitez et le pouvez et je vous souhaite une très douce et agréable soirée. <3
Mercurie.
J'ai sur mon forum des codes CSS et un Template de catégories et forums qui me permet d'avoir une image cachant la descriptions de ceux-ci avec une petite opacité et qui se décale (transition) sur la droite au passage de la souris pour lire la description. Vous pouvez le voir En Cliquant Ici .
Ce que j'aimerais beaucoup serais d'avoir la possibilité de placer une image flottante (ou autre) en haut à gauche avec un petite rotation sur la description des forums que vous voyer ci-dessus sur le liens. Car, comme le salon est un salon de divers forum pour des discutions j'aimerais simplement changer non pas l'image défilante mais en mettre une en rapport avec le thème de discutions. Bien sur, cela fera donc deux image. Un petit peut dans ce style :
Exemple avec un forum (car je souhaite que les images sur les forum soit différentes et ne soit poser QUE sur certain forum ^^ ) :
Voila mes Template et mon CSS si cela peut vous aider =) :
Index_Box :
- Ouvrir:
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<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>
<div class="modifcat">
<!-- BEGIN catrow --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- 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 colspan="{catrow.cathead.INC_SPAN}" width="100%">
<div class="cattitre">{catrow.cathead.CAT_TITLE}</div>
</td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td>
<div class="imgmess">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</td>
<h1 class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</h1>
<td>
<div class="liensfrm">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
<div class="descfrm">{catrow.forumrow.FORUM_DESC}</div>
</td>
<td class="row3 over" align="center" valign="middle">
<div class="avatarfrm">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
</td>
<td class="row3" align="center" valign="middle">
<div class="derniermess">
{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets<br />
{catrow.forumrow.LAST_POST}
</div>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
La CSS de mes Catégories :
- Ouvrir:
- Code:
/* _______________________________________________________________AFFICHAGE DES CATEGORIES NEVER UTOPIA ____________________*/
table.forumline td {
background-color: #EBEAA4!important;
min-width: 80%!important;
max-width: 80%!important;
}
table.forumline {
background-color : #EBEAA4!important;
min-width: 80%!important;
max-width: 80%!important;
}
.row3 {
background-color: #EBEAA4!important;
min-width: 80%!important;
max-width: 80%!important;
}
.modifcat{
margin-top:10px;
}
.forumline{
min-width: 80%!important;
max-width: 80%!important;
margin-left: 100px;
}
.cattitre{
width:746px;
text-align:center;
margin-top:20px;
margin-bottom:10px;
margin-left:25px;
margin-right:25px;
padding-top:5px;
font-size:35px;
min-height:50px;
color:#CBC86B !important;
/*background-color:#d9b698;*/
font-family: 'Great Vibes', cursive;
}
.forumlink{
letter-spacing:0px;
font-size: 15px;
text-align:center;
color:#000 !important;
font-family:'Great Vibes'!important;
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
}
.forumlink:hover{
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
text-decoration:none !important;
color:#ffffff !important;
}
.imgmess{
position:relative;
height: 75% !important;
background-color: #EBE9C3;
margin-right:10px;
margin-bottom:20px;
margin-left:25px;
padding:5px;
}
.imgmess img{
/*height:100px;*/
margin-top: -5px;
}
.liensfrm{
overflow:auto;
font-size:0px;
width:130px;
height:91px;
background-color:#B7CA79;
bottom:-50px;
margin-right:5px;
margin-bottom:20px;
}
.liensfrm a{
letter-spacing:0px;
font-family: 'Arial', sans-serif;
display:block;
font-size:10px;
max-width:130px;
color:#000;
background-color:#EBE9C3;
border-bottom: 1px solid #000;
text-align: center!important ;
text-decoration:none;
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
}
.liensfrm a:hover{
color:#ffffff !important;
background-color:#EBE9C3;
text-decoration:none !important;
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
}
.descfrm{
position:absolute;
margin:auto;
min-width:300px;
max-width:300px;
max-height:120px;
min-height:120px;
font-size:11px;
margin-bottom:15px;
margin-left:2px;
text-align:justify;
padding:10px;
color:#000000;
font-family: 'Open Sans', sans-serif;
margin-top: 5px;
}
.avatarfrm{
overflow:hidden;
width:57px;
height:100px;
background-color:#EBE9C3;
padding:5px;
margin-bottom:15px;
margin-top: 5px;
}
.avatarfrm img{
height:100px;
}
.derniermess{
position:relative;
width:98px;
height:100px;
font-size:10px;
background-color:#C4D7ED;
margin-bottom:10px;
margin-right:25px;
margin-left: 5px;
color:#000000;
font-family: 'Open Sans', sans-serif;
}
.derniermess a{
color:#c36e6e;
text-decoration:none;
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
margin-top: 5px;
width:98px;
height:100px;
}
.derniermess a:hover{
color:#3D2617;
transition:all ease 0.7s;
-webkit-transition:all ease 0.7s;
text-decoration:none !important;
margin-top: 5px;
width:98px;
height:100px;
}
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */
.cate
{
width: 355px;
height: 80px;
overflow: hidden;
border: 2px solid #000000;
background-color: #EBE9C3;
}
.cate_img
{
position: relative;
z-index: 2;
width: 355px;
height: 80px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 0.5;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 0.5;
}
.cate_description
{
position: justify;
z-index: 1;
width: 355px;
max-height: 150px;
min-height: 150px;
margin-top: -90px;
margin-bottom : 90px;
text-align: justify;
font-size: 11px;
color: #000;
padding: 15px;
}
Je vous remercie beaucoup de l'attention que vous avez porter à mon message et à sa lecture, je reste dans l'attente d'une réponse de votre part, d'une petite aide si vous le souhaitez et le pouvez et je vous souhaite une très douce et agréable soirée. <3
Mercurie.
Re: [AIDE] Mettre une simple Image sur certaines Catégories
Bonjour,
Essayez ainsi, je pense que ce sera aussi simple :
- Dans le panneau d'admin > général > catégories et forums > modifiez le forum souhaité pour y ajouter l'adresse de l'image associée souhaitée dans le champ prévu à cet effet : "Adresse de l'image".
Enregistrez.
- Ajoutez le code suivant dans la css de votre forum :
- enregistrez, actualisez votre forum.
Je pense que ça devrait fonctionner. (S'il y a un souci, n'hésitez pas à laisser le code en place sur votre forum le temps qu'on puisse inspecter le problème).
(au passage, votre forum n'a pas l'air en phpbb2 comme l'indique votre profil mais en modernBB ; ça peut être bien de osit avoir votre profil à jour, soit le préciser dans votre message, parce que ça peut parfois changer des choses ^^)
Essayez ainsi, je pense que ce sera aussi simple :
- Dans le panneau d'admin > général > catégories et forums > modifiez le forum souhaité pour y ajouter l'adresse de l'image associée souhaitée dans le champ prévu à cet effet : "Adresse de l'image".
Enregistrez.
- Ajoutez le code suivant dans la css de votre forum :
- Code:
.descfrm>img[style="float:left"] {
position: absolute;
z-index: 10;
right: 90%;
}
- enregistrez, actualisez votre forum.
Je pense que ça devrait fonctionner. (S'il y a un souci, n'hésitez pas à laisser le code en place sur votre forum le temps qu'on puisse inspecter le problème).
(au passage, votre forum n'a pas l'air en phpbb2 comme l'indique votre profil mais en modernBB ; ça peut être bien de osit avoir votre profil à jour, soit le préciser dans votre message, parce que ça peut parfois changer des choses ^^)
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: [AIDE] Mettre une simple Image sur certaines Catégories
Bonsoir,
Merci de tout cœur Chère @MlleAlys je vais essayer cela de suite =)
Bonne soirée à toi.
Merci de tout cœur Chère @MlleAlys je vais essayer cela de suite =)
Bonne soirée à toi.
Re: [AIDE] Mettre une simple Image sur certaines Catégories
Re Bonsoir @"MlleAlys" ,
Voila, j'ai essayer ton codage est celui-ci est génial! Tout bête mais super utile et simple.
J'ai poser des icones ici pour tester et m'amuser avec les emplacement : Test Ici
Mais par contre, dans les Catégories (celles de l'index par exemple) comment puis-je faire car il ne me propose pas de mettre une image ? /:
Merci beaucoup de ton aide <3
Douce nuit à toi
Voila, j'ai essayer ton codage est celui-ci est génial! Tout bête mais super utile et simple.
J'ai poser des icones ici pour tester et m'amuser avec les emplacement : Test Ici
Mais par contre, dans les Catégories (celles de l'index par exemple) comment puis-je faire car il ne me propose pas de mettre une image ? /:
Merci beaucoup de ton aide <3
Douce nuit à toi
Re: [AIDE] Mettre une simple Image sur certaines Catégories
Ah pardon, j'avais oublié que les catégories n'avaient pas cette option !
Dans ce cas, mettez plutôt l'image dans la description des catégories et des forums, avec par exemple la classe "descicone" (ou un autre nom qui vous parlerait plus) ; au début ou à la fin de la description peut importe.
.descfrm>img[style="float"]
par
.descfrm img.descicone
Ce qui donnera :
Dans ce cas, mettez plutôt l'image dans la description des catégories et des forums, avec par exemple la classe "descicone" (ou un autre nom qui vous parlerait plus) ; au début ou à la fin de la description peut importe.
- Code:
<img src="URLIMAGE" class="descicone"/>
.descfrm>img[style="float"]
par
.descfrm img.descicone
Ce qui donnera :
- Code:
.descfrm img.descicone {
position: absolute;
right: 170%;
top: -20px;
transform: rotate(-30deg);
z-index: 2;
}
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: [AIDE] Mettre une simple Image sur certaines Catégories
Re Bonsoir Mlle @MlleAlys et ne t'excuse pas! Tu m'as déjà beaucoup aider et parfaitement, je n'en demande pas t'en ^.^ - Je te remercie beaucoup cela fonctionne à la Perfection! Merci vraiment de tout cœur et douce nuitée à toi
Sujets similaires
» Mettre une image en fond de catégories.
» Mettre une image dans les catégories.
» Mettre l'image en arrondie a gauche des catégories
» comment mettre une image en haut des catégories ?
» Mettre une image en fond dans toutes les catégories + PA
» Mettre une image dans les catégories.
» Mettre l'image en arrondie a gauche des catégories
» comment mettre une image en haut des catégories ?
» Mettre une image en fond dans toutes les catégories + PA
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum