Apparence des forums.

[Aïlynne]

Bonjour,

Voila j'aimerais arriver à présenter mes forums avec quelque chose ressemblant à ça.
Sauf que je n'y connais rien en codes. Quelqu'un pourrait m'aider svp ?
Merci.

[Invité]

Bonsoir,

Pour obtenir ce genre de présentation, il faut avoir accès aux templates. Si votre forum est en PhPBB3 comme indiqué dans votre profil, c'est alors impossible.

Cordialement.

[Aïlynne]

Bonsoir,
Ce n'est pas le même forum.

[Neptunia]

Bonsoir !

Si ce n'est pas le forum de votre profil, pourrions nous en avoir le lien ??

[Aïlynne]

http://objectifdanse.forumpro.fr

Voilà

[Neptunia]

Comme indiqué par Isolde, pour parvenir à ce résultat il faut :

- Etre fondateur pour pouvoir accéder aux templates.
et surtout
- Accepter de consacrer beaucoup de temps pour arriver à un tel résultat.
- Avoir de bonnes connaissances tant en CSS qu'en html.

Pour commencer voici déjà un tutoriel qui vous permettra de supprimer vos colonnes "Nb de sujets" et "Nb de messages"

Suppression des colonnes "Sujets" et "Messages".

[Aïlynne]

Voila qui est fait

[Neptunia]

Etape suivante pour s'approcher du rendu mentionné !

Affichage des forums avec onglets.

Je ne pourrais pas vous aider davantage, mes connaissances en CSS sont loin d'être suffisantes pour ne serait ce que m'approcher de l'exemple de ce superbe forum.

J'invite d'autres entraideurs à prendre le relais.

[Aïlynne]

Etape suivante pour s'approcher du rendu mentionné !

Affichage des forums avec onglets.

Je ne pourrais pas vous aider davantage, mes connaissances en CSS sont loin d'être suffisantes pour ne serait ce que m'approcher de l'exemple de ce superbe forum.

J'invite d'autres entraideurs à prendre le relais.

Merci à vous en tout cas
En revanche, je ne peux pas utiliser ce tuto sur mon forum.
Car je l'avais fait sur mon autre forum à une époque, quand il était encore en bb2, et j'ai pu constater que avec beaucoup de sous forums, ça fait plutôt laid.
Et j'ai beaucoup de sous forums dans certains forums.

[Arnoa]

Bonsoir,
Etant administratrice sur le forum en question, je me permet tout de même d'intervenir. Notre fondatrice, qui est également la codeuse du forum, a mis beaucoup de temps et d'énergie pour arriver au résultat final que l'on peut voir sur le forum. A chaque fois, nous essayons d'avoir des idées nouvelles et novatrices, que l'on ne voit pas tous les jours sur les forums, pour que le nôtre reste unique en son genre. Nous trouvons donc plus qu'agaçant de voir les gens nous "pomper" nos idées dans les jours suivants l'installation des designs, pour finalement avoir 20 forums avec les mêmes codages et perdant donc immédiatement notre originalité.
Donc, non nous n'aiderons pas les personnes souhaitant reprendre nos idées. Tout simplement parce que tout ce qui a été fait est trouvable sur internet avec un peu de volonté et parce que nous n'apprécions guère de votre notre travail copié. J'espère que le message est bien passé, bien que cela n'empêchera jamais les gens de continuer à reprendre nos idées j'en ai bien peur.

Et tous cas, merci à la personne nous ayant prévenu sur le forum, nous apprécions qu'il existe encore des personnes respectueuses de notre travail.

[Neptunia]

En revanche, je ne peux pas utiliser ce tuto sur mon forum.

Pourquoi ? Vous dites ne pas connaître les codes, et justement les tutoriels à l'origine servent justement à nous apprendre ce qui nous est inconnu. Soyez certaine que la codeuse du forum en question a commencé un jour par ces mêmes tutoriels.

Car je l'avais fait sur mon autre forum à une époque, quand il était encore en bb2, et j'ai pu constater que avec beaucoup de sous forums, ça fait plutôt laid.
Et j'ai beaucoup de sous forums dans certains forums.

2 solutions :
- Soit vous adaptez le tutoriel à vos besoins en jouant avec tout ce qui est attribut de taille de caractère, largeur, hauteur. Vous modifiez un chiffre et vous jugez du résultat.
- Soit vous repensez votre structure de sous-forums pour qu'elle devienne compatible avec le tuto. Et là nul besoin de la moindre connaissance en codage. C'est de l'administration pure et dure.

[Invité]

Bonjour,

