# Adding designs to pages

**URL:** https://meta.discourse.org/t/adding-designs-to-pages/90264
**Category:** Support
**Created:** [June 19, 2018, 11:48pm UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264 "2018-06-19T23:48:33Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 19, 2018, 11:48pm UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/1 "2018-06-19T23:48:33Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/0/6/063f529149056d73f40f0d1815c18928fd299f07.PNG)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 19, 2018, 11:58pm UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/2 "2018-06-19T23:58:58Z")

</div>

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

> **[6 Best Open Source Reddit Alternatives You Must Visit](https://fossbytes.com/best-open-source-reddit-alternatives-free/)**
>
> We've decided to prepare a list of some free and open source Reddit alternatives that you can give it a try. Some of these sites like Reddit aren't much popular, but it thought it's a good time to spread the world and tell you about these options.

---

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 20, 2018, 12:01am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/3 "2018-06-20T00:01:52Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [June 20, 2018, 12:18am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/4 "2018-06-20T00:18:58Z")

</div>

Customization is done by writing #themes. In the Admin ➡ Customize ➡ 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](https://meta.discourse.org/t/new-banner-topic-pin-type/16458).

---

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 20, 2018, 12:28am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/5 "2018-06-20T00:28:20Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/5/2/52122c56ee1a054ff7c6b0daddef68a1afcf21a6.jpg)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 20, 2018, 12:59am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/6 "2018-06-20T00:59:44Z")

</div>

So you want artistic backgrounds in general?

---

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 20, 2018, 1:29am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/7 "2018-06-20T01:29:26Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/1/3/134504c5a40224a92e097b6c41e89d1e640ff569.PNG)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 20, 2018, 1:46am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/8 "2018-06-20T01:46:26Z")

</div>

You can customize modals visually with CSS.

For example

```CSS
.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](https://global.discourse-cdn.com/meta/original/3X/8/e/8e1409bd30e18ddac01661841e54902316526aa4.jpg)

or

```CSS
.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](https://global.discourse-cdn.com/meta/original/3X/c/a/caede0857c6038f7928da15e7e26aa199e163434.jpg)

> [@Blinq](#):
>
> Hi, I was wondering how I can design a homepage with a quick one-time introduction page that can be closed out?

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](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.

---

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 20, 2018, 3:11am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/9 "2018-06-20T03:11:40Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 20, 2018, 3:34am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/10 "2018-06-20T03:34:18Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [June 20, 2018, 4:47am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/11 "2018-06-20T04:47:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [July 20, 2018, 4:47am UTC](https://meta.discourse.org/t/adding-designs-to-pages/90264/12 "2018-07-20T04:47:18Z")

</div>

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