PHPBB3 - Image différente dans chaque fond de catégorie

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

Résolu PHPBB3 - Image différente dans chaque fond de catégorie

Message par Isy le Dim 30 Oct 2016 - 0:56

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à vous tous.
Tout d'abord, je vous prie de m'excuser par avance car je suis une novice en code.
Je cherche depuis un bon moment comment faire pour mettre une image différente dans le fond de chaque catégorie. J'ai bien sur essayé ce tuto http://forum.forumactif.com/t385900-mettre-une-image-differente-en-fond-de-chaque-categorie#3244972 mais cela ne fonctionne pas.

Je ne sais pas trop où est ce que j'ai commis l'erreur. Tout d'abord il y a une différence de version entre le tuto et le forum sur lequel j'aimerai installer ce code. Je ne sais pas si cela joue avec le Javascript.

Voici ce que j'ai fait:
-créer deux catégories: Catégorie 1 et Catégorie 1
-créer la fiche Javascript avec ce code:
Code:
$(function(){
      $('th.secondarytitle h2:contains("Catégorie 1")').closest('.forumline').attr('id','Cat1');
      $('th.secondarytitle h2:contains("Catégorie 2")').closest('.forumline').attr('id','Cat2');
    });
"Sur toutes les pages" a été coché et "Activer la gestion des codes Javascript" également.
- Dans le CSS j'ai mis le code suivant:
Code:
    #Cat1 {
      background-image: url('https://udemy-images.udemy.com/course/750x422/145178_5bb8_3.jpg');
    }

    #Cat2 {
      background-image: url('https://s-media-cache-ak0.pinimg.com/originals/47/ea/a8/47eaa8ad80f79dcc2d3bc3a215654a0a.jpg');
    }


Je vous remercie par avance pour votre aide. Smile




Dernière édition par Isy le Dim 30 Oct 2016 - 19:09, édité 1 fois

Isy
Nouveau membre

Messages : 7
Inscrit(e) le : 07/05/2011

http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Neptunia le Dim 30 Oct 2016 - 1:18

Bonjour ^^

Isy a écrit:
Je ne sais pas trop où est ce que j'ai commis l'erreur. Tout d'abord il y a une différence de version entre le tuto et le forum sur lequel j'aimerai installer ce code. Je ne sais pas si cela joue avec le Javascript.

En effet, beaucoup de scripts ou de codes CSS ne fonctionnent plus d'une version sur l'autre. Ici à cause des sélecteurs qui changent de nom d'une version sur l'autre.

Un autre sujet traitant de la même demande mais en phpBB3
résolu Background différent pour chaque catégories
avatar

Neptunia
Membre actif

Féminin
Messages : 12430
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Milouze14 le Dim 30 Oct 2016 - 7:08

Hello Isy et Hélène Wink ,

en partant du principe ou tes catégories sont séparées dans ton P.A:

Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index

Séparer les catégories sur l'index : Cocher sur complet

On peut afficher et paramétrer tout ce que l'on veut grâce à ce script :

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur l'index.

Dépose ceci:
Code:

$(function(){
$('h2.hierarchy:eq(0) ').closest('.forabg').attr('id','Cat1');
$('h2.hierarchy:eq(1) ').closest('.forabg').attr('id','Cat2');
});




Penses à cliquer sur le bouton

La css reste la même Wink .


Ensuite , si tu veux rajouter une autre catégorie , il faudra procéder ainsi:
Code:


$(function(){
$('h2.hierarchy:eq(0) ').closest('.forabg').attr('id','Cat1');
$('h2.hierarchy:eq(1) ').closest('.forabg').attr('id','Cat2');
$('h2.hierarchy:eq(2) ').closest('.forabg').attr('id','Cat3');
});
Première catégorie:
Code:
$('h2.hierarchy:eq(0) ').closest('.forabg').attr('id','Cat1');

Deuxième catégorie:
Code:
$('h2.hierarchy:eq(1) ').closest('.forabg').attr('id','Cat2');

Troisième catégorie:
Code:
$('h2.hierarchy:eq(2) ').closest('.forabg').attr('id','Cat3');

etc etc Wink .

a++

avatar

Milouze14
Membre actif

Masculin
Messages : 4806
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Isy le Dim 30 Oct 2016 - 9:44

Un énorme merci a tous les deux!

J'avoue avoir eu des problème avec le tuto qu'Hélène m'a mis en lien mais la solution de Milouze14 marche parfaitement. Ce pendant elle ne fonctionne que sur le Séparer les catégories sur l'index > Complet. Hors je souhaiterai le faire sur Moyen, est-ce possible?

Merci infiniment de m'accorder de votre temps et pour votre patience Smile

Isy
Nouveau membre

Messages : 7
Inscrit(e) le : 07/05/2011

http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Milouze14 le Dim 30 Oct 2016 - 11:02

Re,
après réflexion le script n'aurait pas fonctionné longtemps car si tu n'as qu'un seul fofo par catégorie cela fonctionne , dès lors que tu en rajoutes un , le script ne fait plus son effet...

Bref, on va changer le script:
Édites le script , supprimes le contenu et remplaces par celui-ci:
Code:

$(function(){
$( ".forabg ").attr( "id", function(div) {return "M14_Cat_" +div;})});


Puis modifies la c.s.s ainsi:

Code:

#M14_Cat_0
{
background-image: url('https://udemy-images.udemy.com/course/750x422/145178_5bb8_3.jpg');
}
 
#M14_Cat_1
{
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/47/ea/a8/47eaa8ad80f79dcc2d3bc3a215654a0a.jpg');
}



Le script va donner cet ID à la première catégorie:

Code:
#M14_Cat_0

La deuxième:
Code:
#M14_Cat_1

La troisième:
Code:
#M14_Cat_2

etc etc

Si tu ajoutes une autre catégorie le script donnera automatiquement un autre id Wink .

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4806
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Neptunia le Dim 30 Oct 2016 - 11:14

Heu déjà il y a un problème.

Tu indiques sur ton profil Templates modifiés : Non

Toutes les solutions qui t'ont été proposées l'ont été sur la base de templates vierges. On ne pouvait pas vérifier puisque le lien du forum n'était pas visible tant qu'on n'avait pas posté.

Aucune des solutions proposées ne fonctionnera sur ton forum puisque les sélecteurs d'origine (le forabg entre autre ont disparu.

Et il nous faudrait ensuite une capture écran qui définit de manière précise ce que tu appelles le fond de catégorie (c'est évident sur une présentation de base, maintenant avec des catégories en bloc dont chaque bloc comporte plusieurs zones bien distinctes, c'est bien plus flou.




Concernant ma méthode, je peux la simplifier et utiliser la même approche que MlleAlys en me basant sur le nom de la catégorie (à l'époque le pseudo-élément :contains n'était pas en très bons termes avec moi)

Concernant la méthode de Philippe, elle présente une contrainte. Elle se base sur l'ordre d'affichage des catégories.
Autrement dit si un administrateur voit 4 catégories (Administration / Partie thématique / Présentations+Partenariat / Corbeille), un membre voit 3 catégories ( Thématique / Présentations / Corbeille) et un invité uniquement les partenariats. Ce que l'administrateur verra comme fond de catégorie Administration correspondra à ce que le membre aura sur la catégorie thématique et ce qu'un invité verra sur les partenariats.

En d'autres termes ça fonctionne mais demande une stricte discipline dans l'ordre des catégories et les permissions correspondantes.
avatar

Neptunia
Membre actif

Féminin
Messages : 12430
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Isy le Dim 30 Oct 2016 - 17:45

Re bonjour, merci pour vos réponses.

Hier mon forum était "vide", sans module ajouté ni rien. J'ai juste voulu tester ce matin un petit truc trouvé et free, je me demandais ce que c'était. Je me doute bien que les solutions qu'on m'a donné jusqu'ici ne fonctionne pas sur ce qui est mis sur le forum en teste, car j ai touché au template d'index box. J'essaie de comprendre les codes qu'on me donne mais j'avoue avoir du mal, c'est sur.

Au final, j'aimerai arriver a ce type de structure


Mais il faut que j'arrive à comprendre comment on trouve ce qui détermine le "fond" de la catégorie dans index box ( la zone Grise, "l'image prend tout le fond"). Il faudrait que l'image soit différente dans chaque fond de catégorie.

Excusez moi, j'ai du mal à m'exprimer pour ce genre de demande, car identifier le nœud est assez difficile pour moi. je ne me rend pas bien compte de tout ce que ça représente comme travail dans le code pour aboutir a ce type de résultat.


Isy
Nouveau membre

Messages : 7
Inscrit(e) le : 07/05/2011

http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Neptunia le Dim 30 Oct 2016 - 18:15

Avec le template actuel cela ne sera pas possible parce que

Le titre de catégorie se trouve dans une div tleCAT
L'ensemble des autres forums utilise la div mdlCAT
A l'intérieur de cette div mdlCAT, chaque forum utilise sa propre div FRM

Mais il n'y a rien qui inclut à la fois le titre et les forums. Moralité, on mettrait une image sur le titre de catégorie et une autre (éventuellement la même) sur les sous-forums.

Il faudrait dans un premier temps remplacer dans le template
Code:
<div class="tleCAT">
par
Code:
<div class="wrapperCAT"><div class="tleCAT">

puis remplacer :
Code:
      <br clear="all" /></div>
par :
Code:
      <br clear="all" /></div></div>

Je fais ça à la volée et j'espère que je referme bien ma div au bon endroit.




Autre détail qui pourrait nous aider : rendre visible aux invités une deuxième catégorie sur ton forum.
avatar

Neptunia
Membre actif

Féminin
Messages : 12430
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Isy le Dim 30 Oct 2016 - 18:38

Whoa c'est déjà Super! Tout tes dans un seul bloc.

Donc à partir d'ici il faudrait un Javascript qui toucherais la div wrapperCAT si je veux pouvoir assigner une image différente dedans?
J'ai compris que maintenant je pouvais le modifier avec le CSS grâce à cette nouvelle classe (oui désolée, je passe pour une idiote en disant cela mais je découvre en même temps)

Encore mille fois merci pour votre aide!

Isy
Nouveau membre

Messages : 7
Inscrit(e) le : 07/05/2011

http://forumstests.forumgratuit.be/
Isy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Neptunia le Dim 30 Oct 2016 - 18:59

Bah on peut effectivement modifier par CSS, mais par CSS on modifiera toutes les catégories de la même façon (on pourrait cibler une par une avec le pseudo-élément :nth-child mais c'est déjà un peu plus compliqué et aurait les mêmes limites que le code de Philippe.

Maintenant on va reprendre le principe de MlleAlys en ciblant sur le nom de la catégorie et on devrait pouvoir utiliser ce genre de script :

Code:
    $(function(){
      $('.tleCAT h2:contains("NOM DE LA CATEGORIE 1")').closest('.wrapperCAT').attr('id','IDENTIFIANT 1');
      $('.tleCAT h2:contains("NOM DE LA CATEGORIE 2")').closest('.wrapperCAT').attr('id','IDENTIFIANT 2');
    });
avatar

Neptunia
Membre actif

Féminin
Messages : 12430
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PHPBB3 - Image différente dans chaque fond de catégorie

Message par Isy le Dim 30 Oct 2016 - 19:08

C'est juste Parfait!!!
C'est exactement ce que je voulais, et ça marche impeccablement.

Un énorme merci pour votre aide! Il ne me reste plus qu'à travailler tout ça et à relire les codes pour comprendre comment ça marche exactement.

Pleins de poutoux et encore merci!


Isy
Nouveau membre

Messages : 7
Inscrit(e) le : 07/05/2011

http://forumstests.forumgratuit.be/
Isy 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