Customize signup page layout

[tophee (Christoph)]

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:

[codinghorror (Jeff Atwood)]

Edit the CSS in Admin, Customize as needed

[tophee (Christoph)]

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
}

[SHilser (Stefan Hilser)]

Hi @tophee,
I was wondering, how you manage to have the field title in the first column and the short field + descritption in the second column?
On my site it currently looks like this:

This just takes up unncessecary amount of space and the wide fields don’t look very nice.
I’ve tried to play around with display: flex, but didn’t manage to achieve anything, my CSS skills are pretty basic so far. Any help would be appreciated.

[tophee (Christoph)]

Sorry, I did this years ago and have no memory of how I did it except for what’s documented here.

I’m not sure but I can think of three explanations for the differences in my and your screenshot:

1. The default CSS has changed since 2017
2. The layout is different if you use custom user fields (like I did at the time)
3. I changed it but don’t remember that I did or how I did it.

[SHilser (Stefan Hilser)]

Thanks for the quick reply, I also have custom fields included, so 2. shouldn’t be the issue. I guess the default CSS may have changed since then.
I created a theme component and added some CSS for the desktop and managed to get it to work (after only a few hours ) and it looks more or less the way I want it (see screenshot).

I might share the code at a later point after cleaning it up and understanding which parts I actually need and how to align things properly.

[tophee (Christoph)]

@SHilser

after only a few hours

You’re not alone