Poser une image en titre de sous-forum

[Valkyrie - Grande Guerriè]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://dimension.forumactif.com/?tt=1

Description du problème

Bonjour,

cela fait quelques jours que je me suis vraiment lancée dans la création de mon forum, Dimension, et jusqu'à maintenant j'arrivais plus ou moins à m'en sortir, cependant j'ai maintenant un problème qui ne semble pas avoir été abordé sous l'angle dont j'aurais besoin.

Tout d'abord j'ai mis la plupart des cellules de mon forum transparentes afin de vraiment créer des boutons pour l'ouverture des forums, ainsi:

accueil du forum:

Vous vous doutez surement ou je veux en venir, je me retrouves avec des cellules de sous-forum transparentes, et donc peu lisible;

le problème:

Mon but ici serait de remplacer le simple titre par une image comme celle-ci:

Exemple:

Voici la tête actuelle de mon ccs:

le css au complet:

et voici la seule temptate que j'ai modifié, dans 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}<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="center" 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 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 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="center">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src= height="0" width="46" /></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>

</span>
</h{catrow.forumrow.LEVEL}>
<table>
<tr>
<td><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}
<td>
<div class="catéhunter">
<div class="dernsujethunter"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</div>
  </td>

      
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

J'ai vraiment besoin d'aide, c'est la dernière chose qu'il me reste à régler quant à l'apparence de mon forum et c'est un projet qui me tiens à cœur, en route depuis un an, j'aimerais vraiment beaucoup savoir s'il y à un code, ou une modification à mettre en route pour pouvoir poster une image qui soit visible en titre de sous forum, il ne me manque que cela, merci d'avance pour une réponse!

[Hadhellia]

Bonjour !
Actuellement, il n'y pas vraiment possible de mettre une image à la place d'un titre de sujet sans faire ça manuellement à chaque fois, il va donc te falloir explorer ce monde merveilleux qu'on appelle les templates !

Dans ton panneau d'administration, suit le chemin suivant : Affichage > Templates > Général. Dans la liste qui va suivre, cherche la template topic_list_box avec CTRL + F pour que ce soit plus rapide

Ensuite, dans ta template, un code sera affiché. Cherche la partie de ce code qui est la suivante aux lignes 55 à 60

Code:

<div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>

Et remplaces-le par le suivant

Code:

<div class="listeSujetTitre">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>

Dans ton CSS, ajoute ceci

Code:

.listeSujetTitre{
background-color:#fff;
}

Ensuite tu modifies la couleur comme tu le souhaites

Sinon, si tu voulais mettre un fond à toute la partie de la liste des sujet, fais-le moi savoir ! Peut-être ais-je mal compris ^^

Bonne journée !

[Valkyrie - Grande Guerriè]

Re bonjour^^

Merci, du coup c'est preeesque ce que je veux!
Est-ce qu'il y à moyen de rajouter de la transparence, seulement sur la couleur de fond pas sur le titre?
Et est-ce qu'il est possible de centrer le titre par rapport à sa cellule?

[Hadhellia]

Tout à fait
Il faut pour cela utiliser le code couleur RGBA

Code:

background-color:rgba(255, 255, 255, 0.6);

La dernière valeur correspond à l'opacité. Je te conseille d'utiliser un générateur de couleurs si tu rencontres des problèmes pour mettre la couleur que tu souhaites !

Ensuite pour centrer ton titre, il te suffit de rajouter ceci à ton CSS pour le titre de tes sujets

Code:

text-align:center;

[Valkyrie - Grande Guerriè]

Génial, merci beaucoup! Je vais bientôt pouvoir lancer mon forum, c'est super! >w<!! kiaaaa merci merci merci x')!