# 社交媒体注册选项的放置

**URL:** <https://meta.discourse.org/t/placement-of-social-media-signup-options/91778>\
**Category:** Support\
**Created:** [2018年七月7日 13:45 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778 "2018-07-07T13:45:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Griff\_Wigley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/griff_wigley/32/81899_2.png) [@Griff\_Wigley](https://meta.discourse.org/u/Griff_Wigley)\
**Post date:** [2018年七月7日 13:45 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/1 "2018-07-07T13:45:29Z")

</div>

My site’s registration has quite a few fields for new users to complete. The problem is that the icon/options to register via Facebook, Google, etc. are centered on the right sidebar, far down the page. New users don’t see the options until they scroll further down.

Is there a easy way to place the options at the top?

 ![Discourse%20social%20media%20signup%20options%20sidebar](https://global.discourse-cdn.com/meta/original/3X/b/8/b8571d97bb81e488e295dc7025e18af47e677f99.png)

---

<div class="post-metadata">

**Author:** ![Griff\_Wigley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/griff_wigley/32/81899_2.png) [@Griff\_Wigley](https://meta.discourse.org/u/Griff_Wigley)\
**Post date:** [2018年七月8日 14:08 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/2 "2018-07-08T14:08:56Z")

</div>

I’m bumping this, as I really need to figure it out before I launch.

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2018年七月8日 14:22 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/3 "2018-07-08T14:22:36Z")

</div>

Add this custom CSS to your theme:

```css
.create-account #login-buttons:not(.hidden) {
    justify-content: normal;
}

```

edit : note that if you have an odd number of social logins it will also affect a bit the social login buttons on mobile phone from:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/2/6219d93159c44dc5591afd0c3b332bf2b3783124.png)

To

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/e/6e919757e8bd7879a655dcd9a2a6657ef540dd41.png)

But I see you have two social logins so they won’t be affected.

---

<div class="post-metadata">

**Author:** ![rorycb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rorycb/32/423647_2.png) [@rorycb](https://meta.discourse.org/u/rorycb)\
**Post date:** [2018年七月8日 14:23 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/4 "2018-07-08T14:23:20Z")

</div>

I can point you in the right direction, but I don’t know discourse well enough yet to fully solve your problem.

You can set custom CSS on that column and change it to align to the top.

At a quick look using Inspector #login-buttons is the ID you need to change, maybe:

```
.login-modal #login-buttons:not(.hidden), .create-account #login-buttons:not(.hidden)

```

Looks like changing:

```
justify-content: center;

```

to

```
justify-content: flex-start;

```

would do what you want. Sorry I can’t help more than that, hopefully someone with more experience can get you all the way there.

edit: ha looks like @Canapin beat me to it 🙂  
Rory

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2018年七月8日 14:24 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/5 "2018-07-08T14:24:26Z")

</div>

You don’t want to change `.login-modal #login-buttons:not(.hidden)` as it targets the social login from the login form, not the register form

---

<div class="post-metadata">

**Author:** ![rorycb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rorycb/32/423647_2.png) [@rorycb](https://meta.discourse.org/u/rorycb)\
**Post date:** [2018年七月8日 14:27 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/6 "2018-07-08T14:27:02Z")

</div>

Ah good point @Canapin - I made an assumption that they would want the position to match on both forms, which is potentially incorrect 🙂

---

<div class="post-metadata">

**Author:** ![Griff\_Wigley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/griff_wigley/32/81899_2.png) [@Griff\_Wigley](https://meta.discourse.org/u/Griff_Wigley)\
**Post date:** [2018年七月8日 14:37 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/7 "2018-07-08T14:37:00Z")

</div>

Saaaaweeeet! That did the trick, @Canapin. Thanks so much.

FYI, I’m now using 4 logins:

 ![Discourse%20social%20media%20signup%20options%20fixed](https://global.discourse-cdn.com/meta/original/3X/e/8/e8b05d2a8cf5fc4e3c232f4638b21ffb33f06834.png)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2018年七月9日 03:48 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/8 "2018-07-09T03:48:18Z")

</div>

Hmm we might need to adjust this in our default theme, granted most sites don’t use custom fields at signup, but for those that do @johani?

---

<div class="post-metadata">

**Author:** ![itsbhanusharma](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/itsbhanusharma/32/180717_2.png) [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)\
**Post date:** [2018年七月9日 04:19 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/11 "2018-07-09T04:19:26Z")

</div>

Something like Custom Wizard plugin can also be used to alleviate this in some way?

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2018年七月9日 05:06 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/13 "2018-07-09T05:06:47Z")

</div>

Because this only triggers with a … _rather absurd_ number of user fields, we won’t be modifying the default theme to accommodate it.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2018年七月9日 05:06 UTC](https://meta.discourse.org/t/placement-of-social-media-signup-options/91778/14 "2018-07-09T05:06:50Z")

</div>