Personnaliser la disposition de la page d'inscription

Soutien
1

Is there a way to modify the layout of the signup page? More precisely, I would need to make the left column a good bit wider to make space for some custom field labels:

image.png736×599 22.3 KB

2

Edit the CSS in Admin, Customize as needed

3

This CSS mod seems to work:

.create-account .user-field label {
    width: 190px
}

.create-account .user-field .controls {
    margin-left: 200px
}

Mobile is a bit more tricky but at least on High Resolution screens, this seems to work without adjusting the width of the actual field/combobox:

.create-account .user-field label {
    width: 140px
}

.create-account .user-field .controls {
    margin-left: 140px
}
4

Salut @tophee,
Je me demandais comment tu fais pour avoir le titre du champ dans la première colonne et le champ court + la description dans la deuxième colonne ?
Sur mon site, cela ressemble actuellement à ceci :

image
image887×540 23.7 KB

Cela prend inutilement beaucoup d’espace et les champs larges ne sont pas très esthétiques.
J’ai essayé de jouer avec display: flex, mais je n’ai pas réussi à obtenir quoi que ce soit ; mes compétences en CSS sont encore assez basiques pour l’instant. Toute aide serait appréciée.

5

Désolé, j’ai fait cela il y a des années et je ne me souviens plus comment, sauf ce qui est documenté ici.

Je ne suis pas sûr, mais je peux imaginer trois explications aux différences entre votre capture d’écran et la mienne :

  1. Le CSS par défaut a changé depuis 2017.
  2. La mise en page est différente si vous utilisez des champs personnalisés pour les utilisateurs (comme je l’ai fait à l’époque).
  3. Je l’ai modifié, mais je ne me souviens pas l’avoir fait ni comment.
6

Merci pour ta réponse rapide. J’ai également inclus des champs personnalisés, donc le point 2. ne devrait pas être le problème. Je suppose que le CSS par défaut a changé depuis.
J’ai créé un composant de thème et ajouté du CSS pour le bureau, et j’ai réussi à faire fonctionner le tout (après seulement quelques heures :sweat_smile:). Le résultat ressemble plus ou moins à ce que je voulais (voir la capture d’écran).

image
image888×660 36.3 KB

Je partagerai peut-être le code plus tard, une fois que je l’aurai nettoyé et compris quelles parties sont réellement nécessaires, ainsi que la manière d’aligner correctement les éléments.

7

Tu n’es pas seul(e) :upside_down_face: