Image par catégorie

[tenardier]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://addict-figurines.forumgratuit.org/

Description du problème

Bonjour à tous,
J'aimerais pouvoir mettre une image différente sur chaque catégorie comme ci dessus.
J'ai regardé un petit peu les tuto proposés, mais j'ai pas trouvé ce qui me concerne.
Merci pour votre aide
Cordialement

[[Nihil]]

Bonjour,

C'est possible oui en modifiant un peu un template et le CSS

Est ce qu'on pourrait avoir :
- le template index-box du forum
- un lien vers une image d'exemple à mettre

[tenardier]

Index box

Code:

<ul class="linklist">
<!-- BEGIN switch_user_logged_in -->
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;•&nbsp;</li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;•&nbsp;</li>
<!-- END switch_user_logged_in -->
<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
<!-- BEGIN switch_user_logged_in -->
<li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
<!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
<dd class="topics">{L_TOPICS}</dd>
<dd class="posts">{L_POSTS}</dd>
<dd class="lastpost"><span>{L_LASTPOST}</span></dd>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<!-- END tablehead -->

<!-- BEGIN forumrow -->
<li class="row">
<dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
<dd class="dterm">
<div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}>
<br />
{catrow.forumrow.FORUM_DESC}

<!-- 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}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</div>
</dd>
<dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
<dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
<dd class="lastpost">
<!-- BEGIN ads -->
<span class="AD_LastPA">
                               <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                               <span class="AD_LastInfos">
                                   <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                   {catrow.forumrow.ads.DATE}<br />
                                   {catrow.forumrow.ads.LOCATION}
                               </span>
</span>
                           <!-- END ads -->

                           <!-- BEGIN avatar -->
                           <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                           <!-- END avatar -->

<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
</dd>
</dl>
</li>
<!-- END forumrow -->

<!-- BEGIN tablefoot -->
</ul>

<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;•&nbsp;</li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;•&nbsp;</li>
<li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
<!-- BEGIN switch_delete_cookies -->
<li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
<!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->


Image

https://servimg.com/view/19307131/226

[[Nihil]]

Merci ! Petite astuce, si possible il faut mettre le code dans des balises bbcode "code", c'est plus pratique et ça évite des modifications par Forumactif !

Dans le template, il faut modifier :

Code:

<div class="forabg">

qui devient :

Code:

<div class="forabg" id="cate-{catrow.tablehead.ID}">

Sur forumactif chaque catégorie a déjà un identifiant unique, même s'il n'est pas affiché. Avec cette modification, on va l'afficher dans le code ce qui permet ensuite de l'utiliser en CSS.

Une fois que c'est validé, on ajoute ce CSS :

Code:

/* Debut fond different pour chaque categorie */

.forabg .topiclist.forums {
  background-size: cover;
}

.forabg .row {
  border: 0;
}

/* Fond Mag Addict */
#cate-c17 {
    background-image: url('https://i62.servimg.com/u/f62/19/30/71/31/detail11.jpg')
}

/* Fin fond different pour chaque categorie */

On va tester si ça marche et ensuite j'expliquerai comment modifier ! Par ce que sinon ça ne sert à rien d'expliquer quelque chose qui ne marchera peut-être pas

[tenardier]

Merci mais ça fonctionne pas
Voici le résultat

[[Nihil]]

Est ce que tu as bien validé le template ? En regardant directement dans le code du forum je ne vois pas les modifications :'(

[tenardier]

Normal, du fait que ca fonctionné pas j'ai supprimé la modification, je vais ré-essayé, j'ai du merder quelque part.

[tenardier]

Voilà c'est validé 
Comme hier, rien à changé 

[[Nihil]]

Si on regarde bien ça a changé, juste pas au bon endroit ! La bande bleue "Mag addict" a le fond
Le fond est juste au mauvais endroit

Petite étourderie de ma part, le CSS

Code:

#cate-c17 {
    background-image: url('https://i62.servimg.com/u/f62/19/30/71/31/detail11.jpg')
}

Est en fait :

Code:

#cate-c17 .topiclist.forums{
    background-image: url('https://i62.servimg.com/u/f62/19/30/71/31/detail11.jpg');
}

[tenardier]

Hé ben moi je dis Merci et Bravo 
C'est pratiquement ça 
Comment puis-je faire pour que l'image soit sur la longueur sans que celle-ci se répète sur le coté droit ?

[[Nihil]]

Il y a une petite erreur dans le CSS, juste avant

Code:

/* Debut fond different pour chaque categorie */

Dans le code source je vois ça qui traine, surement un oubli

Code:

);

Du coup ça casse le code CSS qui vient juste après, qui est justement celui pour que ça prenne la bonne largeur !

Ensuite pour adapter pour d'autres fonds, en fait il faut changer copier le code pour chaque catégorie :

Code:

#cate-c17 .topiclist.forums{
    background-image: url('https://i62.servimg.com/u/f62/19/30/71/31/detail11.jpg');
}

La partie c17 correspond à l'id de la catégorie :
Par exemple dans notre cas, j'ai utilisé le fil d'ariane pour trouver le lien vers la catégorie, et dans l'url ce qui nous intéresse c'est le c17 : http://addict-figurines.forumgratuit.fr/c17-mag-addict

Si par exemple on voulait le faire pour Atelier, on ajouterait donc c2 :
http://addict-figurines.forumgratuit.fr/c2-atelier

Code:

#cate-c2 .topiclist.forums{
    background-image: url('https://i62.servimg.com/u/f62/19/30/71/31/detail11.jpg');
}

[tenardier]

La largeur impec, merci.

Pour les autres catégories, je rajoutes uniquement les scripts à la suite  dans le meme CSS, cad, là dedans ?

Code:

/* Debut fond different pour chaque categorie */
 
.forabg .topiclist.forums {
  background-size: cover;
}
 
.forabg .row {
  border: 0 ;
}
 
/* Fond Mag Addict */
#cate-c17 .topiclist.forums{
    background-image: url(' https://i62.servimg.com/u/f62/19/30/71/31/bcoul10.jpg');
}
 
/* Fin fond different pour chaque categorie */

[[Nihil]]

Oui

Pour que ça soit organisé, je conseille de le mettre juste après :

Code:

/* Fond Mag Addict */
#cate-c17 .topiclist.forums{
    background-image: url(' https://i62.servimg.com/u/f62/19/30/71/31/bcoul10.jpg');
}

Comme ça en lisant les commentaires on peut retrouver à quoi sert quel code

[tenardier]

Ça marche 
Merci énormément pour ton aide et ta patience.
Cordialement