Catégories personnalisées

[Tenessee]

Bonjour à tous!
Tout d'abord merci de prendre le temps de lire ma requête. Voila je viens tout juste de créer un nouveau forum, et je souhaite le personnaliser un maximum, seul hic: Je suis nulle en CSS! J'ai parcouru un peu les rubrique pour voir si quelque chose me plaisait, mais je n'ai jamais trouvé ce que je recherchais. Voila je cherche à faire des catégories de ce genre là:

Spoiler:

C'est à dire faire en sorte qu'il y ai une image au dessus du titre des catégories, en fond de celles-ci et avoir les même formes et contours. Au fait j'aime tout dedans cette composition donc si c'est possible d'avoir quelque chose d’approximatif j'en serais très heureuse!
Merci beaucoup!

[SoraNoHime]

Bonjour

Merci de fournir un schéma de ce que vous désirez plutot que de prendre modèle sur un autre forum. Ainsi, nous pourrons exactement le personnaliser à votre gout.

Pouvez-vous me fournir également votre css, ainsi que votre template index_box s'il est modifé ?

Cordialement.

[Tenessee]

Merci beaucoup pour votre réponse, voila j'ai fais un schéma plus personnel, j’espère seulement qu'il est réalisable et que je n'en demande pas trop:

Spoiler:

Les couleurs ne sont pas à prendre en compte, et la taille des catégories est aussi beaucoup diminuée, elle ferait à peut près 70% de la page index.

Voila le CSS

Code:

.forumline {
-moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px;
-moz-box-shadow: 2px 2px 2px dimgray; -moz-border-radius: 15px 15px 15px 15px;border: 2px solid lavender;

padding: 15px;}

/*Puces invisibles*/
ul, li{
list-style: none;}

/*qeel*/
.qeel {
border : 5px solid #BD964C;
background-color : #ffffff;
padding : 10px;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;

}

/*onglets*/
.onglets {
width:150px;
padding : 5px;
margin : -20px;
border : 3px solid #BD964C;
background-color : #D7C584;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
}

/*partie ou apparaisent les stats*/
.stats{
padding : 5px;
border : 5px solid #ffffff;
background-color : #ffffff;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:5px;
margin : -20px;
}

/*ne pas effacer*/
.trans .row1 {
background-color : transparent;
}
/*ne pas effacer*/
#kaboum .row1 {
background-color : transparent;
}

.postprofile-details.postdetails{background: url('Adresse URL de l'image');}

.name {-moz-border-radius-topleft:25px;-webkit-border-radius-topleft:25px;border-radius-topleft:25px;
-moz-border-radius-topright:25px;-webkit-border-radius-topright:25px;border-radius-topright:25px;
background-color:#3F003F;
text-align:center;
width:70%;margin:auto;
border-bottom:1px dashed white;
padding-top:7px;padding-bottom:7px;}

et le 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="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <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}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </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 -->

[Tenessee]

Up

[SoraNoHime]

C'est réalisable dans un sens, seulement il me faudrait plusieurs données supplémentaires dans ce cas :

- Quelle est votre hiérarchie actuelle ?
- Désirez-vous une barre de défilement pour la description des catégories si elles dépassent une certaine taille, si oui de quelle dimension s'agit-il ?
- Pour l'image No New, New Lock, il me faudrait les dimensions des votres, de plus l'arrondies devra venir de vos images directement.

^^ Pour le reste c'est bon pour moi.

[Tenessee]

Qu'entendez-vous par Hiérarchie?
Pour la barre de défilement c'est exactement ce que je souhaite, disons qu'il la faudrait à partir de 150px de hauteur.
Quant aux dimensions des images ce serait 100*100.
Voila merci beaucoup

[SoraNoHime]

Pour la hiérarchie 'entends la disposition de votre forum.

PA > Affichage > Structure et hiérarchie, sur quel niveau etes vous (complet, moyen etc...) et les catégorie sont elles sépares de l'accueil ^^

[Tenessee]

Ah oui ^^
Alors on est en séparer les catégories sur l'index, moyen.

[Tenessee]

UP

[Tenessee]

Up

[SoraNoHime]

Voici déjà une première ébauche, nous aurons quelques réglages à faire ensuite par la css.

voici votre index_box :

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 --><center><table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr></table>
<table class="tourcat" width="70%" border="0" cellspacing="0" cellpadding="0">
      <!-- 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 align="center" valign="middle">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td 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}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
            </h{catrow.forumrow.LEVEL}>
              <div class="descrip"> <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
            <span class="gensmall">
<div class="sujmsg"><span class="gensmall">Sujets : {catrow.forumrow.TOPICS} Messages : {catrow.forumrow.POSTS}</span></div>
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </span>
          </td>
          <td align="center" valign="middle" height="50">
            <span class="gensmall"><div style="width:150px;" class="dersuj">{catrow.forumrow.LAST_POST}</div></span>
          </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 --></center>

Repérez tout à la fin :

Code:

 <img src="{SPACER}" alt="" height="5" width="1" />

juste avant cela, mettez le lien de votre image sous cette forme :

<img src="lien image" /><br/>

puis dans la css mettez :

Code:

    .tourcat {
    -moz-box-shadow: 2px 2px 2px dimgray;
 -moz-border-radius: 15px 15px 15px 15px;
background-color : #00ffff;
    padding: 15px;}

.dersuj {
margin-left : 5px;
background-color: #ff0000;
 -moz-border-radius: 15px 15px 15px 15px;
height : 150px;
padding : 5px;
align : center center;
}

.descrip{
background-color: #ffffff;
 -moz-border-radius: 15px 15px 15px 15px;
height : 150px;
overflow : auto;
padding : 5px;
align : center center;
}

.sujmsg {
position : relative;
left : 175px;
top : -10px;
}

.secondarytitle {
    -moz-box-shadow: 2px 2px 2px dimgray;
 -moz-border-radius: 15px 15px 0px 0px;
background-color : #0000ff;
height : 50px;
}

à personnaliser.

[Tenessee]

Merci beaucoup! Le résultat est superbe, cependant l'image que vous m'avez dis d'insérer, je ne la vois pas, es-ce normal? Et comment faire pour agrandir la largeur des catégories?

[SoraNoHime]

Vous m'avez demander une largeur à 70 % c'est donc ce que j'ai mis ^^

Pouvez-vous me rendre votre index_box maintenant personnaliser avec l'image en dessous des catégories, ainsi que la css que vous avez personnaliser ?

[Tenessee]

J'ai du me tromper alors car ça rend vraiment petit par rapport au reste du forum (vous pouvez voir en cliquant sur mon site dans mon profil), voila le 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 --><center><table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr></table>
<table class="tourcat" width="70%" border="0" cellspacing="0" cellpadding="0">
      <!-- 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 align="center" valign="middle">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td 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}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
            </h{catrow.forumrow.LEVEL}>
              <div class="descrip"> <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
            <span class="gensmall">
<div class="sujmsg"><span class="gensmall">Sujets : {catrow.forumrow.TOPICS} Messages : {catrow.forumrow.POSTS}</span></div>
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </span>
          </td>
          <td align="center" valign="middle" height="50">
            <span class="gensmall"><div style="width:150px;" class="dersuj">{catrow.forumrow.LAST_POST}</div></span>
          </td>
      </tr>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46">
    <img src="http://i47.servimg.com/u/f47/11/17/87/21/0110.png" /><br/><img src="{SPACER}" height="400" width="700" /></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 --></center>


[SoraNoHime]

Si vous désirez changer la largeur c'est ici :

Code:


<table class="tourcat" width="70%" border="0" cellspacing="0" cellpadding="0">

par contre, je ne vois pas apparaitre votre image dans le template comme je vous avez demandé de la mettre :

Repérez tout à la fin :

Code:

 <img src="{SPACER}" alt="" height="5" width="1" />

juste avant cela, mettez le lien de votre image sous cette forme :

<img src="lien image" /><br/>

donc forcément elle n'apparait pas.

[Tenessee]

Ah super ça marche! J'étais persuadé de l'avoir mise pourtant :S

[SoraNoHime]

Que nous reste-t-il à régler ?

[Tenessee]

Et bien c'est tout, tout est parfait merci beaucoup pour votre aide!
Si vous voulez que je vous crédite sur mon forum, en mettant un lien vers votre site ou forum je le ferrais volontiers ^^