Customize signup page 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

こんにちは、@tophee さん。
フィールドのタイトルを最初の列に、短いフィールドと説明を2番目の列に配置する方法について教えていただけますか？
私のサイトでは現在、以下のように表示されています：

image
image887×540 23.7 KB

これでは不要なスペースを占めてしまい、広いフィールドの見た目もあまり良くありません。
display: flex を試してみましたが、うまくいかず、私の CSS のスキルはまだ初級レベルです。ご協力いただければ幸いです。

5

申し訳ありませんが、これは数年前に行ったもので、ここにあるドキュメント以外の記憶はありません。

確実ではありませんが、私のスクリーンショットとあなたのスクリーンショットの違いについて、以下の3つの可能性が考えられます。

  1. 2017 年以降にデフォルトの CSS が変更された
  2. カスタムユーザーフィールドを使用している場合（当時私がそうだったように）、レイアウトが異なる
  3. 変更したが、その事実や方法を覚えていない
6

素早い返信ありがとうございます。カスタムフィールドも含まれているので、2. は問題ではないはずです。おそらく、その後デフォルトの CSS が変更されたのでしょう。
テーマコンポーネントを作成し、デスクトップ用の CSS を追加して、何とか動作させることができました（わずか数時間かかりましたが :sweat_smile:）。希望に近い見た目になりました（スクリーンショット参照）。

image
image888×660 36.3 KB

後ほど、コードを整理し、実際に必要な部分や適切な配置方法を理解した上で共有するかもしれません。

7

あなただけではありません :upside_down_face: