Apparence catégorie

[Isunonakani]

Bonjour, bonjour.
Je suis en train de bidouiller mes templates pour tenter de changer l'apparence de mes catégories, mais elles me donnent du fil à retordre.
Voilà ce que j'ai:

Et j'aimerai obtenir ceci:

En gros faire disparaître les traits des catégories, faire passer le bouton des nouveaux/anciens messages dans la description de la catégorie pour ne faire qu'un seul tableau. Et modifier l'aspect du titre du forum pour qu'il soit compris dans l'espèce de fond arrondi

Voici mon template:


Et mon css:


Merci d'avance pour votre aide

[SoraNoHime]

Bonjour

pour faire ceci il me faudrait également votre niveau de hiérarchie, de plus pouvez-vous me fournir des scan moins sombres que mes yeux de taupes puissent voir

Cordialement.

[Isunonakani]

J'ai tenté de bidouiller pour éclaircir au mieux =)



Et pour la hiérarchie:


Cordialement,

[SoraNoHime]

C'est impeccable ainsi ^^ Merci bien.

e vais éplucher ce que vous m'avez fourni puis je vous expliquerai la marche à suivre.

Cordialement.

[Isunonakani]

Merci beaucoup pour votre aide

Cordialement,

[SoraNoHime]

Changements dans le template

1. Repérez ceci :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

et remplacez le par :

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

2. Puis ceci :

Code:

<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
     
      </tr>
      <!-- END tablehead -->

à remplacer par :

Code:

<th  nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
     
      </tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
      <!-- END tablehead -->

3. Ce code :

Code:

<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">
                  <div class="categotitl"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></div>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
      </tr>

Remplacez le par :

Code:

<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="3" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <div class="categotitl"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></div>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          </tr>

4. Enfin ceci :

Code:

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

à remplacer par :

Code:

      <td class="{catrow.forumrow.INC_CLASS}"><div style="width :50px;">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"  class="caticon" /></div>
          </td>

Changements dans la css

1. Dans la css changez :

Code:

    .categotitl {
    -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-bottomleft: 10px; -webkit-border-radius-topright: 10px; background-color: #121717; display: block; font-family: georgia; font-weight: bolder; height: 45px; letter-spacing: -2px; margin: 15px 90px -10px; text-align: center; text-transform: lowercase!important;
    }

par :

Code:

  .categotitl {
 background-color: #121717; display: block; font-family: georgia; font-weight: bolder; height: 45px; letter-spacing: -2px;  text-align: left; text-transform: lowercase!important;
    }

2. Ajoutez ceci :

Code:

img.caticon {
position : absolute;
float : left;
margin-left : 5px;
margin-top : 10px;
}

3. et ajoutez ceci :

Code:

.secondarytitle {
background-color : #ff0000;
 -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; padding: 5px;
width : 300px; float : right;
}

Cela vous convient-il ?

[Isunonakani]

Han c'est génial merci beaucoup, vraiment
Par contre j'ai quelques petits problèmes d'espace Oo

Le titre de ma catégorie flotte au dessus du cadre et j'aimerai qu'il y en ait un aussi entre la fin du cadre de description et le cadre 'premier forum' =S

EDIT: j'ai réussi à modifier l'espace entre les catégories et le cadre 'premier forum' =)

[SoraNoHime]

Puis-je réavoir votre template désormais modifié, ainsi que votre nouvelle css ?

Cordialement.

[Isunonakani]

Les voici =)

Template:


CSS:


Cordialement,

[SoraNoHime]

Repérez ceci :

Code:

 </tr></br>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

et changez le ainsi :

Code:

 </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

Cordialement.

[Isunonakani]

Merci beaucoup pour votre aide Tout fonctionne à merveille

[SoraNoHime]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif