Changer apparence catégories

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

Résolu Changer apparence catégories

Message par xBorwniies le 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
***

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 le Sam 1 Oct 2011 - 18:03

UP?

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 le Mer 5 Oct 2011 - 16:55

UP?

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 Final-Blonde le 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 .

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le 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
***

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 Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le 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
***

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 Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le 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
***

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 Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le Jeu 6 Oct 2011 - 17:32

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

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 Final-Blonde le 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...

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le Jeu 6 Oct 2011 - 17:39

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

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 Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le Jeu 6 Oct 2011 - 18:20

Ok.

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 Final-Blonde le Ven 7 Oct 2011 - 9:12

As-tu réussi ?

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le 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
***

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 Final-Blonde le Ven 7 Oct 2011 - 20:08

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

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par xBorwniies le 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
***

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 Final-Blonde le 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*/
}

Final-Blonde
# Tropactif #

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

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

Résolu Re: Changer apparence catégories

Message par Invité le 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

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


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