Mise en forme des catégories

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

Résolu Mise en forme des catégories

Message par Lady doll le Ven 18 Mai 2012 - 17:57

Bonjour, Bonsoir
Voilà, une fois encore j'aurais besoin d'aide pour la mise en forme des catégories pour un forum... Le soucis est que je n'arrive pas à mettre d'images en haut et en bas d'une catégories comme le fond certains forum... Si quelqu'un pouvait m'aider, se serait vraiment gentil =)
Voici un schéma de ce que j'aimerais :
http://i45.servimg.com/u/f45/16/45/82/56/catash11.png

Merci d'avance =)


Dernière édition par Lady doll le Sam 19 Mai 2012 - 17:10, édité 1 fois

Lady doll
***

Féminin
Messages : 113
Inscrit(e) le : 02/11/2011

http://rhansidor.forumactif.org/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme des catégories

Message par Invité le Ven 18 Mai 2012 - 22:12

Bonsoir,

Avez-vous commencé à modifié le template Index_box?
Pour l'image du haut, vous avez 2 solutions:
1. Ajouter l'image au dessus du tableau existant des catégories, ou en fond de cellule en changeant la class des titres, donc passer par le template

2. Ajouter l'image dans la gestion des images comme fond des titres dans la gestion des images, mais ça risque de se répéter à d'autres endroits sur le forum.

Pour l'image du bas, pas d'autre choix que de la placer à la fin du template.

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mise en forme des catégories

Message par Lady doll le Sam 19 Mai 2012 - 9:41

Oh Azami, je vais finir par croire que vous êtes ma super héroïne qui viens à mon secours quand j'ai un soucis XD
alors, pour le moment, non, je n'aie pas toucher aux templates, trop peur de faire une bêtise et de ne pas m'y retrouver... d'autant que, comme sur mon schéma, j'aimerais aussi changer l'apparence des catégories.... je ne suis pas assez doué pour le faire moi même sans aide XD

Lady doll
***

Féminin
Messages : 113
Inscrit(e) le : 02/11/2011

http://rhansidor.forumactif.org/
Lady doll a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme des catégories

Message par Invité le Sam 19 Mai 2012 - 12:24

Bonjour Very Happy
I. Modification des forums :
Remplacez:
Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <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>
   </tr>
par:
Code:
<tr>
    <td colspan="3" nowrap="nowrap" width="100%" class="fondhaut"> {catrow.tablehead.L_FORUM} </td> 
  </tr>

Supprimez:
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>

Remplacez:
Code:
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
par :
Code:
<div class="liens" id="subforums">
                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>

Ajoutez :
Code:
<span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
juste après :
Code:
<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}>

Déplacez :
Code:
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
au dessus de :
Code:
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
Si vous prévisualisez à ce stade, ça vous donnera un peu n'importe quoi, mais les éléments prendront forme.

On va ajouter un tableau et mettre les élément dans les bonnes cellules:
Ceci:
Code:
<!-- 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">
         </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="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
         <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 -->
            <div class="liens" id="subforums">
                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
         </span>
      </td>
      
      <td class="row3 over" align="center" valign="middle" height="50">
                  <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
devient
Code:
 <!-- 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" width="120">
                  <div class="liens" id="subforums">
                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
            </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <div class="centrefo"><table width="100%"><tr><td widht="70%"><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}></td>
                    <td width="30%"><div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span>
                      </div></td>
                    </tr>
                    <tr>
                      <td colspan="2">
                          <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>
                      </td></tr></table></div></td>
     
      <td class="row3 over" align="center" valign="middle" height="50"><div class="lastm">
                  <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  <br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>
      </td>
  </tr>
  <!-- END forumrow -->


II. Les images en haut et en bas:
Pour celle d'en haut le travail est déjà fait, il ne manque plus que le CSS qui correspond. Pour l'image en bas, repérez:
Code:
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
et remplacez par :
Code:
 <!-- BEGIN tablefoot -->
<tr><td height="80" colspan="3"><div class="fondbas"></div></td></tr>
</table><br /><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->

Ligne 20 du template, remplacez
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
par :
Code:
<table class="forumlineac" width="100%" border="0" cellspacing="0" cellpadding="0">
La structure est bonne, ne maque plus que l'habillage Razz


III. Le CSS perso:
Code:

/*contour*/
.forumlineac{
  border-radius: 30px;
  border-left: 8px solid grey;
  border-right: 8px solid grey;
  border-top: 0;
  border-bottom: 0;
  background: grey;
  box-shadow: 5px 5px 25px  black;
  padding-left: 3px;
  padding-right: 3px;
}

/*image du haut*/
.fondhaut{
  background-image: url('http://i49.servimg.com/u/f49/15/99/75/54/g8pat111.gif');
  background-position:  center;
  background-repeat: repeat;
  background-color: grey;
  height: 80px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/*apparence des titres des catégories*/
.fondhaut h2{
  font-size: 35px;
  color: white;
  text-align: center;
  margin: 0;
}

/*sous-forums*/
.liens{
  width: 120px;
  height: 120px;
  padding: 5px;
  margin: 10px;
  border-radius: 10px;
  background: lightgrey;
}

/*partie centrale*.
.centrefo{
  width: 95%;
  height: 120px;
  padding: 5px;
  margin: 10px;
  border-radius: 10px;
  background: lightgrey;}

/*dernier message et icone de forum*/
.lastm{
  width: 150px;
  height: 120px;
  padding: 5px;
  margin: 10px;
  border-radius: 10px;
  background: lightgrey;
}

/*image du bas*/ 
.fondbas{
  height: 80px;
  background-image: url('http://i49.servimg.com/u/f49/15/99/75/54/g8pat111.gif');
  background-position:  center;
  background-repeat: repeat;
  background-color: grey;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  }
   
Résultat:


Il est possible que je n'ai pas bien compris la demande, n'hésitez pas à me poser des question si quelque chose ne va pas Wink.

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mise en forme des catégories

Message par Lady doll le Sam 19 Mai 2012 - 12:25

olala Azamiiii ! cest pas possible quoi! Deux fois que tu me fait ce que je veux, c'est vraiment parfait ! merci beaucoup *o*

Lady doll
***

Féminin
Messages : 113
Inscrit(e) le : 02/11/2011

http://rhansidor.forumactif.org/
Lady doll 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