Les tutoriels donnés par AoF-Neptune, sont effectivement la base pour arriver à un résultat original. J'ai passé ma soirée d'hier à modifier le template Index_Box pour pour me rapprocher du forum exemple. Ça demande énormément de travail, et je n'ai pas réussi à obtenir un résultat très proche au niveau de la structure.
Voilà ce que j'ai réussi à faire:

Si cela vous convient je peux vous donner les modifications de template à faire, et je pense que vous arriverez à régler le CSS selon vos goûts. Sur le screen j'ai mis le strict minimum en CSS.

Cordialement.

[Aïlynne]

Si cela vous convient je peux vous donner les modifications de template à faire, et je pense que vous arriverez à régler le CSS selon vos goûts. Sur le screen j'ai mis le strict minimum en CSS.

Cordialement.

Oui, cela me conviens tout à fait
Je ne recherche pas à faire totalement la même chose, mais quelque chose qui y ressemble
Donc ça me vas

[Invité]

Bonsoir,

Donc voilà le template Index_box modifié:

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"><div class="categories" align="center"> {catrow.tablehead.L_FORUM} </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>
   
    </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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">   
            <div class="forum-description"><span class="genmed"><table><tr><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 style="width:80%;"><span class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /><br /> </span><span class="gensmall">{catrow.forumrow.FORUM_DESC} <br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<br />
        <!-- 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="" valign="middle" height="50">
        <div class="forum-stats">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets.<br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td></tr></table></span>
</div>
      </td>
      <!-- BEGIN forum_link_no -->
        <!-- 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 -->

(Je vous le mets en entier, je l'ai tellement bidouillé que je ne saurais plus dire pas quoi j'ai commencé)

La feuille CSS qui correspond:

Code:

.forumline { border: 5px solid #000000;}
 
.categories{
      background-color: #ffffff;
      margin: auto;
      padding: 4px;
      width:auto;
      text-align: center;
      height: 14px;
      font-size: 11px;}

.forum-description {
      margin: 12px;
      padding: 10px;
      color: #000000;
      width: auto;
      border: 1px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

.forum-stats {
      -moz-border-radius: 20px;
      webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000000;
      color: #ffffff;
      font-size: 11px;
      font-style: italic;
      padding: 3px;
      text-align: center;
      width: 150px;}

C'est dans cette partie là que vous pourrez modifier les couleurs.

Cordialement.

[Aïlynne]

Merci
Par contre pourquoi toutes les bulles sont décallées les unes aux autres stp

[Invité]

Re,

Je ne comprends pas votre problème, vous pourriez me faire une capture d'écran? Sur mon forum tout me semble bien aligné...

Cordialement.

[Aïlynne]

Voici

[Invité]

Re,

Essayez en remplaçant dans la CSS la partie ".forum-stats" par celle ci:

Code:

.forum-stats {
      float:right;
      -moz-border-radius: 20px;
      webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000000;
      color: #ffffff;
      font-size: 11px;
      font-style: italic;
      padding: 3px;
      text-align: center;
      width: 150px;}

Cordialement.

[Aïlynne]

Ben non, ça ne change rien :/

[Invité]

Bonjour,

J'ai tout repris depuis le début. J'ai testé l'affichage sous IE, Firefox et Chrome. Mis à part IE qui ne connais pas les arrondis, tout est aligné.

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}<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"><div class="categories" align="center"> {catrow.tablehead.L_FORUM} </div></th>
        </tr>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <tr>
        <!-- BEGIN inc -->
        <!-- 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>
 
    </tr>
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <tr>
        <!-- BEGIN inc -->
        <!-- END inc -->
                <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> 
            <span class="genmed"><table class="forum-description"><tr><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 width="450"><span class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /><br /> </span><span class="gensmall">{catrow.forumrow.FORUM_DESC} <br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<br />
        <!-- 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="forum-stats" valign="middle" height="50">
        {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets.<br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span></td></tr></table></span>
      </td>
      <!-- BEGIN forum_link_no -->
        <!-- 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 -->

Feuille CSS:

Code:

.forumline { border: 5px solid #000000;}
 
.categories{
      background-color: #ffffff;
      margin: auto;
      padding: 4px;
      width:auto;
      text-align: center;
      height: 14px;
      font-size: 11px;}

.forum-description {
      margin: 12px;
      padding: 10px;
      color: #000000;
      width:700px;
      border: 1px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

.forum-stats {
      -moz-border-radius: 20px;
      webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000000;
      color: #ffffff;
      font-size: 11px;
      font-style: italic;
      padding: 3px;
      text-align: center;
      width: 150px;}

Si ça ne fonctionne pas, il faudra le coup de main d'un expert .

Cordialement.

[Aïlynne]

Ca à fonctionné
Merci