Login With buttons should look more like buttons

(TheLoneCuber) #1

I think some minor tweaks to the login box could greatly improve the UX.

Currently there is no indication that the social login buttons are buttons at all, especially if you’re using only a single social network (see screenshot below) where the blue Twitter button looks as much like just a label telling you that you can “Log In […] with Twitter”. And partnered with the local Username and Password inputs below, which are not labelled as a separate login at all, the current design can easily be seen as only one Login option where the user enters their Twitter Username and Password, which quickly becomes confusing… becuase they won’t work.

I know folks who are familiar with the Twitter login concept know otherwise, but those who aren’t familiar with it, could be forgiven thinking otherwise.

(Jeff Atwood) #2

This is purely a CSS issue. Is there any reason you have not visited Admin, Customize, Css and specified whatever “buttony” styles you want here?

(TheLoneCuber) #3

“Yes”, there is a reason I haven’t [yet] customised my CSS to be “buttony”: I thought I’d take the time to write my thoughts on how everybody’s Discourse instance could be improved —not just mine— before I do.

This is not “purely a CSS issue”, nor is purely my issue: it applies to every instance of Discourse on the greater Internet. And on every one of those instances there is a login box which, in my opinion, is a bad example of UX: there are two separate logins options that can easily be confused for one, because there is nothing to separate or distinguish between them. Do you think the current login is a good example of UX @codinghorror?

The Local login could/should be labelled accordingly, and/or distinguished between the social logins: one <hr> would help, as would some explanatory text. Login is pretty important part of the forum success and most places that offer multiple login options make it obvious, by way of separation and/or explanation.

(Rida Abou-Haidar) #4

Second it.

I used this plugin to use LDAP and it’s the only authentification system I would like to use other then the native discourse login.

On my current 30 ish users almost everyone of them thought that these are instructions not a button. Yeah there is always the CSS hack but at least a line between the buttons and the fileds with an OR in its center would make the user realize that they are alternative ways of login rather than instructions to use the LDAP credentials.

In my ideal world I would even suggest something ike this.

(Jeff Atwood) #5

Problem there is if you read left to right, now the user/pass has precedence, and should not. I suggest editing your CSS as needed in Admin, Customize to get it how you want.

(Rida Abou-Haidar) #6

I already made an edit to the CSS on my end to suit my needs I just found this topic addresses an existing issue.

From what you are saying Jeff, you would usually expect the precedence to be for external auth logins ?? because when the external ones are on top in the top/bottom design (current design) that’s what it suggests.

It’s probably only our use-case but, for example, we want new users to create accounts but our internal users (those who are more familiar with discourse) to login with LDAP. So yeah I guess we do want the precedence to be on user/pass login.

anyways I think the key elements I wanted to show are:

  • The clear line in the middle with an “OR” clarifying alternative choices
  • The message “Log in with Discourse” that reinforces that it is NOT and LDAP or google or facebook login

Honestly you can invert the position of the user/pass and login buttons top/bottom or left/and right to wherever you think the precedence should be… but just these two points above are sufficient to avoid the users getting confused (who am I kidding the users will always find something to confuse them… but we do our best !)


(Daniela) #7

That would be enough for your needs?

You can edit the CSS below (I do not know your changes without having the link) and adapt it to your site customization

.modal-header h3::after {
    content: " via social media";

#login-form::before, .modal-body::before {
    content: "Or log in with Discourse";
    font-size: 1.429em;
    font-weight: bold;

#login-form table {
    margin-top: 10px;

(Rida Abou-Haidar) #8

thank you @trash, yeah I have something implemented in my CSS along these lines

Seems to be solving the issue for the moment

(Christoph) #9

For copy’n’pasters: There is a } missing for #login-form::before

But apart from that, is it intentional that the CSS doesn’t actually produce what is shown in the image above it?

(Daniela) #10


Do you mean the phrase “via social media” instead of “with social media”?
It is not intentional, I probably changed the sentence after making the screenshot and I did not notice.

EDIT : oh I understand what you mean, one of the classes has changed and it does not work anymore. I have updated the CSS above, thanks.

(Christoph) #11

Thanks! The new CSS works fine on the login page, but not on the sign-up page:

(Daniela) #12


#login-form::before {
    content: "Or log in with Discourse";
    font-size: 1.429em;
    font-weight: bold;


#login-form::before, .modal-body::before {
    content: "Or log in with Discourse";
    font-size: 1.429em;
    font-weight: bold;

I will update the code in the previous post too

(Kane York) #13

Isn’t that going to apply to every modal dialogue on the site

(Daniela) #14
    .create-account, .login-modal { 
        .modal-header h3::after {
        content: " via social media";}

    #login-form::before, .create-account form::before {
        content: "Or log in with Discourse";
        font-size: 1.429em;
        font-weight: bold;

    #login-form, .create-account form { 
        table {
        margin-top: 10px;}

In this way it should be much more precise, even if I had already checked some (but not all) modals on the site and were not affected by the previous code.
It is always better to do things well than approximate, thanks to the warning @riking!