Titre des catégories imagées

[Lunathiel]

Rappel du premier message :

Bonjour ou bonsoir

En parcourant les forums j'ai trouvé une idée magnifique



Le titre et l'image des catégorie n'as plus de cadre et est remplacé par une image

celle-ci dans mon exemple

https://2img.net/r/ihimizer/img703/9109/barrecatgorie.png

Voila je cherche à créé la même chose pour mon forum.



Premièrement:


et ensuite mettre cette image au-dessus



Comme ceci



Il faudra aussi faire en sorte que le texte se mettre au milieu de l'image comme ici





Quelqu'un saurait-il m'aider? Comment dois-je modifier les templates ou le CSS de mon forum pour en arriver là?... Un grand merci à vous

[SoraNoHime]

De rien bonne soirée

[Lunathiel]

Sur mon forum cela fonctionne en partie seulement

Voici ce que j'obtiens =>


Il faudrait modifier l'emplacement du titre pour qu'il soit plus à gauche (après les étincelles sur mon image)

Aussi le cadre autour des catégories est doublé quand deux forums ce touche

et enfin puis je savoir exactement ce que vous avez modifié dans le template car j'avais déjà énormément modifier celui-ci...

Un grand merci

[Lunathiel]

Irk désolé de double poster mais c'est très important... J'avais pourtant copier mes templates mais visiblement je me suis plantée quelque part et je n'ai plus ni de page d'acceuil ni de qui est en ligne....

Est-il possible de revenir en arrière et de retrouver ces templates comme avant T____T

EDIT Soulagement j'avais fait une ancienne copie et la revoila tout va bien

On peu donc revenir a mon message précédent...

[SoraNoHime]

Ce que j'ai modifié ... Oulà, je me souviens pas de tout et je viens de passer 3 jours à programmer donc je vais essayer de reprendre en comparant comme je peux

dans la css : par rapport à avant.

j'ai enlevé le .secondarytitle h2qui correspond au titre dans les catégories pour éviter que l'image ne se répète en background sur la phrase en plus de l'encadrement de la cellule où il se trouve

j'ai rajouté : background-repeat: no-repeat; et background-color: transparent;, pour rendre la cellule transparente du background couleur d'origine et éviter que l'image choisie ne s'y répète.

D'ailleurs à mon avis le problème de ton texte vient de ce fameux secondarytitle h2, essaie de voir si tu rajoutes ceci mais à part du premier secondarytitle :

Code:

.secondarytitle h2 {
height:hauteur de l'image px;
width: longeur px;}

Pour le template. j'ai du insérer l'image dans la cellule de titre du forum. Or ce qui me génais avant c'était la fonction class="forumline" car c'est celle-ci qui pose le cadre du tableau des catégories. Il m'a fallut la décaler pour quelle ne soit pas perdu directement aux catégories, c'est pourquoi elles sont dédoublées

Donc j'ai séparé

Code:

</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table 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="150" class="dersuj"><div style="width:150px;"> </div></th>
  </tr>
  <!-- END tablehead -->
</table>

ceci où j'ai enlevé le class="forumline" et coupé le tableau, j'ai rajouté la class="dersuj" pour faire disparaitre la partie dernier sujet par la css.

et ici dans le titre des catégories

Code:


<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- 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 -->

J'ai du rajouté le forumline en recréant la partie de tableau des catégories (donc juste la première ligne)

et ici :

Code:

    <td class="row3 over" align="center" valign="middle" height="50" width="150"><div style="width:150px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}<br><br></span><div class="haut"><span class="gensmall"><font size="1">Sujets : {catrow.forumrow.TOPICS} <br> Messages : {catrow.forumrow.POSTS}</font></span></div>
      </div></td>

J'ai du également rajouté un <divstyle="width:150px;"> car sinon la partie où apparait le dernier post se rétrécit.

Voilà.

[Anzu]

Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir délester votre sujet, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, dans ce cas, votre premier message et cochez l'icône A bientôt sur ForumActif

[Lunathiel]

J'étais justement entrain de re-tester à nouveau ce code sur mon forum test...

J'ai quelques petits soucis que j'essaye de régler de mon côté, si ça ne fonctionne pas j'éditerais à nouveau mon message... Mes excuses pour ne pas avoir upper ce message mais ces dernier temps (car nous somme en fin de mois --" vive les abonnements) ma connexion est extrêmement lente...

Je vous donne rapidement de mes nouvelles

[Lunathiel]

Après 1/2 heure, 40 min de test voila ce qui en ressort:

Mon template avait déjà été modifié pour enlever la partie "autant de messages dans autant de sujet" et pour enlever la colonne qui contenait ceci.

En testant avec ton template je n'arrivais à rien que me plaisait.

Donc j'ai repris mon template modifié auparavant que j'ai à nouveau modifié avec tes informations (ci-dessus).

Malheureusement je n'ai pas compris cette partie (en rouge)

"ceci où j'ai enlevé le class="forumline" et coupé le tableau, j'ai rajouté la class="dersuj" pour faire disparaitre la partie dernier sujet par la css."

Avec mon template modifié puis remodifié par moi que voici =>

Spoiler:

Le texte "dernier message" reste affiché... mais comme je n'ai pas su tout modifié je me doute que c'est là d'où viens l'erreur.

Pourrais-tu m'en dire un peu plus?

Voici mon template modifié sans les dernières modifications =>

Spoiler:

---

Ensuite le problème du titre qui reste centré et non près des étincelles blanches persiste... Comment faire en sorte alors qu'il soit aligné sur la gauche avec une marge (pour le placé correctement) ???

Encore un immense merci de ton aide

[SoraNoHime]

Je me suis permise de tester avec ton image pour une fois, la mienne étant plus grande je pense que les réglages à faire sont peut être autre pour caser le titre.

Malheureusement je n'ai pas compris cette partie (en rouge)

"ceci où j'ai enlevé le class="forumline" et coupé le tableau, j'ai rajouté la class="dersuj" pour faire disparaitre la partie dernier sujet par la css."

Je réexplique différemment (j'ai parfois tendance à expliquer en suivant ma pensée ^^ ça peut donner des interprétations bizarres en effet)

En fait à la base, les catégories sont un seul tableau avec :

1ère ligne : Titre de la catégories / Derniers sujets
-----------------------------------------------------
2 ème ligne: Titre Lien de la catégorie / Dernier post

J'ai du couper ce tableau en le scindant en deux par les lignes car la class forumline englobait le premier tableau en entier et laisser les bordures dans la première ligne.

Il m'a donc fallut :

1. scinder le tableau
2. enlever la class="forumline" à la première ligne devenu un seul tableau
3. la remettre à la seconde ligne devenu un seul tableau.

Pour les modif à faire : ( voir sur mon lien dans mon profil le résultat que j'obtiens.)

Quand tu regardes cette partie à partir de ton template avec les modifications :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table 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="150" class="dersuj"><div style="width:150px;"> {L_LASTPOST} </div></th>
  </tr>


la balise {L_LASTPOST } est à enlever et à remplacer par un espace

ensuite :

tu as du t'apercevoir que la partie dernier sujet avec messages et sujets dedans sont réduites. elle se retrouvent ici :

Code:

      <!-- BEGIN forum_link_no -->
   
      <td class="row3 over" align="center" valign="middle" height="50"<div style="width:150px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->

en fait le code est faux , change le ainsi

Code:

      <!-- BEGIN forum_link_no -->
   
      <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
      <!-- END forum_link_no -->

Pour ton décalage aux étincelles, il faudrait que tu te renseignes sur la fonction margin en css. En effet, je sais à quoi elle sert, mais n'ai jamais eu le temps de la tester. et donc il faudra voir avec la balise .secondarytitle h2.

(je dois y aller mais suis de retour vers 17h, je verrai pour le margin en revenant)

[Lunathiel]

Parfait pour le template tout est nickel... Je cherche donc pour le titre à mon tour ^^


Edit:
J'Y SUIS ARRIVEEEEEE

Oh bonheur!!!!!

J'ai ajouté

Code:

text-align: left;
padding-left: 150px;

à ".secondarytitle{"

[SoraNoHime]

J'ai trouvé ^^

me suis planté la fonction n'est pas margin (marges extérieures) mais padding (marges intérieures)

donc voici la css que j'ai utilisé :

Code:

/*Titre des catégories*/
.secondarytitle{
background-image: url('lien de ton image');
background-repeat: no-repeat;
background-color: transparent;
background-position:left bottom;
text-align: left;
height: hauteurpx;
width: largeurpx;}

.dersuj{
background-color: transparent;
background-image:none;}

.secondarytitle h2 {
padding-left : taille de tes étincelles sur ton imagepx;
}


Spoiler:

[Lunathiel]

Jy suis arrivée aussi XD en même temps lol

mais j'ai mis le padding dans .secondarytitle{

du coup le .secondarytitle h2 deviens inutile O_O

[SoraNoHime]

Un petit détail pour ceux qui mettent comme moi les liens des sous forums dans les catégories.

Il faut changer cette partie dans le template :

Code:

        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">


par

Code:

        </h{catrow.forumrow.LEVEL}><br/>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">


Sinon les liens des sous forums apparaissent à coté du nom du forum.

Si tout va bien maintenant je te souhaite une bonne journée. Cordialement.

[Lunathiel]

Tout est parfait un immense merci...

je peu enfin clôturer =3