Background différent pour chaque catégories

[Alexlerouche]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nickelodeonfans.forumactif.be/

Description du problème

Bonjour/soir FA ,

Le titre et le screen sont à mon avis assez explicites ..

J'ai fait énormément de recherches mais hélas sans succès ..

J'espère que c'est faisable et que quelqu'un saura m'aider ..

Le but de cette manoeuvre est de garder le thème sur lequel nous travaillons le plus épuré possible en n'ayant donc qu'une image (différente) pour chaque catégories qui ferait office de background et passerait ainsi sous les liens des forums ..
Mettre une image par forum (et il en faudrait bcp ..) nous éloignerait de ce but ..

D'avance merci ..

Alex.

[Lixyr]

Bonjour,

Code:

Le but de cette manoeuvre est de garder le thème sur lequel nous travaillons le plus épuré possible en n'ayant donc qu'une image (différente) pour chaque catégories qui ferait office de background et passerait ainsi sous les liens des forums ..
Mettre une image par forum (et il en faudrait bcp ..) nous éloignerait de ce but ..

Je ne comprends pas vraiment le système... Comment voulez-vous obtenir un fond différent pour chaque catégorie... sans avoir à mettre des backgrounds différents ? C'est contradictoire ce que vous dites, vous pourriez expliquer ?

[Neptunia]

Bonjour ^^


La bonne nouvelle est que c'est possible !

On va commencer par placer un javascript.
PA > Modules > Gestion des codes javascripts > Créer un nouveau javascript
Titre : au choix
Placement : sur l'index
Code :

Code:

    $(function(){
    $('a.forumtitle[href^="/f1-"]').closest('ul.topiclist.forums').addClass('Nep_categ1');
    $('a.forumtitle[href^="/f3-"]').closest('ul.topiclist.forums').addClass('Nep_categ2');
    $('a.forumtitle[href^="/f2-"]').closest('ul.topiclist.forums').addClass('Nep_categ3');
    });

Explications :
- Vous placez autant de lignes $('a.forumtitle[href^="/f1-"]').closest... que vous avez de catégories et chaque ligne a deux portions à configurer en rouge dans le texte ci-dessous
$('a.forumtitle[href^="/f1-"]').closest('ul.topiclist.forums').addClass('Nep_categ1');
En fin de ligne, ici Nep_categ1 est l'identifiant que l'on va ajouter au tableau des sous-forums pour pouvoir agir sur cette zone par le biais du CSS
En début de ligne, ici /f1-, il s'agit de l'identifiant du premier sous-forum (visible aux invités) de la catégorie. Il est important de choisir un forum qui soit visible du plus grand nombre, si vous prenez comme repère une zone privée, la personnalisation fonctionnera pour vous mais pas pour vos membres ou vos invités.
Sur votre forum par exemple on voit ce sous-forum :
nickelodeonfans.forumactif.be/f2-charte-footmaniaque
Votre script contiendrait donc la ligne

Code:

    $('a.forumtitle[href^="/f2-"]').closest('ul.topiclist.forums').addClass('Nep_categ1');

afin de personnaliser la section "Règlement, aide et présentation des membres"

Ensuite on va sur la feuille de style CSS et on ajoute par exemple ceci

Code:

.Nep_categ1 {
    background-image: url(http://adresse_image_categorie1.jpg)!important;
   }
.Nep_categ2 {
    background-image: url(http://adresse_image_categorie2.jpg)!important;
   }
.Nep_categ3 {
    background-image: url(http://adresse_image_categorie3.jpg)!important;
   }
.Nep_categ1, .Nep_categ2, .Nep_categ3 {
    background-repeat: repeat !important;
}

Le code se décompose en deux parties.
La première vise à personnaliser le fond de chaque section (3 blocs de CSS dans l'exemple). N'oubliez pas de remplacer adresse_image_categorieX.jpg par le lien de vos images.
Et le dernier bloc sert à modifier les caractéristiques de répétition du fond si le comportement par défaut (répétition horizontale) ne convient pas.
Dans l'exemple j'ai utilisé des textures de 50px maximum de côté et ai donc ordonné la répétition horizontale et verticale pour couvrir toute la catégorie.

---

Le code est évidemment fonctionnel, il a été testé sur un forum phpBB3 avant de vous être proposé.

---

Lixyr : je ne sais pas si j'ai compris correctement mais moi je pense qu'on demande un fond par catégorie (et non par sous-forum)

[Alexlerouche]

Hello Lixyr et Neptunia ,

Dsl Lixyr , je me suis un peu emmêlé les backgrounds pinceaux .. ^^

Neptunia , oui c'est exactement ce que je recherche .. Je teste tout ça et je reviens informer si c'est ok ..
Je pensais par contre qu'il faudrait passer par les templates ..

Merci en tout cas .. ;-)

[Neptunia]

Je pensais par contre qu'il faudrait passer par les templates ..

Pour ce qui est de l'affichage d'une liste de sous-forums, sujets, membres ou même de messages constituant un sujet le procédé des templates est le même : un seul bloc de code qui se répète pour chaque élément jusqu'à la fin de la liste. On ne pourrait donc mettre qu'une image qui serait identique pour chaque catégorie.

On pourrait évidemment insérer le javascript dans le template index_box mais ça resterait du javascript.

[Alexlerouche]

Donc voilà , je viens d'installer le js et le css ..

J'ai bien entendu une 1ère catégorie non-visible pour les invités car elle ne concerne que les modos et admins ..
Alors , de ce que j'ai compris (pas tout à mon avis ..) , j'ai fait ceci avec le JS :

Code:

$(function(){
    $('a.forumtitle[href^="/f2-"]').closest('ul.topiclist.forums').addClass('Nep_categ1');
    $('a.forumtitle[href^="/f3-"]').closest('ul.topiclist.forums').addClass('Nep_categ2');
    $('a.forumtitle[href^="/f4-"]').closest('ul.topiclist.forums').addClass('Nep_categ3');
    });

J'ai donc passé outre le "f1" pour la 1ère catégorie puisque invisible aux invités .. Je ne sais pas si j'ai bien fait ..
En tout cas pour le moment il n'y a que la 2ème catégorie "RÈGLEMENT, AIDE ET PRÉSENTATION DES MEMBRES" (donc la 1ère visible quand on est en invité) où le background s'est bien installé mais pas sur les autres catégories ..
J'en ai fait que 3 par mesure de test ..
Et pour le css , j'ai bien mis les 3 url :

Code:

.Nep_categ1 {
    background-image: url(http://nsa37.casimages.com/img/2016/02/01/160201084008108748.png)!important;
  }
.Nep_categ2 {
    background-image: url(http://nsa38.casimages.com/img/2016/02/01/160201090433857288.png)!important;
  }
.Nep_categ3 {
    background-image: url(http://nsa37.casimages.com/img/2016/02/01/160201090608837661.png)!important;
  }
.Nep_categ1, .Nep_categ2, .Nep_categ3 {
    background-repeat: repeat !important;
}

Ces images font aussi juste office de test ..

Bref j'ai du merder quelque part ..

[Neptunia]

Vous recourez aux forums 2 3 et 4 c'est à dire

http://nickelodeonfans.forumactif.be/f2-charte-footmaniaque
http://nickelodeonfans.forumactif.be/f3-presentation-des-membres
http://nickelodeonfans.forumactif.be/f4-aide-au-fonctionnement-du-forum

Ces 3 forums étant dans la même catégorie, cette catégorie recevra les 3 classes différentes et les 3 fonds différents (toutefois seul le dernier devrait être affiché)

Pour que ça marche sur les autres catégories il faut prendre un forum de chaque catégorie et non 3 fois la même.

Pour le foot belge par exemple on a :
nickelodeonfans.forumactif.be/f5-jupiler-pro-league donc forum numéro 5 et le javascript devrait reprendre :

Code:

$('a.forumtitle[href^="/f5-"]').closest('ul.topiclist.forums').addClass('Nep_categ2');

[Alexlerouche]

Ok ok , j'ai capté ma bêtise ..

Je vais regarder pour bidouiller un peu le css et dès que c'est bon , je mets résolu ..

Encore merci , Neptune ..

[Alexlerouche]

C'est impec , Neptune , j'ai pile ce que je souhaitais ..

Encore un grand merci pour ta précieuse aide !

@ bientôt p-ê et bonne soirée ..

Résolu*