How to change layout of login screen


We’re using discourse 3.3.0.beta1-dev

Here it is a screenshot of what the connection screen looks like :

Any idea to help me have a better layout for traditional login (cause “Security key” is using too much space) ?

1 Like

Hello, you could manually edit the CSS to change the layout.

1 Like

Maybe this theme component can help:

Or perhaps how to make CSS changes:


I think we can make some changes in core to make this screen look better by default. The translation for this button is a bit long, I made a suggestion upstream to change the label from

  • Connectez-vous à l’aide d’une clé d’accès
  • Se connecter avec une clé d’accès

(That matches the translations for the social links as well)

I think we can make some subtle design changes here as well. There may be other languages with very long social login button labels. cc @jordan-vidrine


Thanks a lot @Lilly , I have customized CSS and then It solve my issue.

@pmusaraj I’m happy to point some stuff to improve.

What a fantastic community, Discourse have !


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.