Anpassen des Layouts der Anmeldeseite

Unterstützung
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

Hallo @tophee,
ich habe mich gefragt, wie du es schaffst, den Feldtitel in der ersten Spalte und das kurze Feld mit der Beschreibung in der zweiten Spalte anzuzeigen?
Auf meiner Seite sieht es derzeit so aus:

image
image887×540 23.7 KB

Das nimmt einfach unnötig viel Platz in Anspruch und die breiten Felder sehen nicht besonders gut aus.
Ich habe versucht, mit display: flex herumzuspielen, aber es ist mir nicht gelungen, etwas zu erreichen. Meine CSS-Kenntnisse sind bisher eher grundlegend. Jede Hilfe wäre willkommen.

5

Entschuldigung, ich habe das vor Jahren gemacht und habe keine Erinnerung mehr daran, wie ich es gemacht habe, außer was hier dokumentiert ist.

Ich bin mir nicht sicher, aber ich kann mir drei Erklärungen für die Unterschiede zwischen meinem und deinem Screenshot vorstellen:

  1. Das Standard-CSS hat sich seit 2017 geändert.
  2. Das Layout ist anders, wenn du benutzerdefinierte Felder verwendest (wie ich damals).
  3. Ich habe es geändert, erinnere mich aber nicht daran, dass ich es getan habe oder wie ich es gemacht habe.
6

Danke für die schnelle Antwort. Ich habe auch benutzerdefinierte Felder integriert, also sollte Punkt 2. nicht das Problem sein. Ich vermute, das Standard-CSS hat sich seitdem geändert.

Ich habe eine Theme-Komponente erstellt und etwas CSS für den Desktop hinzugefügt. Nach nur wenigen Stunden (:sweat_smile:) habe ich es geschafft, dass es funktioniert, und es sieht mehr oder weniger so aus, wie ich es möchte (siehe Screenshot).

image
image888×660 36.3 KB

Ich werde den Code später teilen, nachdem ich ihn bereinigt habe und verstanden habe, welche Teile ich tatsächlich brauche und wie ich die Elemente richtig ausrichten kann.

7

Du bist nicht allein :upside_down_face: