Modifier l'apparence des catégories et des forums

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

  • 0

Résolu Modifier l'apparence des catégories et des forums

Message par Saranna le Dim 25 Sep 2011 - 2:37

Bonsoir (ou bonjour selon l'heure de lecture ^^)

Je suis fondatrice d'un forum et j'aimerais beaucoup modifier cette fameuse apparence des catégories et des forums en leur donnant un aspect particulier

Spoiler:

Cependant au lieu que les boutons (new, no new, lock) soient à droite je voudrais qu'ils se trouvent à gauche.

Pour information, je n'ai encore modifié aucun template, je suis sous firefox, et mon css actuel est le suivant:

Code:
body
{
background-position: top center;
background-repeat: no-repeat;
letter-spacing: 1px;
}

a
{
text-decoration: none;
font-variant: small-caps;
}

a {outline:none;}

a:hover
{
text-decoration: none;
}

#i_logo
{
background-image: url(http://host.image.files.free.fr/host/4a3f44e88bb33ban2.jpg);
background-position: top center;
background-repeat: no-repeat;
width: 1400px;
height: 500px;
margin-top: -18px;
margin-bottom: -60px;
margin-right: 14px;
}

#page-body
{
background-image: url(http://host.image.files.free.fr/host/4ab2601cebac6fond-interne.jpg);
background-position: top center;
background-repeat: repeat-y;
background-color: transparent;
width: 950px;
margin: auto;
}

table
{
max-width: 800px;
margin: auto;
}

Alors si quelqu'un pouvait m'aider, ça serait très sympa. J'ai parcouru le forum avec la fonction recherche mais je n'ai pas trouvé ce que je voulais, évidemment je ne suis pas à l'abri d'avoir loupé quelque chose auquel cas, je m'en excuse d'avance.

Merci beaucoup.


Dernière édition par Saranna le Ven 30 Sep 2011 - 21:03, édité 3 fois

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Saranna le Lun 26 Sep 2011 - 18:43

Petit up !

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Invité le Mer 28 Sep 2011 - 15:39

Bonjour,

On va procédé par étape, et commencer par modifier les catégories. Dans le template index_box, on retire les en-têtes des colonnes sujet/message/dernier message.
Repérez ce morceau:
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 supprimez-le.

Ensuite on déplace le titre des catégories au dessus du tableau avec la class "forumline". Pour cela il faut recréer un petit tableau:
Repérez:
Code:
<!-- 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>
        </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
Remplacez par:
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
    <td width="500"><div style="width:500px;"></div></td> <td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </td>
        </tr></table><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
La première cellule du nouveau tableau permet de positionner le titre des catégories, j'ai mis 500px, mais il faudra sûrement affiner le réglage en fonction de votre forum Wink .

Les titres sont en place, mais les colonnes en dessous sont déformées. Donc il faut ajouter les dimensions dans cette partie:
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>
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
comme ceci:
Code:
    <td class="row3" align="center" valign="middle" height="50"  width="50"><div style="width:50;">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50"  width="50"><div style="width:50px;">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50" width="150"><div style="width:150px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>



Pour la suite, Il faut s'inspirer de ce tutoriel:
> Affichage des forums avec onglets
On ne va prendre que la partie qui nous intéresse (la partie CSS) et dans le template on remplace:
Code:
         </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"  width="50"><div style="width:50px;">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50"  width="50"><div style="width:50px;">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50" width="150"><div style="width:150px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
par:
Code:
<h{catrow.forumrow.LEVEL}>
 
      <div class="forum-stats">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>
<div class="forum-description">
<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>
      <td class="row3 over" align="center" valign="middle" height="50"><div style="width:180px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
Pour la suite, je n'ai pas compris comment vous voulez placer l'icone des forums et l'affichage du dernier message, je m'en excuse. Pourriez-vous faire un petit schéma pour me montrer?
N'hésitez pas à poser des questions Wink .

Cordialement.


Dernière édition par Isolde le Mer 28 Sep 2011 - 21:20, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Saranna le Mer 28 Sep 2011 - 17:14

Bonjour !

Tout d'abord merci d'avoir répondu à ma demande, ensuite pour les précisions voilà le petit croquis:

Spoiler:

Si mon interprétation est exacte (je peux me tromper) le cadre rouge représente l'emplacement du bouton new, no new ou lock. Du coup moi j'aimerais le faire passer de l'autre côté du cadre intérieur.

Par contre j'ai un souci, j'arrive pas à accéder au tutoriel...(peut-être un souci de connexion).

Merci d'avance.

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Invité le Mer 28 Sep 2011 - 21:36

Bonsoir,
J'ai modifié le lien du tutoriel dans mon message précédent , j'ai été trop vite, il manquait un bout de l'url, désolée Embarassed .

Reprenons donc à la suite de mon message précedent. L'icone nouveau message est normalement du bon coté, puisque vous la voulez à gauche. Il ne reste plus qu'à placer les derniers messages dans la description.
Donc il faut supprimer ceci:
Code:
      <td class="row3 over" align="center" valign="middle" height="50"><div style="width:180px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
Et remplacer:
Code:
<div class="forum-description">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
par:
Code:
<div class="forum-description">
<table><tr><td style="width:75%;"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div></td><td><div style="width:180px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td></tr></table></div>
Il y aura sûrement des ajustements à faire au niveau de la feuille CSS, mais dites-moi déjà si la "structure" correspond à ce que vous vouliez

Cordialement..

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Saranna le Jeu 29 Sep 2011 - 1:16

Je viens de terminer les manip et de ce que je vois ça correspond à ce que je veux par contre (je sais pas si c'est avec le CSS ou pas), j'ai pas le "cadre arrondi" autour du titre des grandes catégories (Sur l'illustration ce qui encadre "Votre 1ère catégorie".

Cordialement ^^

Saranna

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Invité le Jeu 29 Sep 2011 - 22:02

Bonsoir,

Exact, j'ai oublié l'encadrement des titres des catégories! Embarassed
Dans le template déjà modifié, cherchez:
Code:
<td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </td>
Et remplacez par:
Code:
<td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%"><div class="secondarytitle"> {catrow.tablehead.L_FORUM}</div> </td>
Dans la feuille de style CSS, ajoutez:
Code:
/*titre des categories*/
.secondarytitle{
      -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: 3px solid #000000;
      border-right: 3px solid #000000;
      border-top: 3px solid #000000;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 350px;
      margin:auto;}

/*cadre des categories*/
.forumline{
      color: #000000;
      border: 5px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px;}

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Saranna le Ven 30 Sep 2011 - 1:24

C'est parfait, merci beaucoup ^^


Cordialement, Saranna.

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Invité le Ven 30 Sep 2011 - 11:37

Bonjour,

Si votre problème est résolu, n'oubliez pas d'éditer votre premier message et de cocher résolu Wink .
Si vous avez d'autres questions, n'hésitez pas non plus!

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des catégories et des forums

Message par Saranna le Ven 30 Sep 2011 - 17:46

Bonjour,

L'affaire est terminée, je classe.

Merci beaucoup pour l'aide.

Saranna
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 25/09/2011

http://the-infinite-quest.forumpro.fr/
Saranna 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