Customise Sign-up form design

Product Support

AI-generated summary

mattdamod asks how to customize the design of the default sign-up form in Discourse, wanting to change the background color and add a community avatar image. Canapin responds that the background can be modified using CSS in the theme customization settings, and that HTML changes require overriding the signup modal template. They suggest CSS may be sufficient for the requested changes. mattdamod thanks them and acknowledges being a beginner, planning to test solutions in a sandbox.

1

Hey everyone!

I have been hunting high and low for some topic on this, I can’t find anything so please redirect me to any appropriate resource if it exists.

I am using the standard sign-up form that comes with Discourse, however, I can’t seem to figure a way of changing the design. I’m totally happy with the content fields, it’s just the look I’m bothered about.

Essentially, I want to make the background one of our brand colours and maybe even include a PNG of one of the avatars we use in our community.

Something like this (done in Photoshop):

image
image560×390 39.2 KB

If anyone can give me a push with this, that’d be great!

Thanks in advance :slight_smile:

2

You can change the background by adding CSS. Admin → Customize, select your theme or create a new the component → edit HTML/CSS → CSS tab.

If you want to modify the HTML code, you need to override the signup modal template. More info here: Developing Discourse Themes & Theme Components

Depending of where you want to add your image, I think all your modifications can be done via CSS only.

3

Thanks for your response :slight_smile:

I’m a bit of a noob so will have to play in my sandbox to find the best solution for me :slight_smile: