自定义注册页面布局

支持
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

你好 @tophee，
我想知道，你是如何让字段标题位于第一列，而简短字段和描述位于第二列的？
在我的网站上，目前看起来是这样的：

image
image887×540 23.7 KB

这占据了不必要的空间，而且宽字段看起来不太美观。
我尝试过使用 display: flex，但未能取得任何效果，目前我的 CSS 技能还比较基础。任何帮助都将不胜感激。

5

抱歉，这是我多年前做的，除了这里记录的内容外，我完全不记得当时是怎么做的。

我不太确定，但能想到我的截图和您的截图存在差异的三个原因：

  1. 自 2017 年以来，默认 CSS 已更改。
  2. 如果您使用了自定义用户字段（就像我当时做的那样），布局会有所不同。
  3. 我可能修改过，但已经不记得是否做过以及是如何做的。
6

感谢您的快速回复。我也包含了自定义字段，所以问题 2 应该不是原因。我猜默认 CSS 可能从那以后发生了变化。

我创建了一个主题组件，并为桌面端添加了一些 CSS，经过几个小时的折腾（：sweat_smile:）终于让它运行起来了，效果也大致符合我的预期（见截图）。

image
image888×660 36.3 KB

稍后我可能会在清理代码、明确哪些部分真正需要以及如何正确对齐元素之后，分享这段代码。

7

你并不孤单 :upside_down_face: