Modifications des catégories

[Jiben]

Salut a vous,

Bon je travaille sur mon forum,
et je veut innovée,
Mais bon je ne suis pas non plus un expert en CSS.

Je que je voudrais c'est crée le cadre dans chaque categories comme ceci, c'est le cadre qui est plus clair qui ce trouve dans le contour rouge que j'ai fait :



le lien du site pour y voir plus clair : http://theisland.forumakers.com/forum.htm

Bon voici l'apparence de mon forum, je veut garde les textes que j'ai mis :



Mon site : http://lesgendresbeta5.forumactif.org/forum.htm

Bien sur je veut faire c'est categories en gardant le transparent

Je vous remercie d'avance pour votre aide

Cordialement Jiben

[Jiben]

Bonsoir

Quelqu'un peut m'aider svp

[Kasdead]

Je suis aussi intéressée ! =D

J'ai farfouillé un peu partout dans les catégories, mais je n'ai pas trouvé de réponses assez claires pour moi T_T

[Invité]

Bonjour,

Oui, je ne suis pas non plus un expert en CSS.

Désolé,

Demandez à un Aidactif,

Bonne soirée,
Darker

[Kasdead]

Bon, en farfouillant un peu, j'ai trouvé ce topic où justement il est question de ce sujet.
J'ai essayer de bidouiller comme je pouvais et de comprendre le fonctionnement de la feuille css et des templates. En copiant les codes qui étaient montrés, il y avait un problème de longueur avec le cadres des liens, mais j'ai réussi à modifier le problème.

Pour l'instant, ça donne ça sur mon forum : clic ici

Je dois encore modifier les couleurs, mais cela risque de ne pas poser de problème majeur, donc je vais quand même mettre ici les codes du css et des templates :

pour la feuille css, il faudra y coller ceci :

Code:

.haut {width: 20%; margin-left: 60%; margin-bottom: 0px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-top: 1px solid #ffffff; -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; padding: 5px;background-color: #d7d9db;text-align: right; }
.milieu {width: 68%; margin: 0px; border: 1px solid #ffffff;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px;background-color: #d7d9db;width : 400 px;margin:0 auto; }
.bas {width: 20%; margin-left: 10%; margin-top: 0px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomleft: 10px; -webkit-border-radius-bottomright: 10px; padding: 5px;background-color: #d7d9db;width : 360px;margin:0 auto; }

Tu pourras donc changer de couleur comme bon te semble.

Et avec ce code-ci, tu remplaces intégralement ton templates Général>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"> {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">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
<div class="haut"><span class="gensmall">Sujets : {catrow.forumrow.TOPICS}  Messages : {catrow.forumrow.POSTS}</span></div>
        <div class="milieu"><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 --></span></div>
            <div class="bas"><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span></div>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- 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 -->

[Jiben]

Salut, ton forum ne ressemble pas a ceux que je veux aussi ??

Mais merci quand même

[Kasdead]

Hein ? Je comprend pas

[Jiben]

Ce que tu a fait c'est pour mettre un décor dans la barre ?

[Jiben]

Bon double post désoler !!

Bon voici une image :


En haut ( en marron ) la forum final que je voudrais !!!
En bas mon forum ( en blue ) qui commence a ressembler

Ce que je veut dire; c'est que la position du sujet et messages ( ce que j'ai encadrer en cyan ) n'est pas le même que le haut donc si tu pourrait corriger ou m'aider stp

DE plus J'ai pas les mots dans le cadre violet. Donc si tu pourrait m'aider stp


Je te remercie d'avance

Jiben

[Jiben]

Quelqu'un pour m'aider svp

[Jiben]

up svp

[Jiben]

Salut a vous,

Je vous remets ceci au clair, pour essayer d'avoir le résultat que je veut car ce soir je part en vacance,
donc je voudrais l'avoir fini avant de partir :

Donc voici le code mis dans le CSS avec les Bonnes couleurs :

Spoiler:

Ce que j'ai mis dans mon templates, en sachant que dedans il a le code des coins arrondis, voici les codes :

Spoiler:

Alors maintenant je passe a ceux qui ne va pas, une petit capture d'écran pour vous que sa soit clair :


Bon ce qui me chaine est la bulle ou ce trouve " messages " et " sujet ", ce que j'ai mis en orange sur le schémas.
Ce qui me gène c'est leur placements, je vous que sa soit le même placement que mon cadre orange qui ce trouve sur le fond marron. Car l'autre sa fait trop gros.

De plus, ce que je voudrais arranger, c'est ce qui est marqué dans le cadre violet, le probléme c'est qui mets seulement les sous forum, mais je voudrais qui mets les ous forum et les annonce + pos it !!


Si vous avez des questions je suis là,
je vous remercie d'avance pour votre aide

Cordialement JIben.

[Jiben]

up svp

[Jiben]

up sa serait sympa de m'aider svp

[CkroA]

Il me semble que c'est le résultat que vous voulez obtenir ici : My Forum

Jiben :Pour la barre du haut j'ai résolu ton problème. Qui n'était qu'un simple problème de mesure. En effet, la largeur de la barre du haut était trop faible pour contenir le texte en entier. Il fallait juste l'augmenter et décaler vers la gauche la partie .haut pour éviter qu'elle ne dépasse sur la droite.

*TON CODE CSS AVEC TES COULEURS*

Code:

    .haut {width: 30%; margin-left: 50%; margin-bottom: 0px; border-left: 1px solid #172b2e; border-right: 1px solid #172b2e; border-top: 1px solid #172b2e; -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; padding: 5px;background-color: #172b2e;text-align: center; }
    .milieu {width: 68%; margin: 0px; border: 1px solid #172b2e;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px;background-color: #172b2e;width : 300 px;margin:0 auto; }
    .bas {width: 50%; margin-left: 10%; margin-top: 0px; border-left: 1px solid #172b2e; border-right: 1px solid #172b2e; border-bottom: 1px solid #172b2e; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomleft: 10px; -webkit-border-radius-bottomright: 10px; padding: 5px;background-color: #172b2e;width : 300 px;margin:0 auto; }

Et tu connais le reste des codes, c'était juste un problème de CSS. Ravie d'avoir rendu service.

PS _ Je travaille encore pour régler le problème de la barre du bas et je pense que ça a un rapport avec le template index_box et à vrai dire, je touche pas trop à ça. Donc s'il y a quelqu'un d'autre, je suis dans le coin =D

EDIT _ En réalité, il n'y avait aucun rapport avec le template index_box, comme pour la partie .haut, il faut augmenter les mesures .bas et retirer dans la description de catégorie le code :

Code:

<div class=".bas">En bas à droite</div>

qui gâche le paysage. Voilà, tu peux prendre le code CSS un peu plus haut et l'utiliser pour tes catégories. Problème, il me semble, réglé. Bonne vacance !

[Killers[Qcw]]

Salut moi ca m'intéresse aussi ce sujet est-il possible de le faire aussi en version phpbb3? ou juste pour la version 2 ?

[Jiben]

Salut, merci de ton aide,

par contre la barre de bas ou ta mis test1, test 2, ..., sa ne marche que pour les sous forum mais es ce que sa marche pour les annonce et pos it ???

[Jiben]

up

[CkroA]

Il me semble que ça ne fonctionne que pour les sous-forums. Et que veux-tu dire par Note ou annonce ?