# Normalize Input Styling across the app

**URL:** https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440
**Category:** UX
**Created:** [November 2, 2017, 2:04am UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440 "2017-11-02T02:04:37Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 2, 2017, 2:04am UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/1 "2017-11-02T02:04:37Z")

</div>

This has always driven me nuts, but we should fix it with the new composer here.

We have 4 different styles going:

Topic title uses, inset:

![image](https://global.discourse-cdn.com/meta/original/3X/4/0/40c061198d7c9f0e4bf1034e46a22dea5bc2ea48.png)

Topic body uses, nothing, and no rounded corners:

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/8404fcd8658d11670b5f6774b0708859af07e6fe.png)

Topic category uses nothing and rounded corners:

![image](https://global.discourse-cdn.com/meta/original/3X/e/f/ef08a311cb65b759ed830b411d998fba7d98c35a.png)

Topic tags uses, border and square corners

![image](https://global.discourse-cdn.com/meta/original/3X/a/b/abf5f010da29759960ba31376a54f8d44d7a6138.png)

We got to do something about this.

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/f/0f3e2655956a48cdc8513e26323f0ff3910ac59f.jpg)

---

<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: [November 3, 2017, 8:44pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/2 "2017-11-03T20:44:02Z")

</div>

I agree with this, but I think it’s a good opportunity to make all inputs consistent across Discourse; otherwise I’m just adding overrides at the composer level.

I don’t think it would be very difficult. I’d suggest removing shadows and rounded corners, and adding a border and background color everywhere. That would ensure all inputs are always visible because of either the border or the background color, and then shadows and rounded corners are theme-level additions.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 5, 2017, 5:38am UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/3 "2017-11-05T05:38:44Z")

</div>

> [@awesomerobot](#):
>
> I’d suggest removing shadows and rounded corners, and adding a border and background color everywhere.

Agree, this makes sense, minimizing the amount of styling going on the default theme makes it way easier to theme Discourse.

Perhaps have a look at this once you are done with the composer.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [November 22, 2017, 9:06pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/4 "2017-11-22T21:06:07Z")

</div>

This is the advanced search with the new consistent style:

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/2/82769f380a0171021093a6723c74fca33e33ce72.png)

This is how it used to look:

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/0/b0f7c994f186e4ff1afe80d41cc651ce2b2168aa.png)

Not sure why, but I don’t like the new look - perhaps it’s the darker border lines.

Side note @j.jaffeux, the datepicker is not aligned.

---

<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: [November 22, 2017, 10:17pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/5 "2017-11-22T22:17:10Z")

</div>

I think the new consistency looks great, personally!

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [November 22, 2017, 10:50pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/6 "2017-11-22T22:50:05Z")

</div>

I think the darker outlines make it more obvious that the layout of other fields could be made more pleasing. For instance, it’s more clear now that the category dropdown sticks out on the right.

Maybe there is an opportunity here to improve this page at some point?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 27, 2017, 2:59am UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/7 "2017-11-27T02:59:32Z")

</div>

@awesomerobot @j.jaffeux just noticed a 1px diff here: (reply is one px shorter than reply controls on mobile)

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/b/3bbedcdc3054d4937671b09cd52b0f07b0dfb630.png)

Its not enough to yell OH NO disasta pasta, but, you know, I have problems so I am just spreading my OCD around.

---

<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: [November 27, 2017, 10:03pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/8 "2017-11-27T22:03:12Z")

</div>

aghhh where is this 1px coming from

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [November 27, 2017, 10:08pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/9 "2017-11-27T22:08:31Z")

</div>

Noticed another inconsistency - editing a topic title, category, and tags.

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/3/838cca726c504c9223657f56bf9231ef9016e922.png)

Category chooser is shorter than title and tags field, category chooser is closer to tags than to the title, and tags has what looks to be two borders.

Edit: wait a sec…looks like tags is still using `select2` not the new `select-kit`. Is that intentional @j.jaffeux?

Edit 2: Nevermind then @awesomerobot - I’ll check this again once Joffrey is finished.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [November 27, 2017, 10:19pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/10 "2017-11-27T22:19:27Z")

</div>

yes it’s not done yet, I’m working on {{tag-chooser}} but it’s quite a challenging one, the tag/group chooser are the last before I can remove select2.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 30, 2017, 5:37am UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/11 "2017-11-30T05:37:25Z")

</div>

This regressed due to the new styles

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/2/f2e373d0fdc21dbf75dcffec8009dc711c5e135e.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: [December 4, 2017, 8:31pm UTC](https://meta.discourse.org/t/normalize-input-styling-across-the-app/73440/12 "2017-12-04T20:31:26Z")

</div>

This was bothering me so I didn’t wait for the tag input update; just pushed an update that should make the layout for editing titles match the new composer

 ![15 PM](https://global.discourse-cdn.com/meta/original/3X/2/1/21c07c3775d80bb109560ef64a9782ee316a485a.png)

Also pushed a fix for the horizontal scrollbar on the category modal
