Petite modification de code catégories ._.
3 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
Petite modification de code catégories ._.
Bonjour !
Voilà mon forum : http://quasar.forumactif.org/
https://2img.net/image.noelshack.com/fichiers/2014/19/1399279005-cap3.png
En fait, à la base, dans ce carré, se trouvent les liens des forums intégrés à celui là. Je voudrais savoir si par une modification du template ou du css, on peut y mettre les images de description de chaque catégorie. ._. En fait, que dans ce cadre, on mette une image et quand la sourie passe dessus, que l'image disparaissent et que le lien vers les sous-forums soient là.
Voilà le css qui correspond :
Merci ! ♥
Voilà mon forum : http://quasar.forumactif.org/
https://2img.net/image.noelshack.com/fichiers/2014/19/1399279005-cap3.png
En fait, à la base, dans ce carré, se trouvent les liens des forums intégrés à celui là. Je voudrais savoir si par une modification du template ou du css, on peut y mettre les images de description de chaque catégorie. ._. En fait, que dans ce cadre, on mette une image et quand la sourie passe dessus, que l'image disparaissent et que le lien vers les sous-forums soient là.
Voilà le css qui correspond :
- Code:
/* CATEGORIES */
a {
text-decoration: none;
color: #000000;
font-size: 12px;}
.titreforum {
color: #F58C46;
font-size: 26px;
font-family: Oswald;
text-align: center;
}
.ensemble {
background-color: #FFFFFF;
margin-top: -20px;
font-size: 12px;
padding: 10px;
color: #000000;
width: 750px;
}
.description {
background-color: #ea1c2f;
text-align: justify;
width: 500px;
height: 100px;
overflow: auto;
padding: 10px;
font-size: 12px;
color: #FFFFFF;
}
.messages {
background-color: #C9F26F;
letter-spacing: 7px;
font-size: 12px;
text-align: center;
color: #FFFFFF !important;
padding: 10px;
}
.liens {
background-color: #C9F26F;
font-size: 12px;
text-align: left;
color: #000000 !important;
padding: 10px;
height: 100px;
width: 90px;
margin-top: -50px;
}
.derniers {
width:100px;
height:100px;
border-radius:80px;
-webkit-border-radius:80px;
-moz-border-radius:80px;
background-color: #F58C46;
font-size: 12px;
text-align: center;
color: #FFFFFF !important;
margin-top: -40px;
padding: 10px;
margin-right: -70px;
}
Merci ! ♥
Dernière édition par Ashling le Ven 9 Mai 2014 - 21:31, édité 2 fois
Re: Petite modification de code catégories ._.
Pitit up. ._.
Re: Petite modification de code catégories ._.
Upinounet o/
Re: Petite modification de code catégories ._.
Bonjour !
Est-ce que tu veux un effet en fondu ou que l'image coulisse ?
Par contre ça ne sera possible que si le bloc des sous-forum soit codé directement sur tes descriptions, donc si le code se trouve sur ton template, il faudra se limiter à une image ><
(très joli design sinon *^*)
Est-ce que tu veux un effet en fondu ou que l'image coulisse ?
Par contre ça ne sera possible que si le bloc des sous-forum soit codé directement sur tes descriptions, donc si le code se trouve sur ton template, il faudra se limiter à une image ><
(très joli design sinon *^*)
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 04/10/2011
Re: Petite modification de code catégories ._.
Merci de venir. o/
Et merci pour le design ! (je m'y suis donnée à mort XD)
Je voudrais un fondu si possible, je n'ai pas tout compris, je sais que je dois mettre une partie des codes dans les descriptions mais comme c'est un peu flou, je mets pour template pour montrer. o//
Et voudrais vraiment des images différentes. ._.
Encore merci !
Et merci pour le design ! (je m'y suis donnée à mort XD)
Je voudrais un fondu si possible, je n'ai pas tout compris, je sais que je dois mettre une partie des codes dans les descriptions mais comme c'est un peu flou, je mets pour template pour montrer. o//
Et voudrais vraiment des images différentes. ._.
- Code:
<table width="100%" 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 --><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>
</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>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<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}"><div class="titreforum">{catrow.forumrow.FORUM_NAME}</div></a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<center><div class="ensemble"><table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
-webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td><td><span class="genmed"><div class="description">{catrow.forumrow.FORUM_DESC}</div></span>
<br /> <div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
<td><div class="liens">{catrow.forumrow.L_LINKS}<br />{catrow.forumrow.LINKS} </div></td> <td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
</div></center>
</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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Encore merci !
Re: Petite modification de code catégories ._.
En effet, si tu veux changer chaque images, il faut passer par les descriptions, notamment les sous-forum qu'il faut rajouter manuellement.
Donc pour commencer, tu peux déjà désactiver les liens menant aux sous-forum sur le panneau d'admin, puisqu'il faudra rajouter les liens par toi-même !
Pour le template, il faut modifier ça :
Par celui-ci :
Pour le code des descriptions, c'est celui-ci :
L'image à changer se trouve touuuut en bas du code
Et enfin le css, je sais plus trop ce que j'ai bidouiller donc je t'envoie tout owo
C'est un ancien code profil que j'utilisais, comme il vient de never-utopia, pense à les créditer quelque part /o/
Donc pour commencer, tu peux déjà désactiver les liens menant aux sous-forum sur le panneau d'admin, puisqu'il faudra rajouter les liens par toi-même !
Pour le template, il faut modifier ça :
- Code:
<center><div class="ensemble"><table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
-webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td><td><span class="genmed"><div class="description">{catrow.forumrow.FORUM_DESC}</div></span>
<br /> <div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
<td><div class="liens">{catrow.forumrow.L_LINKS}<br />{catrow.forumrow.LINKS} </div></td> <td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
</div></center>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
Par celui-ci :
- Code:
<table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
-webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td>
<td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
<td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
Pour le code des descriptions, c'est celui-ci :
- Code:
<table>
<tbody>
<tr>
<td>
<div class="description">
Curabitur at libero in massa bibendum sagittis quis in justo. Nulla auctor condimentum velit, ut imperdiet ipsum imperdiet et. Sed diam tellus, aliquet sed condimentum a, condimentum eget nulla. Mauris nec tortor enim. Mauris mattis leo ac venenatis aliquet. Etiam adipiscing lacinia mauris at tempus. Pellentesque lacus dui, pretium vel felis vitae, tincidunt sagittis sapien. Proin viverra metus leo, sed egestas risus suscipit ut. Ut ac blandit erat. Quisque a ligula sit amet quam bibendum dictum.
</div>
</td>
<td>
<span class="liens_img"><span class="liens_sousfo"> <a href="http://">Sous-forum #1</a> <br /><a href="http://">Sous-forum #2</a> <br /><a href="http://">Sous-forum #3</a> <br /><a href="http://">Sous-forum #4</a> <br /><a href="http://">Sous-forum #5</a> <br /></span><img src="http://image.noelshack.com/fichiers/2014/19/1399730266-sousforum.png" /> </span>
</td>
</tr>
</tbody>
</table>
L'image à changer se trouve touuuut en bas du code
Et enfin le css, je sais plus trop ce que j'ai bidouiller donc je t'envoie tout owo
- Code:
/* CATEGORIES */
a {
text-decoration: none;
color: #000000;
font-size: 12px;}
.titreforum {
color: #F58C46;
font-size: 26px;
font-family: Oswald;
text-align: center;
}
.ensemble {
background-color: #FFFFFF;
margin-top: -20px;
font-size: 12px;
padding: 10px;
color: #000000;
width: 750px;
}
.description {
background-color: #ea1c2f;
text-align: justify;
width: 500px;
height: 100px;
overflow: auto;
padding: 10px;
font-size: 12px;
color: #FFFFFF;
}
.messages { width: 500px;
background-color: #C9F26F;
letter-spacing: 7px;
font-size: 12px;
text-align: center;
color: #FFFFFF !important;
padding: 10px;
}
.derniers {
width:100px;
height:100px;
border-radius:80px;
-webkit-border-radius:80px;
-moz-border-radius:80px;
background-color: #F58C46;
font-size: 12px;
text-align: center;
color: #FFFFFF !important;
margin-top: -40px;
padding: 10px;
margin-right: -70px;
}
.liens_img
{
display: block;
width:auto;
height: auto;
overflow: hidden;
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;
}
.liens_img:hover
{
background-color: #C9F26F;
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;
}
.liens_sousfo
{ font-size: 10px;
text-align: left;
color: #000000 !important;
position: absolute;
display: block;
padding: 10px;
height: 100px;
width: 90px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
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;
}
.liens_sousfo a
{ font-size: 10px;
text-align: left;
color: #000000 !important;
}
.liens_sousfo a:hover
{ font-size: 10px;
text-align: left;
color: #FFFFFF !important;
}
.liens_sousfo:hover
{ background-color: #C9F26F;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
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;
}
C'est un ancien code profil que j'utilisais, comme il vient de never-utopia, pense à les créditer quelque part /o/
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 04/10/2011
Re: Petite modification de code catégories ._.
Wouah ! Merci pour tout ce travail ! o/
C'est vraiment génial !!
Mais j'ai juste un léger bug http://quasar.forumactif.org/ c'est l'image rétrécie mais je ne sais pas d'où ça vient ._. si c'est ma faute, je vais tout vérifier mais pour éviter de faire des conneries, je vais d'abord demander. ^^'
Mais merci !
C'est vraiment génial !!
Mais j'ai juste un léger bug http://quasar.forumactif.org/ c'est l'image rétrécie mais je ne sais pas d'où ça vient ._. si c'est ma faute, je vais tout vérifier mais pour éviter de faire des conneries, je vais d'abord demander. ^^'
Mais merci !
Re: Petite modification de code catégories ._.
Mais de rien /o/
Erf, c'est ma faute, j'ai oublié de préciser qu'il fallait une image de 110px en largeur et 120px de hauteur xD
Sinon il faut modifier le code et l'adapter aux images, mais ça ne sera pas joli de les avoir plus petites que les descriptions n_n
Erf, c'est ma faute, j'ai oublié de préciser qu'il fallait une image de 110px en largeur et 120px de hauteur xD
Sinon il faut modifier le code et l'adapter aux images, mais ça ne sera pas joli de les avoir plus petites que les descriptions n_n
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 04/10/2011
Re: Petite modification de code catégories ._.
J'ai mis une image de 110 x 120 px, mais ça ne change rien. ._.
EDIT : Nan, en fait c'est bon !
Merci, franchement tu es génial !!!
EDIT : Nan, en fait c'est bon !
Merci, franchement tu es génial !!!
Dernière édition par Ashling le Dim 11 Mai 2014 - 0:34, édité 1 fois
Re: Petite modification de code catégories ._.
C'est très étrange là D:
Je peux avoir le code ? owo
Je peux avoir le code ? owo
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 04/10/2011
Re: Petite modification de code catégories ._.
Nan, en fait c'est bon. ^^
Parfait !
TU ES VRAIMENT SUPRA MEGA GENIALE !!!
Parfait !
TU ES VRAIMENT SUPRA MEGA GENIALE !!!
Re: Petite modification de code catégories ._.
Ah ça me rassure XD J'ai cru qu'on allait devoir galérer avec ce bug étrange ;A;
Mais....pas besoin de me dire tout ça owo''''
Bonne chance pour la suite de la construction !
EDIT : au fait, j'ai oublié (encore), les icones de forum ne sont pas penchées, sur ton template il te reste des "rotate(0deg)" !
Mais....pas besoin de me dire tout ça owo''''
Bonne chance pour la suite de la construction !
EDIT : au fait, j'ai oublié (encore), les icones de forum ne sont pas penchées, sur ton template il te reste des "rotate(0deg)" !
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 04/10/2011
Re: Petite modification de code catégories ._.
Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
Sujets similaires
» Petite case dans les catégories et forum
» Demande de petite modification de la bannière du forum.
» Petite marge disgracieuse à gauche + modification template memberlist_body
» Page d'accueuil petite modif d'un code
» modifier une petite apparence au niveau des categories
» Demande de petite modification de la bannière du forum.
» Petite marge disgracieuse à gauche + modification template memberlist_body
» Page d'accueuil petite modif d'un code
» modifier une petite apparence au niveau des categories
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