Problème avec les catégories (Oui, encore 1... XD)

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

Résolu Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Lun 22 Aoû 2011 - 17:23

Bonjour Smile
Je sais que vous avez énormément de topics en cours à ce sujet et j'ai bien fait mes recherches avant de venir poster. J'ai longtemps hésité à poster et puis finalement, je me suis dit que je n'avais rien à y perdre.

J'ai suivi à la lettre ce topic: http://forum.forumactif.com/t312155-changer-apparence-categorie
C'était plus où moins ce qu'il me fallait (merci à L'Assistactif(ve) qui a aidé la personne à l'origine du sujet) néanmoins, à la fin de ce tutoriel, les catégories restent écrites sur la barre qui fait toute la largeur du forum. Ce que j'ai ensuite essayé de faire, c'était de mettre le nom des catégories au dessus d'une image qui ferait la largeur du forum, et qu'ensuite, les forums soient regroupés en dessous comme ceci:

http://img197.imageshack.us/img197/1736/esquisseo.png

En gros, il me suffisait de mettre les catégories sur une image et de rajouter les liens vers les sous forums. Deux choses que je ne sais absolument pas faire, voyez le résultat vous mêmes:

http://liberty-island-rpg.forumgratuit.org/

Je comprendrais si cette demande d'aide sera rejetée mais il fallait que je tente quand même ^^"

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}

                {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>
         
         
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->

              <!-- END inc -->

          </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 -->

<center><img src="http://img36.imageshack.us/img36/1981/barqu.png"></center>

  </tr>

<center><div style="margin-left: 100px; font-size: 25pt; position: absolute; font-family: times new roman; color: #367d7c; font-style: italic; text-transform: lowercase; text-shadow: 1px 1px 2px black; font-weight: bold; letterspacing: -2px;">{catrow.cathead.CAT_TITLE}</div></center>
<div style="width: 690px; margin: auto; margin-top: -50px; height: 130px; background: #ffffff; border: 1px solid black; -moz-border-radius-bottomleft: 70px; -moz-border-radius-topright: 50px;">


<div style="margin-top: 20px; font-size: 13pt; font-face: Times New Roman; color: #367d7c; font-style: italic; text-transform: lowercase; text-shadow: 1px 1px 2px black;">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 text</div>


<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">
                  <center> <span class="forumlink">
                      <center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center>

                    </span></center>
                </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>
                      <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 -->

CSS:

Code:

        .catcadre {
            border : 1px solid #FF9900;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
        }



        .dersuj {
            border : 1px solid #FF9900;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
        }

Merci d'avance de prendre le temps de me répondre,

~ Feu Ardent


Dernière édition par Feu Ardent le Jeu 25 Aoû 2011 - 1:53, édité 1 fois

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Lun 22 Aoû 2011 - 19:15

Bonjour

3ème personne qui a un souci avec ce sujet Hein je vais commencer à me poser des questions...

Revenons à vous. ^^ Pour afficher les liens vers les sousforums aller dans PA > Affichage > Structures & hiérarchie et activer les liens vers les niveaux inférieurs.

Pour votre image dans le titre des forums et non des catégories, cela va me prendre un peu plus de temps. Permettez vous que je fasse des tests avec votre image ?

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Lun 22 Aoû 2011 - 22:36

Pour les sous-forums, ça marche, merci. ^^

Quand à l'image, bien sûr, amusez-vous avec ^^

http://img36.imageshack.us/img36/1981/barqu.png

Par contre, je ne la veux pas sous le nom des forums mais bien sous le nom des catégories.

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Lun 22 Aoû 2011 - 22:50

Pourtant les liens des sous forums apparaissent bien dans votre template
Code:
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

donc elles devraient apparaitre. oui 'avais bien saisi, mais il me faut aussi régler le fais que l'image se superpose sur le tour qui contiendra les forums. Je me suis juste mal exprimée. ^^

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Mar 23 Aoû 2011 - 0:24

D'accord. ^^ Donc oui, je ne comprends pas pourquoi ça s'affiche pas, mais moi et les templates, on s'aime pas trop... x')

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Mer 24 Aoû 2011 - 4:15

Nous allons plutot repartir d'un template par défaut, le votre est trop brouillon ^^ j'ai du mal à m'y repérer. et enlevez la css que vous avez trouver dans l'autre post.

Donc une fois que votre template par défaut est remis repérez ceci :

Code:
<!-- 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="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>
   <!-- END tablehead -->
et changez le ainsi :
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
      <center><div class="secondarytitle">{catrow.tablehead.L_FORUM}
   </div><table class="catcadre" width="730" border="0" cellspacing="0" cellpadding="0">
   <!-- END tablehead -->

puis repérez :
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>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
et changez le ainsi :
Code:
 <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

