Adding designs to pages

Support
1

Hi, I was wondering how I can design a homepage with a quick one-time introduction page that can be closed out? Or even customize a login/signup box similar to Reddits’?

Capture48
Capture48.PNG1104×831 191 KB

2

Why don’t you just use Reddit? Might save you some time.

3

I actually grew accustom with tags and I’m simply asking how to add designs to pages. Many mainstream sites have this nice visual touch.

4

Customization is done by writing themes. In the Admin :arrow_right: Customize :arrow_right: Themes you can edit the CSS / HTML associated with a theme to add your own customized touches. Since you can inject your own JavaScript into Discourse app using themes, the possibilities are literally endless.

You can also make custom color schemes from within the GUI. That’s a lot easier than mashup web programming, though not as powerful.

The closable one-time introduction is done by making a banner topic.

5 Likes
5

Here’s another example from Discord. Don’t worry, I’m not gonna go use Discord. The point is to give an idea of what I’m talking about.

Capture50
Capture50.jpg1920×947 310 KB

6

So you want artistic backgrounds in general?

7

In certain scenarios:

  1. One-time pop-up page (not banner topic) on the homepage. (ex: on Tumblr)
  2. Around the sign-up/login area when clicked on (ex: on Reddit & Discord), around here:

Capture51
Capture51.PNG892×914 85.1 KB

8

You can customize modals visually with CSS.

For example

.d-modal.login-modal {
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/96/Ambrosius_Bosschaert_the_Elder_%28Dutch_-_Flower_Still_Life_-_Google_Art_Project.jpg) 0% 0% / contain;
}

47%20PM
47%20PM2448×1886 1.58 MB

or

.login-modal.in .modal-inner-container {
    background: url(https://vignette.wikia.nocookie.net/mrmen/images/b/b7/MMS_MrTall_ca03-1-.jpg/revision/latest?cb=20101106151544);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    padding-left: 140px;
}

05%20PM
05%20PM1710×1176 218 KB

This isn’t functionality that comes with Discourse, so this would require a plugin or theme. There are some similar howto topics that could help, like https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368 — there’s an example there that helps you create a collapsable banner. Dismissing the banner entirely wouldn’t be a vastly different process.

15 Likes
9

That’s amazing! Thank you so much! Just one question, how do you make the background image show up when you try to sign up, too, not just logging in?

10 
// Login
.d-modal.login-modal {
    // CSS here
}

// Create
.d-modal.create-account {
    // CSS here
}
9 Likes
11

@awesomerobot You’re by definition a God, sir.

2 Likes
12

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