Impossible de modifier les liens du profil utilisateur

[Jarvis24]

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
Problème apparu depuis : Depuis toujours
Lien du forum : https://marveldimensions.forumactif.com/

Description du problème

Bonjour,
Petite modification du post : j'ai réussi à faire quelques changements dans le profil mais certains problèmes persistent.
J'essaye de changer l'apparence de certains éléments de la page du profil d'utilisateur sur mon forum dans le template profile_view_body.

Le problème c'est que les liens informations - préférences - signature - avatar - amis et ignorés - membres suivis - notifications - sujets surveillés -favoris sont en blanc mais qu'il est impossible de les modifier sans que cela touche aux liens de la navigation en haut de mon forum (a.mainmenu) puisqu'ils sont rattachés à la même classe.

J'ai essayé de cibler précisément dans le CSS form[action="/profile"] mais cela ne marche toujours pas.

Code:

  form[action="/profile"] a.mainmenu {
  color: black;
}

Le sélecteur form[action="profile"] ne semble pas fonctionner.

J'aimerais également retirer le champ Export de données situé tout en bas.

Franchement, je suis sûr que c'est tout bête mais si vous pouviez juste me donner le tips qui fait que ça fonctionne, je vous en serais très reconnaissant !

Merci d'avance  

[Toryudo]

Bonjour !

Pour ces liens, ça va être un peu plus compliqué dans phpbb2.
Il n'y a pas de Template pour modifier les profils avancés, profile_view_body ne permet que de modifier les profils en version simple.
Donc effectivement, si vous touchez a.mainmenu directement, vous allez toucher beaucoup d'éléments en même temps !

Pour modifier les liens, vous allez devoir ajouter un JavaScript dans un premier temps, à placer "Sur toutes les pages" :

Code:

$(function(){
  if (window.location.pathname.startsWith('/u')){
    $('a.mainmenu[href*="/u"').closest('td').find('.gen').addClass('profil-menu-links');
  }
});

On ajoute donc la class .profil-menu-links sur tous les liens.
Et ensuite, il n'y a plus qu'à modifier la couleur de ces liens, comme ceci par exemple :

Code:

.gen.profil-menu-links a, .gen.profil-menu-links strong {
  color: #000;
}

[Jarvis24]

Bonjour, merci pour votre réponse.

En fait cela fonctionne, mais le lien devient blanc lorsque je clique dessus :

Code:

a[href="/profile?mode=editprofile&page_profil=informations"] .gen.profil-menu-links a,
a[href="/profile?mode=editprofile&page_profil=informations"] .gen.profil-menu-links strong,
a.mainmenu[href*="/profile?mode=editprofile&page_profil=informations"] {
  color: black;

[Jarvis24]

Up !

['Christa]

Salut !

En vrai, avec l'avancement du CSS de nos jours, on peut se passer de javascript pour cette partie.

Si on parle bien de la page d'édition du profil (et pas la page de profil d'un membre), on peut utiliser la pseudo-classe :has() pour tenter de sélectionner précisément la cellule de tableau qui contient les liens de navigation. C'est compliqué, parce contrairement à toutes les autres versions de FA (faut utiliser modernBB c'est mieux), on n'a pas de super identifiant qui englobe tous les liens de cette zone et ça complique tout.
Du coup, après tests, j'ai conclu qu'on peut à peu près correctement cibler cette cellule spécifiquement en vérifiant :
- Qu'elle contient des liens d'édition du profil, avec :has([href^="/profile?mode=editprofile"])
- Que ses enfants directs sont au moins trois span.gen consécutifs, avec :has(>span.gen+span.gen+span.gen) (parce que sinon, comme phpbb2 est bourré de cellules de tableau, en choisir une qui contient un lien vers le profil va juste sélectionner TOUTE la cellule qui contient le forum XD). Trois parce qu'on n'est jamais trop prudents.
Tout ça nous donne cet horrible (mais efficace) sélecteur : td:has(>span.gen+span.gen+span.gen):has([href^="/profile?mode=editprofile"])

Après quoi, on a plusieurs cas de figure :

- Par défaut, tous les éléments de ce tableau ont une classe gen, ce qui permet de donner par exemple une police d'écriture commune, un fond coloré, etc. Pour ça, tu utilises cette règle :

Code:

td:has(>span.gen+span.gen+span.gen):has([href^="/profile?mode=editprofile"]) .gen {
   /* ciblera tous les éléments avec la classe .gen dans la table qui précède le formulaire */
}

- Les liens, cependant, ont une classe mainmenu ce qui fait que leurs réglages l'emportent sur les propriétés qu'on aura appliquées à la classe [font=code-in-line]gen[font]. Du coup il faut définir leurs caractéristiques avec cette règle :

Code:

td:has(>span.gen+span.gen+span.gen):has([href^="/profile?mode=editprofile"]) a.mainmenu {
   /* ciblera tous les liens avec la classe .mainmenu dans la table qui précède le formulaire */
}

- Il est possible que tu veuilles appliquer des effets qui ont tendance à partir en vrille si tu ne cibles qu'un seul des deux, et dans ce cas on va juste faire un sélecteur qui cible les deux à la fois :

Code:

td:has(>span.gen+span.gen+span.gen):has([href^="/profile?mode=editprofile"]) :where(.gen, a.mainmenu) {
   /* ciblera tous les éléments avec la classe .gen ET les liens avec la classe .mainmenu */
}

Comme on essaie d'avoir une distinction visuelle entre l'onglet actif (sans lien) et les autres onglets, mieux vaut réserver ce dernier sélecteur aux propriétés qui sont communes aux deux quoi qu'il arrive (genre la couleur du texte)

Pour le reste, c'est une question de gérer les effets de survol, etc, avec a.mainmenu:hover et compagnie !

[Jarvis24]

Hello !

Oui, effectivement, en codant mon forum je me rend compte que tous ces <td> sont des véritables casse-têtes, d'autant plus que certaines parties n'ont effectivement pas de dénomination particulières. Je débute en codage et c'est bien galère, mais là j'avoue que tu m'a sauvé la vie avec ton astuce !

Je connaissais pas du tout :has... Du coup, parce que j'aime bien aussi me casser la tête, je vais essayer de reprendre ton astuce pour l'appliquer à la partie profil d'un membre.

Un grand merci !