Customize signup page layout

Product Support

AI-generated summary

A discussion is taking place about customizing the layout of the signup page. tophee initially asked how to make the left column wider to accommodate custom field labels. codinghorror suggested editing the CSS in Admin. tophee then shared some working CSS modifications.

However, SHilser had a different issue where their field titles and descriptions were not aligned properly, and asked for help. tophee couldn’t recall how they achieved their layout, but speculated that the default CSS may have changed. SHilser managed to create a theme component and added CSS to achieve the desired layout.

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

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:

image
image887Ă—540 23.7 KB

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.

5

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.
6

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 :sweat_smile:) and it looks more or less the way I want it (see screenshot).

image
image888Ă—660 36.3 KB

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.

7

You’re not alone :upside_down_face: