Forme des 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
Forme des catégories
Bonjour,
Alors, voilà. J'ai un petit problème, j'ai une idée bien précise de la forme que je voudrais donner à mes catégories mais pas moyen d'y arriver. J'ai quelque chose qui y ressemble vaguement (je peux vous montrez si nécessaire) mais sans plus. (j'ai réussi à mettre le cadre avec l'image new, no new etc à gauche mais je n'arrive pas à faire le reste)
Voici un schéma explicatif de ce à quoi j'aimerais arriver.
Sinon, je peux vous donner mes templates et mon css (qui concerne la partie sur les catégories)
Bonne soirée, merci d'avance, Igorette.
Alors, voilà. J'ai un petit problème, j'ai une idée bien précise de la forme que je voudrais donner à mes catégories mais pas moyen d'y arriver. J'ai quelque chose qui y ressemble vaguement (je peux vous montrez si nécessaire) mais sans plus. (j'ai réussi à mettre le cadre avec l'image new, no new etc à gauche mais je n'arrive pas à faire le reste)
Voici un schéma explicatif de ce à quoi j'aimerais arriver.
Sinon, je peux vous donner mes templates et mon css (qui concerne la partie sur les catégories)
Bonne soirée, merci d'avance, Igorette.
Dernière édition par Igorette. le Jeu 18 Oct 2012 - 18:54, édité 1 fois
Re: Forme des catégories
Up
Voici mon template :
& mon css (catégories seulement)
Je peux faire une capture d'écran si besoin est pour vous montrez où j'en suis.
Voici mon template :
- 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="0" 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>
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
<td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<td>
</td>
<td id="essaye" class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<br>
</span>
</h{catrow.forumrow.LEVEL}>
<table align="center">
<tr>
<td>
<div class=last_post><div style="margin-top:-50px; margin-left:-15px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="topic_poste"><span class="gensmall"><center>{catrow.forumrow.LAST_POST}</center></div>
<div class="topic_post"><center> <span class="gensmall"><b>Topics:</b> {catrow.forumrow.TOPICS}♣ <b>Posts:</b>{catrow.forumrow.POSTS}</span></center></div>
</div>
</td><td><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><span class="gradualfader">{catrow.forumrow.FORUM_NAME}</span></a>
<div id="descripti"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="lienss"><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center></div>
</td>
</tr>
</table>
</span>
</div></br></td>
<!-- BEGIN forum_link_no -->
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->
& mon css (catégories seulement)
- Code:
/* ********** CATEGORIE ********** */
#descripti{
width:550px;
height: 160px;
font-family: Georgia;
font-size: 12px;
background-color: #e8a787;
text-align: justify;
padding-left: 25px;
padding-right: 10px;
margin-bottom: 10px;
margin-top:6px;
background-color:#e4d7c6;
}
.lienss
{
width:575px;
height: 15px;
Border-top: 3px double #e8a787;
font-weight: normal;
font-family:Georgia;
font-size: 10px;
padding-left:10px;
margin-top:-20px;
padding-top:10px;
background-color: #847665;
}
.descriptiion{
width:500px;
height: 120px;
font-family: Georgia;
font-size: 12px;
font-weight:normal;
border-left: 3px double #e8a787;
background-color: #847665;
text-align: justify;
padding-left: 10px;
padding-right: 10px;
margin-left:5px;
margin-top:5px;
margin-bottom:-10px;
padding-top:5px;
overflow: auto;}
.icon_cat
{
width:80px;
height: 80px;
background-color: #847665;
padding: 5px:
margin-left:5px;
margin-top:10px;
margin-bottom:-10px;
}
.last_post{
width: 160px;
height: 120px;
margin-left: 10px;
margin-right: 0px;
margin-top: 35px;
margin-bottom: 20px;
background-color: #847665;
color:#352021;
font-family: Georgia;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
}
.topic_poste
{margin-top:8px;}
.topic_post{
border-top: 3px solid #e3e3e3;
margin-top:5px;
padding-top:5px;
}
a.forumlink:link, a.forumlink:visited {
font-size: 24px;
font-family: Times New Roman;
text-align : right ;
color: #e8a787;
font-size: 18px;
padding-left: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-top: 3px;
margin-bottom: -10px;
margin-right:40px;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ffffff;
font-weight:normal;
}
a.forumlink:hover, a.forumlink:hover:visited {
color: #c03150;
display: block;
}
.description_contenu
{
position: absolute;
display: block;
width: 500px;
height: 80px;
overflow: auto;
background-color: #E3E3E3; => couleur de fond
font-size: 10px; => taille du texte
color: #4D4444; => couleur de texte
text-align: jutsify; => alignement du texte
padding: 5px;
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;
}
.description_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
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;
}
.titrecategorie
{
font-family: times new roman;
color: #e8a787;
font-size: 30px;
margin-left: 0px;
text-transform:lowercase;
text-shadow: 1px 1px 1px #ffffff; /*ombre sur le texte*/
}
/* fin catégorie */
Je peux faire une capture d'écran si besoin est pour vous montrez où j'en suis.
Re: Forme des catégories
Tu l'as mis sur un forum test ? On peut voir ce que tu as deja fait ? ^^
Re: Forme des catégories
Bonjour,
Oui, voilà ce que j'obtiens :
J'aimerais que les deux ''cadres'' soient plus rapprochés, du moins qu'ils ne soient plus séparés. Qu'ils soient comme sur mon schéma si possible est. Ainsi que réussir à avoir un fond pour le cadre de l'ensemble de la catégorie & un fond d'une autre couleur pour les forums dans la catégorie (descriptions etc) Je ne sais pas si c'est compréhensible ^^
Puis comme sur mon schéma plus haut, j'aimerais une image (toujours la même) au dessus du titre des forums qui eux seront centrés & avec un fond de couleur différente du reste.
Merci d'avance
Oui, voilà ce que j'obtiens :
J'aimerais que les deux ''cadres'' soient plus rapprochés, du moins qu'ils ne soient plus séparés. Qu'ils soient comme sur mon schéma si possible est. Ainsi que réussir à avoir un fond pour le cadre de l'ensemble de la catégorie & un fond d'une autre couleur pour les forums dans la catégorie (descriptions etc) Je ne sais pas si c'est compréhensible ^^
Puis comme sur mon schéma plus haut, j'aimerais une image (toujours la même) au dessus du titre des forums qui eux seront centrés & avec un fond de couleur différente du reste.
Merci d'avance
Re: Forme des catégories
Je peux voir ton indexbox modifié ? ^^
Et aussi pour les sous forum, il reste la ? ou tu les enleve (comme dans le shema de base) ?
Tu peux me donner une image generique pour le haut de ton forum ?
Pour la hierarchie des forum, tu as mis quoi ?
Une fois que j'aurai ca je t'explique comme changer ta cat' ^^
Et aussi pour les sous forum, il reste la ? ou tu les enleve (comme dans le shema de base) ?
Tu peux me donner une image generique pour le haut de ton forum ?
Pour la hierarchie des forum, tu as mis quoi ?
Une fois que j'aurai ca je t'explique comme changer ta cat' ^^
Re: Forme des catégories
Je peux voir ton indexbox modifié ? ^^
Voici :
Et aussi pour les sous forum, il reste la ? ou tu les enlève (comme dans le schéma de base) ?
On les enlève ^^
Tu peux me donner une image générique pour le haut de ton forum ?
Le haut ? L'header & la page d'accueil ?
Pour la hiérarchie des forum, tu as mis quoi ?
Séparer les catégories sur l'index, moyen.
Merci d'avance
Voici :
- 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="0" 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>
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
<td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<td>
</td>
<td id="essaye" class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<br>
</span>
</h{catrow.forumrow.LEVEL}>
<table align="center">
<tr>
<td>
<div class=last_post><div style="margin-top:-50px; margin-left:-15px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="topic_poste"><span class="gensmall"><center>{catrow.forumrow.LAST_POST}</center></div>
<div class="topic_post"><center> <span class="gensmall"><b>Topics:</b> {catrow.forumrow.TOPICS}♣ <b>Posts:</b>{catrow.forumrow.POSTS}</span></center></div>
</div>
</td><td><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><span class="gradualfader">{catrow.forumrow.FORUM_NAME}</span></a>
<div id="descripti"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="lienss"><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center></div>
</td>
</tr>
</table>
</span>
</div></br></td>
<!-- BEGIN forum_link_no -->
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->
Et aussi pour les sous forum, il reste la ? ou tu les enlève (comme dans le schéma de base) ?
On les enlève ^^
Tu peux me donner une image générique pour le haut de ton forum ?
Le haut ? L'header & la page d'accueil ?
Pour la hiérarchie des forum, tu as mis quoi ?
Séparer les catégories sur l'index, moyen.
Merci d'avance
Re: Forme des catégories
cette image la ^^j'aimerais une image (toujours la même) au dessus du titre des forums
- Code:
<table align="center">
<tr>
<td>
<div class=last_post><div style="margin-top:-50px; margin-left:-15px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="topic_poste"><span class="gensmall"><center>{catrow.forumrow.LAST_POST}</center></div>
<div class="topic_post"><center> <span class="gensmall"><b>Topics:</b> {catrow.forumrow.TOPICS}♣ <b>Posts:</b>{catrow.forumrow.POSTS}</span></center></div>
</div>
</td><td><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><span class="gradualfader">{catrow.forumrow.FORUM_NAME}</span></a>
<div id="descripti"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="lienss"><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center></div>
</td>
</tr>
</table>
</span>
</div></br></td>
la partie interessante se trouve la (c'est ta categorie).
Donc, comme tu as pu le remarquer :
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} = l'affichage des sous forums
{catrow.forumrow.FORUM_DESC} = la description du forum
{catrow.forumrow.FORUM_NAME} = le nom du forum
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> = l'image no news/news/lock
{catrow.forumrow.LAST_POST} = affichage du dernier message posté, avec date et heure (non dissociable)
{catrow.forumrow.TOPICS} = nombre de sujet
{catrow.forumrow.POSTS} = nombre de messages
donc, pour reorganiser tout ça comme tu le désire, il va te falloire faire un tableau :
Le tableau aura deux colones, une a gauche qui accueillera l'image et une a droite qui aura toute la partie texte + l'image en haut
donc <table><tr><td>gauche</td><td>droite</td></tr></table>*
Gauche
Tu mets donc le code de l'image news. Si tu veux la centrer il faudra l'entourer d'un center HTML.
Si tu veux un retour a la ligne pour ton dernier message, tu mets un <br/> (= a la ligne). Ensuite tu poste la partie du dernier message posté, que tu peux entourer soit de <span class="genmed"></span> soit de ta propre classe (couleur taille etc). Genmed est automatique en fait, par rapport a ce que tu as mis dans ta fiche de couleur du forum.
Droite
Si tu veux tout centrer tu peux deja ouvrir une div avec une class pour centrer le tout. Ensuite dans cette div, tu postera l'image (en HTML <img src="lien"/>), puis un retour a la ligne (<br/>).
Ensuite tu poste ton titre de forum et ta description. Si tu veux qu'elles aient une apparence seciale, il faut les entourer de div classer également ^^
Pour oter les sous forum, tu vas dans affichage et tu enleve l'affichage de sous forum ^^
J'espere que tout est claire =)
Re: Forme des catégories
Merci pour votre réponse. ^^ Donc, le tableau je l'intègre dans le template ? Mais je ne comprends pas où ?
Par contre, l'image au dessus du titre des forums ça ne serait pas l'image new/no new etc mais seulement une partie du header qui serait au dessus de chaque titre de forum pour 'décorer'.
Par contre je ne sais pas réellement par quoi remplacer le 'gauche' & le 'droite' du code du tableau. (je ne sais pas comment réussir à obtenir ce que je veux)
Mais encore merci
Par contre, l'image au dessus du titre des forums ça ne serait pas l'image new/no new etc mais seulement une partie du header qui serait au dessus de chaque titre de forum pour 'décorer'.
Par contre je ne sais pas réellement par quoi remplacer le 'gauche' & le 'droite' du code du tableau. (je ne sais pas comment réussir à obtenir ce que je veux)
Mais encore merci
Re: Forme des catégories
J'ai expliqué en dessous du tableau ce qui doit etre mis ou.
Et oui il faut mettre dans le template à la place du code que j'ai mis tout en haut (la partie qui nous interesse).
Pour l'image au dessus de ta description je n'ai pas parlé de l'image no news, mais bien d'une image normale (avec <img src="url de l'image"/>).
donc :
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} = l'affichage des sous forums
{catrow.forumrow.FORUM_DESC} = la description du forum
{catrow.forumrow.FORUM_NAME} = le nom du forum
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> = l'image no news/news/lock
{catrow.forumrow.LAST_POST} = affichage du dernier message posté, avec date et heure (non dissociable)
{catrow.forumrow.TOPICS} = nombre de sujet
{catrow.forumrow.POSTS} = nombre de messages
<table><tr><td><img 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}</td>
<img src="url de l'image"/>
<td>{catrow.forumrow.FORUM_NAME}<br/>
{catrow.forumrow.FORUM_DESC}</td></tr></table>
organisé ainsi, il ne reste qu'a ajouter div, span et class pour aranger esthetiquement votre forum.
Et oui il faut mettre dans le template à la place du code que j'ai mis tout en haut (la partie qui nous interesse).
- Code:
<table align="center">
<tr>
<td>
<div class=last_post><div style="margin-top:-50px; margin-left:-15px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="topic_poste"><span class="gensmall"><center>{catrow.forumrow.LAST_POST}</center></div>
<div class="topic_post"><center> <span class="gensmall"><b>Topics:</b> {catrow.forumrow.TOPICS}♣ <b>Posts:</b>{catrow.forumrow.POSTS}</span></center></div>
</div>
</td><td><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><span class="gradualfader">{catrow.forumrow.FORUM_NAME}</span></a>
<div id="descripti"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<div class="lienss"><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center></div>
</td>
</tr>
</table>
</span>
</div></br></td>
Pour l'image au dessus de ta description je n'ai pas parlé de l'image no news, mais bien d'une image normale (avec <img src="url de l'image"/>).
donc :
{catrow.forumrow.FORUM_NAME} = le nom du forum
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> = l'image no news/news/lock
{catrow.forumrow.LAST_POST} = affichage du dernier message posté, avec date et heure (non dissociable)
{catrow.forumrow.POSTS} = nombre de messages
<table><tr><td><img 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}</td>
<img src="url de l'image"/>
<td>{catrow.forumrow.FORUM_NAME}<br/>
{catrow.forumrow.FORUM_DESC}</td></tr></table>
organisé ainsi, il ne reste qu'a ajouter div, span et class pour aranger esthetiquement votre forum.
Re: Forme des catégories
D'accord merci pour votre aide, j'essaie de modifier tout cela & je reviens dès que c'est fait.
Merci encore ^^
& j'aimerais savoir, comment faire pour qu'il y est différents fonds ? Par exemple, un pour les catégories, un pour le fond des forums, un pour le titre des forums etc ?
Merci encore ^^
& j'aimerais savoir, comment faire pour qu'il y est différents fonds ? Par exemple, un pour les catégories, un pour le fond des forums, un pour le titre des forums etc ?
Re: Forme des catégories
avec une class. Vous entouré une partie d'une div ou d'un span, vous lui donnez une class, et vous modifier tout ça dans le css
ex:
<div class="descrip">{catrow.forumrow.FORUM_DESC}</div>
dans la feuille css:
.descrip{background-color: #ccc;
color: #000;
text-align:center;
padding: 5px;
border-shadow : 0 0 5px #000;}
etc ^^
ex:
<div class="descrip">{catrow.forumrow.FORUM_DESC}</div>
dans la feuille css:
.descrip{background-color: #ccc;
color: #000;
text-align:center;
padding: 5px;
border-shadow : 0 0 5px #000;}
etc ^^
Re: Forme des catégories
Bonjour,
Tout marche bien, j'ai réussi plus ou moins à obtenir ce que je voulais mais il y a quelques problèmes que j'ai du mal à résoudre.
1. J'aimerais mettre un cadre autour de ce que j'ai entouré en rouge sur le schéma ci-dessous. Malheureusement, je n'y arrive pas même avec :
2. Il y a un petit soucis au niveau du nom des titres des forums
3. Et j'aimerais réduire la largeur du forum en général, mais même à 10% rien ne change. Est-ce qu'il est possible de le faire via le CSS ? EDIT : Je viens de me rendre compte que c'est à cause de la barre de navigation qui est ''trop longue''. Je n'arrive pas à enlever certains menus inutiles (exemple : calendrier) etc, mais mon problème est résolu quand je coche ''non'' à ''Forcer la barre de navigation à rester sur une ligne''. Mais ce n'est pas très esthétique. Je ne peux pas modifier un template pour enlever certains menus (au moins la barre de navigation se réduira énormément & la largeur du forum aussi) ?
Merci d'avance
Tout marche bien, j'ai réussi plus ou moins à obtenir ce que je voulais mais il y a quelques problèmes que j'ai du mal à résoudre.
1. J'aimerais mettre un cadre autour de ce que j'ai entouré en rouge sur le schéma ci-dessous. Malheureusement, je n'y arrive pas même avec :
- Code:
-moz-border-radius: 10px;
border: 5px solid #f4f4f40
2. Il y a un petit soucis au niveau du nom des titres des forums
- Code:
{catrow.forumrow.FORUM_NAME}
3. Et j'aimerais réduire la largeur du forum en général, mais même à 10% rien ne change. Est-ce qu'il est possible de le faire via le CSS ? EDIT : Je viens de me rendre compte que c'est à cause de la barre de navigation qui est ''trop longue''. Je n'arrive pas à enlever certains menus inutiles (exemple : calendrier) etc, mais mon problème est résolu quand je coche ''non'' à ''Forcer la barre de navigation à rester sur une ligne''. Mais ce n'est pas très esthétique. Je ne peux pas modifier un template pour enlever certains menus (au moins la barre de navigation se réduira énormément & la largeur du forum aussi) ?
Merci d'avance
Re: Forme des catégories
autour du div du nom de forum il fallait laisser cette partie : <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"> ^^"
je peux voir votre css ? ^^
je peux voir votre css ? ^^
Re: Forme des catégories
Ahhh ! Suis-je bête, autant pour moi alors ! ^^
Le voici :
Le voici :
- Code:
.descrip{
background-color: #5d2023;
color: #547d2f;
text-align:center;
padding: 5px;
font-size: 12px;
}
.tout{
background-color: #e0ba68;
height: 230px;
color: #899630;
text-align:center;
padding: 5px;
-moz-border-radius: 10px;
border: 25px solid #f4f4f40;
font-size: 12px;
}
.titre{
background-color: #3e1416;
color: #899630;
text-align:center;
padding: 5px;
font-size: 14px;}
.last{
background-color: #3e1416;
height: 85px;
color: #899630;
text-align:center;
padding: 5px;
-moz-border-radius: 10px;
border: 5px solid #f4f4f40;
font-size: 12px;}
/* ********** CATEGORIE ********** */
#descripti{
width:550px;
height: 160px;
font-family: Georgia;
font-size: 12px;
background-color: #5d2023;
text-align: justify;
padding-left: 25px;
padding-right: 10px;
margin-bottom: 10px;
margin-top:6px;
background-color:#5d2023;
}
.descriptiion{
width:500px;
height: 100px;
font-family: Georgia;
font-size: 12px;
font-weight:normal;
background-color: #5d2023;
text-align: justify;
padding-left: 10px;
padding-right: 10px;
margin-left:5px;
margin-top:5px;
margin-bottom:-10px;
padding-top:5px;
overflow: auto;}
.description_contenu
{
position: absolute;
display: block;
width: 500px;
height: 80px;
overflow: auto;
background-color: #e0ba68;
font-size: 12px;
color: #3E1416;
text-align: jutsify;
padding: 5px;
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;
}
.description_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
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;
}
/* fin catégorie */
a.mainmenu {
text-decoration: none;
-moz-border-radius :10px;
-webkit-border-radius: 10px;
background-color:#e0ba68;
border-left:5px solid #5D8639;
border-right:5px solid #5D8639;
color:#4D4444;
font-size:13px;
text-align:center;
padding-right:5px;
padding-left:3px;}
a .mainmenu
{
margin-bottom:30px
}
/*ENLEVER LES BORDURES GENANTES*/
.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}
input, select {
color : #4D4444;
font: normal 11px Verdana;
border-left:5px solid #899630;
border-right:5px solid #899630;
-moz-border-radius :10px;
-webkit-border-radius: 10px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
background-color: #B0A494
-moz-border-radius: 30px 30px 30px 30px;
}
textarea, select {
color : #4D4444;
font: normal 11px Verdana;
border-left:5px solid #899630;
border-right:5px solid #899630;
-moz-border-radius :10px;
-webkit-border-radius: 10px;
border-left-style: solid;
border-left-width: 3px;
border-right-style: solid;
border-right-width: 3px;
background-color: #B0A494;
-moz-border-radius: 30px 30px 30px 30px;
}
.widget_flottant{
width: 120px;
height: 120px;
position: fixed;
top: 250px;
right: 8px;
}
.postbody a,.postbody a:link,.postbody a:hover {border-bottom: 1px dotted;}
a {
text-decoration:none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:active
{
text-decoration: none;
}
div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}
div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;}
.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.bouton-profil {
cursor: pointer; /* curseur au survol */
margin: 2px 0; /* petite marge en haut et en bas */
padding: 2px; /* espacement entre le texte et la bordure */
text-align: center; /* centrage du texte dans le bloc */
/* -- mise en forme -- */
background: #c3cee0; /* couleur de fond */
border-left:5px solid #899630;
border-right:5px solid #899630;
-moz-border-radius :10px;
-webkit-border-radius: 10px;
color: #ffffff; /* couleur texte */
font-size: 11px; /* taille du texte */
font-variant: small-caps; /* effet petites majuscules */
font-weight: bold; /* effet gras */
letter-spacing: 2px; /* espace entre les lettres */
}
.profil-cache {
border: 3px double #515d70;
margin: 2px 0;
padding: 2px;
}
/*INFOBULLE-DESCRIPTION-*/
div.infobulle3 {
position: relative;
cursor:cross; /*donne au curseur la forme de petite main, comme sur un lien*/
}
/*INFOBULLE-DESCRIPTION-*/
div.infobulle3 div{
display: none; /* ceci masque l'infobulle */
}
/*INFOBULLE-DESCRIPTION-*/
div.infobulle3:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
/*INFOBULLE-DESCRIPTION-*/
div.infobulle3:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;
width: 140px
top: 5px; /* on positionne notre infobulle */
left: 15px;
background-image: url("http://nsa29.casimages.com/img/2012/08/14/120814124500874733.png");/* arrière-plan de l'infobulle */
color: #f4f4f4; /* texte dans l'infobulle */
margin-bottom: 10px;
margin-top: 10px;
margin-right:10px;
margin-left: 10px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial /* Police du texte */
font-size: ; 9px; /* Grosseur du texte soit 100%, 190% étant plus gros */
text-align: justify; /* Alignement du texte : left, right, center ou justify */
/* bordures de votre infobulle*/
border: 1px dotted #f4f4f4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
/*CONTENU DES DESCRIPTIONS*/
.description {
text-align:justify;
padding:5px;
word-spacing:2pt;
color: #f4f4f40;
font-size: 10px; }
.bodyline {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.bodyline
{
-moz-border-radius: 10px;
border: 5px solid #f4f4f40;
}
/*CODE CITATION CODE SPOILER*/
.quote
{
background-image: url("http://nsa29.casimages.com/img/2012/08/14/120814124500874733.png");
color: #899630;
border: #4D4444;
padding-left: 10px;
padding-right: 15px;
}
.code
{
background-image: url("http://nsa29.casimages.com/img/2012/08/14/120814124500874733.png");
color: #899630;
border: #4D4444;
padding-left: 10px;
padding-right: 15px;
}
.spoiler
{
background-image: url("http://nsa29.casimages.com/img/2012/08/14/120814124500874733.png");
color: #899630;
border: #4D4444;
padding-left: 10px;
padding-right: 15px;
}
.spoiler_closed hidden, .spoiler_content, .spoiler_closed
{
background-image: url("http://nsa29.casimages.com/img/2012/08/14/120814124500874733.png");
color: #899630;
border: #4D4444;
padding-left: 10px;
padding-right: 15px;
border: none
}
/*FIN CODE CITATION ETC*/
/*CODE EN VRAC POUR AMELIORER RENDU DU FORUM*/
a{
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
color: #e3e3e3 !important;
}
/*DEBUT CODE DESCRIPTION*/
/*INFOBULLE-DESC*/
div.infobulle {
position: relative;
cursor:cross;
}
/*INFOBULLE-DESC*/
div.infobulle div{
display: none;
}
/*INFOBULLE-DESC*/
div.infobulle:active {
background: none;
z-index: 999;
}
/*INFOBULLE-DESC*/
div.infobulle:active div{
display: block;
position: absolute;
width: 450px
top: 10px;
left: 10px;
background: #c0b093;
color: black;
margin-bottom: 20px;
margin-top: 20px;
margin-right: 30px;
margin-left: 30px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial
font-size: ; 11px/
text-align: justify !important;
text-shadow: 1px 1px 1px #fff;
border: 2px outset #ac9269;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
/*CKOI*/
.contient {
text-align: right;
font-family: arial;
font-size: 10px;
color: #826d52;
text-shadow: 1px 1px 2px #ad9d88;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #d9ccb9;
border: 1px solid #ecd980;
cursor: pointer;
margin-bottom: -1px;
}
.mon_onglet:hover{
background: #775036;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #775036;
border-top: 1px solid #2f2d27;
border-right: 1px solid #2f2d27;
border-left: 1px solid #2f2d27;
border-bottom: 1px solid #2f2d27;
cursor: pointer;
margin-bottom: -1px;
}
.clear{
clear: both;
}
.mon_contenu{
color: #666;
background: #dfd6bd;
border: 1px solid #68ce3e;
padding: 10px;
margin: -1px;
}
#mes_contenus, #mes_onglets{
width: 400px;
}
/*FIN CODE DESCRIP*/
/*CONTOUR DES AVATARS EN COULEUR*/
.postdetails.poster-profile a img
{
border-left:5px solid #899630;
border-right:5px solid #899630;
-moz-border-radius :10px;
-webkit-border-radius: 10px;
}
/* PAS DE MARGE EN HAUT DU FORUM */
body{
margin-top: 2px;
margin-bottom: 2px;
}
Re: Forme des catégories
testez .forumline{border : 5px solid #000;} ?
Re: Forme des catégories
Merci beaucoup ! C'est exactement ce que je voulais !
Il me reste un dernier petit soucis :
Il me reste un dernier petit soucis :
3. Et j'aimerais réduire la largeur du forum en général, mais même à 10% rien ne change. Est-ce qu'il est possible de le faire via le CSS ? EDIT : Je viens de me rendre compte que c'est à cause de la barre de navigation qui est ''trop longue''. Je n'arrive pas à enlever certains menus inutiles (exemple : calendrier) etc, mais mon problème est résolu quand je coche ''non'' à ''Forcer la barre de navigation à rester sur une ligne''. Mais ce n'est pas très esthétique. Je ne peux pas modifier un template pour enlever certains menus (au moins la barre de navigation se réduira énormément & la largeur du forum aussi) ?
Re: Forme des catégories
pour enlever le calendrier, aller dans module, calendrier, activer non
pareil pour le portail.
pareil pour le portail.
Re: Forme des catégories
Merci beaucoup ! Tout marche à merveille ^^
Encore merci & bonne soirée !
Sujet résolu.
Encore merci & bonne soirée !
Sujet résolu.
Sujets similaires
» forme de mes catégories
» Forme des forums/catégories
» changer la forme des catégories
» Mise en forme des catégories
» Mise en forme des catégories
» Forme des forums/catégories
» changer la forme des catégories
» Mise en forme des catégories
» Mise en forme des catégories
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