Modifier l'affichage des catégories

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

Résolu Modifier l'affichage des catégories

Message par Live le Jeu 29 Oct 2015 - 11:56

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'aimerais modifier l'aspect de mes catégories (selon l'image jointe) sur mon forum mais je ne trouve pas comment faire.

J'ai déjà modifié le template "index_box" afin de supprimer quelques colonnes :

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom"></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">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">&nbsp;</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}>
         <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>
   <!-- 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 -->

Merci d'avance pour votre aide.


Dernière édition par Live le Dim 1 Nov 2015 - 15:29, édité 2 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Live le Ven 30 Oct 2015 - 14:53

UP aidez moi

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Ven 30 Oct 2015 - 15:45

Bonjour, Live,
Vous pouvez essayer de mettre dans votre CSS :
Code:
  a.forumlink:link {
        vertical-align : middle;
        }
Bon aprèm.

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Ven 30 Oct 2015 - 17:44

Re Peggy06,
Merci de m'avoir répondu et merci pour votre aide.

Maintenant que le nom de mes forums sont alignés au milieu, l'image du forum reste perchée en haut alors qu'elle devrait être alignée aussi au milieu :
Spoiler:
.

Merci d'avance pour votre aide.


Dernière édition par Live le Dim 1 Nov 2015 - 15:29, édité 1 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Ven 30 Oct 2015 - 18:22

A ce moment là, vous pouvez peut-être mettre l'image et le titre dans le nom du forum comme ceci :
Code:
<alt="Réglement intérieur"/> Réglement Intérieur <img src="http://i38.servimg.com/u/f38/19/03/24/88/statut10.gif"/>
Mais attention pas de titre ni de lien d'image trop long car ça ne rentrerait pas en entier, à contrôler.

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Ven 30 Oct 2015 - 18:36

J'ai utilisé votre code mais ce ne donne pas vraiment ce que je souhaite...

Code:
<alt="Réglement intérieur"/> Réglement Intérieur <img src="http://i21.servimg.com/u/f21/18/72/44/21/rysult13.png"/>

qui donne :
Spoiler:
.

alors que j'aimerais que l'image soit à gauche du titre et au milieu.

Encore merci  ::fleur::


Dernière édition par Live le Dim 1 Nov 2015 - 15:28, édité 1 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Ven 30 Oct 2015 - 18:44

et bien on l'inverse tout simplement :
Code:
<img src="http://i21.servimg.com/u/f21/18/72/44/21/rysult13.png"/><alt="Réglement intérieur"/> Réglement Intérieur

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Ven 30 Oct 2015 - 20:34

Bonsoir,

Je viens d'effectuer quelques modifications indépendamment de vos conseils ; j'ai donc maintenant :

Code:
.genmed { /*IMAGE DU FORUM CENTRÉE*/
    margin-top: 19px;
    position: middle;
    margin-left: 20px;
}

Code:
.forumlink:link { /*TITRE (LIEN) DU FORUM CENTRÉE EN FACE DE L'IMAGE*/
    margin-top: 19px;
    position: middle;
    margin-left: 20px;
}

Ce qui me donne :
Spoiler:
.

L'image du forum est bien centrée mais le titre lui... pas du tout ! J'ai essayé de mettre le code que vous m'aviez fourni mais ça ne change strictement rien.

Merci d'avance pour votre aide et désolé pour toutes mes demandes... Assomé


Dernière édition par Live le Dim 1 Nov 2015 - 15:28, édité 1 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Live le Dim 1 Nov 2015 - 10:57

UP Assomé

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Dim 1 Nov 2015 - 12:40

Bonjour, live,
Votre image est dans description ?
essayez dans CSS :
Code:
h3.hierarchy{margin-top:35px;display:block!important;}
Bon dimanche.

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Dim 1 Nov 2015 - 12:49

Bonjour Peggy06,

L'image du forum est située ici : Panneau d'administration Right Général Right Forum Right Catégories et forums Right "Modifier un forum" edit  Right "Adresse de l'image" et n'est donc pas placée dans la description.

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Dim 1 Nov 2015 - 13:03

Avez-vous essayé le code que j'ai trouvé, après on verra si ça ne marche pas.

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Dim 1 Nov 2015 - 13:16

J'ai donc maintenant :

Spoiler:
.

Le titre du forum est donc maintenant au milieu mais l'image est soit trop bas quand elle est placée dans "Adresse de l'image" ou trop à droite et trop bas quand elle est dans la description... Nous n'allons jamais y arriver.


Dernière édition par Live le Dim 1 Nov 2015 - 15:27, édité 1 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Dim 1 Nov 2015 - 13:45


Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Dim 1 Nov 2015 - 14:22

Merci pour l'attention que vous portez à mon problème. J'ai appliqué les instructions pour PhPBB 2 dans le sujet que vous m'avez fourni, j'ai donc :


Template index_body modifié :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom"></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">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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">&nbsp;</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="middle" 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>
   <!-- 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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Feuille de style CSS :
Code:

td.row1.over:hover, td.row2 {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.gen, .name, .postbody, .postdetails, .postdetails, .row1 {
    font-family: Arial;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
}


p, td, th { border-radius: 8px; }
  
.forumline {
    padding: 7px;
    background-color: rgba(149, 185, 196, 0.4);
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
     width: 46.8%; /*PERMET D'AVOIR LES CATÉGORIES COTE A COTE*/
     display: inline-block;
    overflow: hidden;}

td.row1, td.row3.over:hover {
    background-color: #97d0db;
   -webkit-border-radius: 8px;
}

div.navig {
    background-color: rgba(149,185,196,0.6);
    border-bottom: 2px solid;
    border-color: rgba(255,255,255,0.6);
    height: 43px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.secondarytitle {
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    height: 30px !important;
    width: 100%;
}
.genmed { /*IMAGE DES FORUMS*/
    margin-top: 19px;
    position: middle;
    margin-left: 20px;
}

h3.hierarchy{
   margin-left:27px;
}

Qui me donne :

Spoiler:
.

Encore merci pour votre aide thumleft mais le problème n'est toujours pas réglé.


Dernière édition par Live le Dim 1 Nov 2015 - 15:26, édité 1 fois

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'affichage des catégories

Message par Peggy06 le Dim 1 Nov 2015 - 15:00

LoL, j'ai trouvé encore ça
Dans css
Milouze14 a écrit:
Code:
  /* forum title titre des forums  */
                a.forumtitle {
                  color: #4d4d4d;
                  font-family: Arial,Helvetica,sans-serif;
                  font-size: 1.4em;
                  font-weight: bold;
                  text-decoration: none;
        position: absolute ;
                margin-top: 10px;
       
                  }
modifier la couleur et autres, mais je me demande s'il ne faut pas enlever les autres changements .

Peggy06
****

Messages : 261
Inscrit(e) le : 24/10/2014

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

Résolu Re: Modifier l'affichage des catégories

Message par Live le Dim 1 Nov 2015 - 15:25

Mon problème est réglé !!! Voici le code CSS que j'ai indiqué :

Code:
h3.hierarchy{
  margin-left:0px;
}

.genmed {
    margin-top: 26px;
    margin-left: 20px;
}

/* forum title titre des forums  */
a.forumlink {
    color: #fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 19px;
    /* position: absolute; */
    text-decoration: none;
    position: absolute;
    margin-left: 27px;
}


En vous remerciant infiniment! YesYes

Live
***

Masculin
Messages : 136
Inscrit(e) le : 12/05/2012

http://forum.forumactif.com/
Live 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