repérez ensuite :
Code:
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
et changez le ainsi :
Code:
</table><img src="{SPACER}" alt="" height="5" width="1" /></center><!-- END tablefoot --><!-- END catrow -->

et dans la css ajoutez:
Code:
.secondarytitle {
background-image: url('http://img36.imageshack.us/img36/1981/barqu.png');
background-repeat: no-repeat;
height:100px;
width:730px;
text-align : center;
   vertical-align : bottom;
position : relative;
top : 30px;
}

.secondarytitle h2{
position : relative;
top : 40px;
}

.catcadre {
background-color : #ffffff;
  -khtml-border-radius-topright: 40px;
  -khtml-border-radius-bottomleft: 40px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 40px;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
border : 2px solid #000000;
padding-top : 30px;
padding-left : 5px;
padding-right : 10px;
padding-bottom : 10px;
}

Nous devrions nous apporcher du résultat voulu. Il y a encore un léger soucis sur la largeur du cadre blanc que je vais revoir, puis un changement au niveau du nom et de la description. Est-ce dans ce que vous vouliez déjà ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Mer 24 Aoû 2011 - 15:26

:**: Ça commence à prendre forme, merci! *w*

Par contre, l'image n'apparaît qu'une fois. En fait, ce que je voudrais, c'est exactement la même chose, mais avec le "Who Knew Birth Was So Painful?", le "Live Life, Love Life" et le "Don't Try To Run Away From The Flood" au dessus d'une copie de l'image.

Sinon, je ne sais pas comment vous avez fait mais merci, c'est mieux réussi que ce que j'aurais pu faire x')

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Mer 24 Aoû 2011 - 15:31

Mettez déà votre hiérarchie sur Moyen : séparer les catégorie de l'index ^^

Pour mon secret, j'ai simplement créer une div ou j'ai replacer le titre des catégories et votre image au dessus du tableau d'origine, puis j'ai repositionner le tout pour qu'ils soient l'un sur l'autre.

Je modifie encore le reste pour le moment ^^

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Mer 24 Aoû 2011 - 16:08

:O Ça marche beaucoup mieux ainsi, en effet! :3 Merciiii! :3 Vous me sauvez la vie là \o/

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Mer 24 Aoû 2011 - 19:22

Repérez ceci :
Code:
<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}>
         <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="row3 over" align="center" valign="middle" height="50"><div style="width:150px;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
et changez le ainsi :
Code:
<td 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 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="descript"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
         <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 class="gensmall" id="subforums"><div class="soufo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
    </script>
         </div></span>
      </td>
      <td align="center" valign="middle" height="50"><div style="width:150px;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

puis mettez dans votre css :

Code:
.soufo a {
  color: #000000;
  font-size: 11px;
  background-color: #ff0000;
  margin-right : 3px;
   font-variant : small-caps;
}

.descrip {
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
}
à personnaliser.

Que nous reste-t-il à faire ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Mer 24 Aoû 2011 - 23:48

*-* C'est magique. (a)

Je croyais pouvoir finir la suite, mais visiblement, j'arrive pas à changer la police ni la taille du texte. T___T

Si vous pouviez juste me dire comment ou où mettre des div's pour pouvoir:

1- Personnaliser le nom des catégories
2- Personnaliser le nom des forums
3- Régler la hauteur maximale des descriptions des sous forums
4- Créer une ligne entre la description et les sous forums et les sous forums et le forum suivant
5- Réduire un peu la largeur du cadre sous l'image entourant les forums

Je saurais me débrouiller avec ça (A)

Merci encore pour tout, c'est magnifique, vraiment. *-*

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par SoraNoHime le Mer 24 Aoû 2011 - 23:57

1. Déjà pour le titre des catégories, le code css est .secondarytitle h2
2. pour le nom des forum a.forumlink
3. un max-height dans .sousfo devrait le faire idem avec 5
Code:
text-align : center;
. si .soufo ne marche pas faite le dans .sousfo a
4. Normalement la première ligne existe scratch

.descrip {
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
}

pour celle entre les sous forums et le forum suivant mettez un border-bottom à .soufo

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les catégories (Oui, encore 1... XD)

Message par Feu Ardent le Jeu 25 Aoû 2011 - 1:43

Finalement, j'ai pas fait la border-bottom car ça rendait mal.

En tout cas, merci\, c'est absolument ce que je cherchais à faire, vous m'avez SAuVÉ la vie. (A) Tout est absolument parfait, merci encore. :3

PS: Vous avez été crédité sur la PA comme il le faut ^^

Feu Ardent
**

Masculin
Messages : 77
Inscrit(e) le : 29/08/2010

http://asreyd.jeunforum.com
Feu Ardent 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