Description des forums personalisée. Onglets

[Lions]

Bonjour, je viens de suivre le tuto https://forum.forumactif.com/questions-reponses-frequentes-f14/affichage-des-forums-avec-onglets-t269891.htm#2408876
Mais j'aimerais savoir comment le rendre plus personnalisé comme ici:

Spoiler:

Donc un contour plus beau , les ombres par dessous. ^^' Je souhaiterais également que le nom/lien du forum se trouve dans le cadre du milieu "Description"
J'aimerais aussi faire pareil que sur l'image pour le "Dernier message posté".
Je vous remercie d'avance pour votre aide.

(Mon template Index_Box est le même que dans le tuto et mon CSS aussi sauf pour la couleur du contour)

Edit: Le lien vers mon forum: http://naruto-koji.forumsrpg.com/index.htm

[Lions]

UP ^^

Et y'a-t-il un moyen pour que les sous-forums n'en soient pas victimes ?

[Lions]

UP ^^'

[Lions]

UP
C'est un si gros problème ? ^^'

[Invité]

Bonjour,

J'ai essayé d'arriver au même résultat, mais il me manque des connaissances ... Je peux vous proposer quelques chose d'approchant:


Le CSS:

Code:

/*description du forum*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      shadow: 3px solid #A8A8A8;
      border-top: 1px solid #000000;
      border-right: 3px solid #000000;
      border-left: 1px solid #000000;
      border-bottom: 1px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
      -webkit-box-shadow: 1px 1px 8px  #000;
      -moz-box-shadow: 1px 1px 8px  #000;}

/*X messages dans X sujets*/
.forum-stats {
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      border-bottom: 0 none !important;
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
      border-top: 1px solid #000000;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      left: 280px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 200px;
      -webkit-box-shadow: 1px 1px 8px #000;
      -moz-box-shadow: 1px 1px 8px #000;}

/* sous-forums*/
.forum-sousforum {
      color: #000000;
      border: 1px solid #000000;
      border-top: 0px !important;
      -moz-border-radius-bottomleft: 14px;
      -moz-border-radius-bottomright: 14px;
      -webkit-border-bottom-right-radius: 14px;
      -webkit-border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border-bottom-left-radius: 14px;
      margin: auto;
      padding: 4px;
      color: #000000;
      width: 50%;
      text-align: center;
      height: 14px;
      font-size: 11px;
      -webkit-box-shadow: 1px 1px 8px #000;
      -moz-box-shadow: 1px 1px 8px #000;}

/*Derniers messages*/
.dernier-message{
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      border-left: 1px dotted #000000;
      border-right: 1px dotted #000000;
      border-top: 1px solid #000000;
      border-bottom:1px solid #000000;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      text-align: center;
      -webkit-box-shadow: 1px 1px 10px #000;
      -moz-box-shadow: 1px 1px 10px #000;}

Le template 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}

        {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="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">
       

<!-- [ DÉBUT DES MODIFICATIONS ] -->

      <div class="forum-stats">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>
<div class="forum-description"><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span><br />
        </h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
<div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        <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>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="dernier-message"><span class="gensmall">Le dernier message est : <br />{catrow.forumrow.LAST_POST}</span></div>
      </td>

<!-- [ FIN DES MODIFICATIONS ] -->

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

Voilà, j'espère que cela vous approchera de votre but.
Cordialement.

[Lions]

Merci c'est parfait
Il ne reste plus que:
Et y'a-t-il un moyen pour que les sous-forums n'en soient pas victimes ?
Mais j'aimerais savoir s'il était possible de diminué l'espace entre la description (dans mon cas; une image) et la partie des sous forums ?

Spoiler:

Encore merci.

[Invité]

Bonsoir,
Ca devrait s'arranger en modifiant un peu une partie du CSS, essayez comme ceci:

Code:

/*description du forum*/
.forum-description {
      margin: auto;
      padding-top: 10px;
      padding-left:10px;
      padding-right: 10px;
      padding-bottom:3px;
      color: #000000;
      width: 80%;
      shadow: 3px solid #A8A8A8;
      border-top: 1px solid #000000;
      border-right: 3px solid #000000;
      border-left: 1px solid #000000;
      border-bottom: 1px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
      -webkit-box-shadow: 1px 1px 8px  #000;
      -moz-box-shadow: 1px 1px 8px  #000;}

Cordialement.

[Lions]

Merci effectivement cela a un peu diminué, quelle partie du css est à changer pour régler selon mes préférences ?

[Invité]

Bonjour,

Il s'agit des marges intérieures, nommées "padding". Donc cette partie là:

Code:

padding-top: 10px;<==en haut
      padding-left:10px;<== à gauche
      padding-right: 10px;<== à droite
      padding-bottom:3px;<== en bas

Cordialement.

[Lions]

Encore merci:)
Il ne me reste plus donc qu'un problème auquel je ne suis pas sûr qu'il y ai une solution;
Y'a-t-il un moyen pour que les sous-forums n'en soient pas victimes ?
Je suppose que ça vient des templates ?

[Invité]

Bonsoir,

J'avoue, honnêtement, ne pas bien comprendre votre question. Je m'en excuse. Pourriez-vous faire un schéma ou donner plus de détails, s'il vous plait?

Cordialement.

[Lions]

Ok j'ai vais essayer d'être le plus clair possible.
Sur l'image ci-dessous vous pouvez voir mes forums; jusqu'ici tout est ok.

Spoiler:

Sur l'image ci-dessous, vous pouvez voir mes SOUS-forums et constater que eux aussi sont touchés par cette mise en page en onglets. Et j'aimerais savoir comment l'annulé pour mes sous-forums.

Spoiler:

Donc avoir une description normal.

[Invité]

Bonjour,

Merci pour cette explication très claire . Par contre je ne pense pas que ce soit possible de changer cela. En effet le template agit sur la structure de tout ce qui est nommé "forum" dans le panneau d'administration. Donc cela englobe, forum et sous-forum.

Bonne journée à vous.

[Lions]

Ok merci pour votre réponse.