catégories personalisées

[Vladislas de mascat]

Bonjour bonsoir,
je souhaite personnaliser mes catégories mais je suis nulle en code. C'est pourquoi je viens demander de l'aide \o/
Forum concerné : http://erona.forumsactifs.net/

Voici le visuel.

A droite il s'agit des sujets et messages et non sujets et forums -_- petit bug au montages ...
Bon je pense que tout est sur le montage mais évidement si il y a des questions je répondrais avec plaisir ^^

voici mon css :

Code:

  .forumline{-moz-border-radius:15px;}
        .bodyline {-moz-border-radius:40px;}

        a { text-decoration: none; }



        a.mainmenu {
        background-color: #7f746f;
        padding: 5px;
        font-weight: bold;
        -moz-border-radius: 15px;
        text-transform: uppercase;
        color : #ffffff;
        font-size: 10px;
        }



        a.forumlink{
        -moz-border-radius: 7px 7px 7px 7px;
        background-color: #F6EDDC;
        border-bottom: 5px double #7f746f;
        color:F1E4DD;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        display:block;
        text-align: center;
        }


        a.forumlink:hover{
        color:rgb(189,103,89);
        font-family: georgia;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 1px;
        text-align: center;}


        .navig {
        position: absolute;
        top: 0px;
    left: 0px;
        width: 100%;
        background-color: #828282;
        border: 3px solid #454440;
        border-bottom: 3px solid #454440;
        border-top: 3px solid #454440;
    height: 25px;
    }

        a.mainmenu img{
        display: none;
        }
        a.mainmenu {
        margin: 5px;
        font-family: Arial;
        font-size: 11px;
        }


/*avatar et rangs css*/
.fondavatar {
background-color : #828283 ;
height : 580px ;
width : 220px ;
padding : 2px ;
border : 5px solid/dotted/dashed/double #ffffff ;
-moz-border-radius: 5px 5px 5px 5px }

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

/*qeel*/
.qeel {
border : 5px solid #BDBDBD;
background-color : #828282;
height : 400px ;
padding : 5px;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
}

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

/*partie ou apparaisent les stats*/
.stats{
padding : 3px;
border : 5px solid #BDBDBD;
background-color : #828282;
height : 150px ;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
text-align : center;
}

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

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

         {CURRENT_TIME}

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

         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

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

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

voila merci d'avance à la personne qui acceptera de prendre ma demande ^^

[Vladislas de mascat]

up °°

[Invité]

Bonjour,

Pour la structure dans le template, il faut:
1. Retirer les colonnes en trop.
Repérez et supprimez:

Code:

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

et

Code:

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

2.Créer un tableau pour mettre la description et les sous-forums côte à côte, et ajouter un script permettant de remplacer la virgule entre les sous forum par un saut de ligne.
Modifiez:

Code:

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

Par:

Code:

        <table width="100%"><tr><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                    </span>
      </td><td width="180"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
</script></td></tr></table></td>

3. Placer les statistiques de messages et sujets au dessus du dernier message.
Remplacez:

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

par:

Code:

<td class="row3 over" align="center" valign="middle" height="50" width="180"><div style="width: 180px;">
        <span class="gensmall">{catrow.forumrow.TOPICS} sujets |{catrow.forumrow.POSTS} messages<br />{catrow.forumrow.LAST_POST}</span></div>

Une fois tout ceci fait, il faudra alors ajouter des class aux différents éléments pour leur donner l'apparence voulue grâce à la feuille de style CSS, soit à l'aide de div, soit directement dans les cellules du tableau.

Cordialement.

[Vladislas de mascat]

ah merci beaucoup ^^ pat contre je suis assez nulle en code alors je ne vois pas comment séparer en deux cadre les sujet et le dernier message, faire une cadre autour des sous forum ni comment faire le titre :/ si vous pouviez juste m'aiguiller moi pauvre inculte ^^"

[Invité]

Pour les titres des catégories, vous avez déjà une class existante, donc il faut lui donner les propriétés voulues. Cette class est "secondarytitle h2". On va en profiter pour supprimer l'affichage "normal" sur l'index pour la partie de titres des catégories. Donc par exemple, on place dans la feuille CSS:

Code:

.secondarytitle h2{
display: block;
width: 80%;
border: 3px solid #ff0000;
padding: 4px;
margin: auto;
background-color: yellow;}

.secondarytitle{
background-image: none !important;
background-color: transparent;}

Pour le reste, il va falloir inventer les class . A vous de choisir des noms qui ne sont pas déjà dans votre feuille de style et qui vous permettront de vous souvenir sur quoi s'applique la modification, prenez des choses simples en un mot.
Prenons la partie des descriptions et sous forums. Il va falloir ajouter 2 class: une pour l'encadrement global, et une pour les sous forums, donc une pour le tableau et une pour la cellule:

<table width="100%" class="CLASS 1"><tr><td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
</span>
</td><td width="180" class="CLASS 2"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
</script></td></tr></table></td>

Ensuite, vous ajouterez à votre feuille de style CSS;

Code:

.CLASS 1{propriétés}
.CLASS 2{propriété}

Pour les propriétés, vous trouverez les plus courantes sur cette page (clic!).

Pour la partie dernier message c'est le même principe, sauf qu'on place des div pour séparer les éléments:

<td class="row3 over" align="center" valign="middle" height="50" width="180"><div style="width: 180px;">
<div class="CLASS 3"><span class="gensmall">{catrow.forumrow.TOPICS} sujets |{catrow.forumrow.POSTS} messages</span></div><br /><div class="CLASS 4"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></div>

Cordialement.