Adding designs to pages

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’?

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

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.

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

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.

So you want artistic backgrounds in general?

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:

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;
}

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;
}

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 Banner themes (and instructions for customizing them) — there’s an example there that helps you create a collapsable banner. Dismissing the banner entirely wouldn’t be a vastly different process.

13 Likes

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?

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

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

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

2 Likes

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