Forme des catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Forme des catégories

Message par Igorette. le Dim 7 Oct 2012 - 15:43

    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.


Dernière édition par Igorette. le Jeu 18 Oct 2012 - 18:54, édité 1 fois

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Lun 8 Oct 2012 - 17:40

Up

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Mar 9 Oct 2012 - 19:31

Up

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Mer 10 Oct 2012 - 19:59

Up

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 11 Oct 2012 - 16:35

Up

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.

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Jeu 11 Oct 2012 - 16:44

Tu l'as mis sur un forum test ? On peut voir ce que tu as deja fait ? ^^

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 11 Oct 2012 - 17:02

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 Razz

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Jeu 11 Oct 2012 - 17:06

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' ^^

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 11 Oct 2012 - 17:25

Je peux voir ton indexbox modifié ? ^^

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 Very Happy

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Jeu 11 Oct 2012 - 17:56

j'aimerais une image (toujours la même) au dessus du titre des forums
cette image la ^^

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 =)

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 11 Oct 2012 - 18:10

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 Smile

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Jeu 11 Oct 2012 - 18:17

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).

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.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.

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 11 Oct 2012 - 18:26

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 ?

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Jeu 11 Oct 2012 - 18:31

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 ^^

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Sam 13 Oct 2012 - 10:20

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 :
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}
On peut normalement cliquer sur le nom pour accepter au forum et à ces sous-forums, ici ce n'est plus le cas. Je ne peux plus cliquer dessus, ce qui pose évidement un grooos problème. (cf. le schéma en dessous)

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 Razz


Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Lun 15 Oct 2012 - 11:49

Up

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Lun 15 Oct 2012 - 12:23

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 ? ^^

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Lun 15 Oct 2012 - 12:40

Ahhh ! Suis-je bête, autant pour moi alors ! ^^

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;
}

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Lun 15 Oct 2012 - 16:34

testez .forumline{border : 5px solid #000;} ?

Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Mar 16 Oct 2012 - 21:07

Merci beaucoup ! C'est exactement ce que je voulais Smile !

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) ?

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Kuro Akuma le Mer 17 Oct 2012 - 18:28

pour enlever le calendrier, aller dans module, calendrier, activer non
pareil pour le portail.


Kuro Akuma
***

Féminin
Messages : 105
Inscrit(e) le : 22/07/2011

http://arche-noe.lebonforum.com/
Kuro Akuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forme des catégories

Message par Igorette. le Jeu 18 Oct 2012 - 18:54

Merci beaucoup ! Very Happy Tout marche à merveille ^^
Encore merci & bonne soirée !

Sujet résolu.

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum