Problème de séparation des champs profil dans Profil_view_body

[Invité]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : tous
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : En réalité, ça n'a jamais marché xDD
Lien du forum : https://arknights-rpg.forumsrpg.com/u1

Description du problème

Bonjour à tous !
Je viens vers vous car j'aurais besoin d'un petit coup de main, s'il vous plait !

Je suis en train de construire mon forum rpg, je suis administratrice-fondatrice et mon forum est en ModernBB. Actuellement, je travaille sur le profil des membres (profil_view_body), afin qu'il ressemble à ceci:

image de référence:

Pour cela, j'ai commencé à modifier le template concerné. Jusque-là je n'ai rencontré aucun problème pour personnaliser le profil (la feuille de personnage est OK, le fond est OK, la disposition en colonnes transparente est OK). Cependant, je me suis heurtée à un mur pour mes champs profils (contenus dans la balise {profile_field.CONTENT}), que je n'arrive pas à modifier séparément. Ma colonne de gauche avec la feuille de personnage et je rang correspondent à ce que je voulais ; mais ma colonne de droite contenant les champs profil ne va pas du tout ! Pour pouvoir placer chaque champs séparément comme je le veux, j'ai essayé d'utiliser nth-child dans le sélecteur css qui correspond à la div qui englobe cette fameuse balise contenant le profil : mais voilà, ça ne fonctionne pas. Pourtant cette astuce avait parfaitement fonctionné quand j'ai modifié de la même manière (=avec le nth-child, et modifié un à un les champs profil) le profil dans les messages via mon viewtopic_body !

-> lorsque je modifie le nth-child, toute la balise {profile_field.CONTENT} se modifie, je ne peux pas séparer et disposer les champs profil comme je le voudrais. Comment faire pour pourvoir modifier/personnaliser séparément les champs profils contenus dans cette balise?

screenshot du résultat/problème (problème entouré en bleu):

Je vous joins en hide mon template modifié (le css y est inclu) :



Je n'ai malheureusement trouvé aucune solution qui marche dans les sujets abordant l'isolation des champs profils (la plupart d'entre eux concernant surtout le viewtopic_body, chose qui ne me concerne pas). Je n'ai également pas trouvé de tuto/solution sur internet, donc je m'en remets totalement à vous.

Merci à ceux et celles qui pourront m'aider !
Des bisous !

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif



Le profil avancé est il activé sur votre forum ?

[Toryudo]

Bonjour !

Votre template/css est en hide, je n'ai pas pu y avoir accès sans poster, mais je voulais faire une analyse avant de regarder le code en détail.
L'utilisation des :first-child, :nth-child est un peu compliqué, j'ai également du mal à m'y retrouver parfois. Quand vous écrivez la chose suivante :

Code:

.prfldisp div:first-child {
    position: absolute;
}

Je pense que vous pensez sélectionner le premier <div> présent dans le .prfldisp... mais en fait, vous sélectionnez plus que ça. Vous prenez en effet le premier <div>... mais également les premiers <div> de chaque sous <div>... donc finalement, tous les <div class="field_uneditable">. Vous aurez beau remplacer :first-child par :nth-child(1), ce sera la même chose, vous sélectionnerez à chaque fois tous les premiers sous <div> du <div> conteneur.

Ce que vous voulez faire, si j'ai bien compris, c'est sélectionner le sous div directement... et dans ce cas, vous pourrez mettre :

Code:

.prfldisp div:first-child div {
    position: absolute;
}

Là, on apporte la précision du sous <div>, il ne peut plus en sélectionner plusieurs.
Du coup, en précisant le :nth-child à la place, vous devriez pouvoir sélectionner le <div> qui vous intéresse. Par exemple, si je ne veux bouger que l'image triangulaire RHODES ISLAND, en lui ajoutant un left et un top par exemple, voilà le code que je mettrai :

Code:

.prfldisp div:nth-child(2) div {
    position: absolute;
    top: -20px;
    left: 30px;
}

Les autres champs ne bougeront pas.
Voilà comment vous devriez pouvoir vous débrouiller !

[Invité]

Bonsoir Neptunia et Toryudo ! Déjà un grand merci d'avoir répondu si vite !

>> Neptunia : j'avais effectivement oublié de le préciser, mais le profil avancé n'est pas activé ! Sinon je ne pouvais rien modifier, mais merci d'avoir demander peut-être que d'autres personnes auront ce problème ! ^^

>> Toryudo : Oui c'est exactement ça ! Je viens de tester ta solution et ça marche parfaitement !!!! ToT Mille mercis, vraiment ! Tes explications m'ont aussi beaucoup aidée, je me ferai pas avoir 2 fois

Merci je vais pouvoir continuer le profil de mon forum ! Je file afficher le sujet résolu