Changer apparence catégories

2 participants

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

Résolu Changer apparence catégories

Message par xBorwniies Ven 30 Sep 2011 - 16:19

Bonjour, j'aimerais faire des catégories comme ceci(si se n'est pas tout à fait pareil c'est pas grave):
Spoiler:
Et mes catégories sont comme ceci:
Spoiler:

Mon forum est en version phpBB2.
Mon index_box à été modifier:
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="0" 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 -->
          <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="row1" width="100%"><table class="catcadre"><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 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>

                    </span>
                </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></tr></table></td>
              <td class="row3" align="center" valign="middle" height="50">
                <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;" class="dersuj">
                        <span class="gensmall">{catrow.forumrow.LAST_POST}
{catrow.forumrow.POSTS} Message | {catrow.forumrow.TOPICS} Sujets</span></div>
              </td>
          </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 -->

xBrowniies, prête à apprendre.
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Sam 1 Oct 2011 - 18:03

UP?
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Mer 5 Oct 2011 - 16:55

UP?
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Mer 5 Oct 2011 - 20:42

Bonsoir xBorwniies,

Pfiou, c'est un tuto hyper long à développer, et dans l'absolu je suis pour expliquer étape par étape, mais là je vais te balancer le template déjà modifié que tu n'auras plus qu'à copier-coller à la place du tien.
Attention, je n'ai pas modifié les colonnes avec ton template, mais avec le mien... Cela dit, je peux aussi le faire d'après le tien, mais en gros voilà ce que ça donne déjà :
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 width="100%" border="0" cellspacing="3" cellpadding="0">
   <tr>
<th nowrap="nowrap" width="150"><div style="width:150px;">
<span class="gensmall"> Message | Sujets</span></div></th>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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="row3 over" align="center" valign="middle" height="50" style="width: 150px;">
                        <span class="gensmall">
{catrow.forumrow.POSTS} | {catrow.forumrow.TOPICS} <br />
                  {catrow.forumrow.LAST_POST}</span>
      </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}>
         <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="{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>


   </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 -->
Le "class="forumline" a été supprimé pour te laisser réaliser le style css que tu voudrais.

Pour ce qui est ensuite du style, je peux t'aiguiller mais essaie de trouver les identifiants des "class" et c'est à cet endroit que tu pourras modifier l'apparence des différentes cellules.

PA >> Affichage >> Structure et hiérarchie
Il faudrait que le niiveau de compression de l'index, le forum soit :
Séparer les catégories sur l'index : Moyen

N'hésite pas si tu as un souci.


EDIT : tout compte fait je vais rester avec ce template donné plus haut. Dans le tien, il y a des balises fermées mais non ouvertes et inversement... /-:

EDIT Isolde: Attention! Les templates à "copier/coller" ne sont pas tolérés dans cette rubrique, il faut donner un maximum d'explications si l'on est obligé de donner l'intégralité du template. Pensez-y à l'avenir Wink .
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 15:17

Bonjour,
merci de ton aide, mais j'ai déjà mis comme tu me l'a dit pour la structure des catégories.
Je n'es pas compris non plus si tu as commencer la tuto ou pas.
Merci

Borwniies prête à apprendre.
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Jeu 6 Oct 2011 - 15:30

Le template plus haut est déjà modifier quant à la structure, mais il reste le style CSS et là, je veux bien t'aider plus loin si tu bloques, mais essaie déjà de reconnaitre les class, ou bien d'en créer...
A mon avis, c'est ce qui est le plus important si ensuite tu veux réaliser d'autres apparences.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 16:24

EDIT:Coucou,
enfaite c'est bon, mais voici mes catégories maintenant:
Spoiler:

et voici se que j'aimerais
Spoiler:
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Jeu 6 Oct 2011 - 16:59

Excellent xBorwniies !

Donc pour ce qui est de la description du forum, dans le template index_box, on va d'abord créer une div autour du forum sur l'index, avec un class que tu pourras travailler selon ce que tu veux dans le CSS.
Repère la cellule "td" qui concerne les forums et mets y la "div" comme je l'ai fait :
Code:
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
<div align="center" class="foragency">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </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>
</div>
      </td>

Ensuite dans le CSS :
.foragency {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border-left: 10px solid black;
border-right: 10px solid black;
padding: 10px 0px 10px 0px;
}

Il faudra aussi que tu centres tout ce qui viendra dans la description des forums.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 17:19

Bonjour,
j'ai fais ce que vous avez fait ce que vous m'avez dit de faire mais quand je prévualise avant de publier, rien ne change.:
Code:
<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}>
        <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>
      </div>
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Jeu 6 Oct 2011 - 17:26

Dans ton code je vois bien la fermeture de la "div" mais pas la div et son class, c'est normal ?

Laisse, je suis en train de voir autre chose, parce que ça pose un problème avec la description du forum... /-:

Perso, j'évite la prévisualisation des templates... autant publier et voir en direct ce que ça donne et rééditer si ce n'est pas ça.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 17:32

Ok, alors je laisse tomber?Vous faites autre chose pour moi?
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Jeu 6 Oct 2011 - 17:35

Non, je disais que j'étais en train de voir pour que ce problème avec la description du forum ne se produise plus...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 17:39

J'ai remplacé le td par div mais tout est déplacé n'importe ou.
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Jeu 6 Oct 2011 - 17:55

Nope il fallait ajouter la div, mais laisse tomber, parce que la div posait problème avec les div de la description des forums.

Alors voilà ce que nous pouvons faire pour pallier à ça :
Créer un tableau dans la cellule (td ... /td) :
Code:
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table class="foragency" align="center"><tr><td align="center" valign="top">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
</td></tr>
<tr><td align="center" valign="middle">
         </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></tr></table>
      </td>

Pour le CSS rien ne change, sauf ce que tu veux modifier.

EDIT : Il te suffit de copier ce bloc et de le coller à la place du même bloc que tu as.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Jeu 6 Oct 2011 - 18:20

Ok.
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Ven 7 Oct 2011 - 9:12

As-tu réussi ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Ven 7 Oct 2011 - 14:45

Coucou merci c'est jolie,
mais est-ce que les barres peuvent être de cette couleur?
#498587

Merci
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Ven 7 Oct 2011 - 20:08

Dans le CSS tu mets la couleur que tu veux au "border: ??px solid #498587;"
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par xBorwniies Sam 8 Oct 2011 - 10:04

A non désolée.
C'est bon j'ai réussis, et on peut mettre les titres des forum en un peu + grand?
Merci.
xBorwniies

xBorwniies
***

Féminin
Messages : 157
Inscrit(e) le : 04/08/2011

http://amazing-graphics.forumgratuit.org/
xBorwniies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par kheino Sam 8 Oct 2011 - 11:30

L'dentifiant pour le titres des forums est secondarytitle
Donc dans le CSS :
.secondarytitle {
font-size: ??px;
/*etc pour tout ce qui concerne le texte du titre des sections*/
}
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer apparence catégories

Message par Invité Dim 16 Oct 2011 - 10:38

Bonjour,

Où en-est votre problème ?

Deux solutions :
  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile
Anonymous

Invité
Invité


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

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum