# Is there a "compact" option like gmail?

**URL:** https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263
**Category:** UX
**Created:** [12월 17, 2017, 4:46오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263 "2017-12-17T16:46:37Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 17, 2017, 4:46오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/1 "2017-12-17T16:46:38Z")

</div>

Gmail offers a nice option to reduce or increase whitespace:

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

Some of the forum participants on my forum have complained about the whitespace (“too much”)… I’m personally OK with it, but just wanted to know if I was missing an option somewhere.

---

<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: [12월 17, 2017, 9:28오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/2 "2017-12-17T21:28:19Z")

</div>

In Admin → Customize → Themes, you could create a theme that they could pick. There’s not a compact theme in the default set, but you’d do it there.

Then you could pick it in Preferences → Interface → Theme.

---

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 18, 2017, 4:21오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/3 "2017-12-18T16:21:44Z")

</div>

Thanks that’s helpful. If anyone has made those CSS changes and wants to share, it’d be appreciated. Given the variety of user preferences when it comes to whitespace, I think a default compact theme option would be desirable.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12월 18, 2017, 10:15오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/4 "2017-12-18T22:15:07Z")

</div>

It would help if you specify what you’re trying to reduce exactly. Are we just talking about the white space between topics in the topic list? You can change the default view, or this:

 ![default discourse view](https://global.discourse-cdn.com/meta/original/3X/f/d/fd7715826ecbf00f4493617dcaa4d8478548595b.PNG)

to this:

 ![compact discourse view](https://global.discourse-cdn.com/meta/original/3X/7/a/7a52e6620d4ad1cb58a255523dcefeab8bef5dae.PNG)

By adding this CSS

```plaintext
.topic-list td {
    padding: 2px 5px;
}

```

and see if that gets you closer to what you want. If so, you can make that into a selectable theme as @notriddle pointed out above.

If that’s too compact for your taste you can increase the first number to add more white space.

the default is `12px 5px`

---

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 21, 2017, 3:58오전 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/5 "2017-12-21T03:58:39Z")

</div>

Thanks for the reply. Very helpful. I will look at making this an option for users. As an aside, I wish there was a way to fork a theme and just make a slight modification rather than having to copy changes to the CSS across themes to maintain some minor theming difference like the code you supplied above. It would be nice if the initial fork could stay synced with the parent theme and any minor changes could be auto-merged into any changes in the parent, etc.

> [@lll](#):
>
> Are we just talking about the white space between topics in the topic list?

Here’s what one of the users posted on my forum:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/4/1422d50ae7cfa5471a28719c484516f1407f00ec.jpg)

---

<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: [12월 21, 2017, 4:23오전 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/6 "2017-12-21T04:23:13Z")

</div>

> [@abrambailey](#):
>
> , I wish there was a way to fork a theme and just make a slight modification rather than having to copy changes to the CSS across themes to maintain some minor theming difference like the code you supplied above.

Already exists:

1. Create theme, amend CSS to “original”
2. Add theme component to theme, add your modifications there

---

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 21, 2017, 4:43오전 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/7 "2017-12-21T04:43:13Z")

</div>

Oh awesome, thanks @sam. I obviously missed something there 😉

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [12월 21, 2017, 5:23오전 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/8 "2017-12-21T05:23:26Z")

</div>

This about as far as I could reduce white space without overly interrupting the feel of Discourse.

**Cozy (default) topic view:**

 ![cozy topic view with default white space](https://global.discourse-cdn.com/meta/original/3X/d/5/d54e5b66e956a386be5c931f882ecd6f883906bd.PNG)

**Compact topic view:**

 ![compact topic view with reduced white space](https://global.discourse-cdn.com/meta/original/3X/4/3/433d86af28e6a86da2420fea384aefd23a546dbc.PNG)

And this is what I ended up with:

```plaintext
.topic-body {
	padding: 7px 11px;
}

.post-menu-area {
	margin-top: 0;
}

.timeline-container {
	margin-left: 637px;
}

@media (min-width: 1250px) {
	.timeline-container {
		margin-left: 770px;
	}
}

@media (min-width: 1140px) {
	.timeline-container {
		margin-left: 700px;
	}
}

```

There’s more white space that can be reduced but it’s a matter of personal preference at that point.

However…

* * *

## For reference only.

Here’s the **extra compact** CSS for reference if that’s what you really like.

 ![extra-compact](https://global.discourse-cdn.com/meta/original/3X/1/b/1b511ed4a8b045c3626dc26edf3a4aa072583dbf.PNG)

```plaintext
.topic-body {
	padding: 5px 11px;
}

.post-menu-area {
	margin-top: 0;
	margin-bottom: 0;
}

.timeline-container {
	margin-left: 637px;
}

#suggested-topics {
	padding-top: 0;
}

.topic-status-info {
	padding: 5px 0px;
}

@media (min-width: 1250px) {
	.timeline-container {
		margin-left: 770px;
	}
}

@media (min-width: 1140px) {
	.timeline-container {
		margin-left: 700px;
	}
}

```

My opinion is this needs additional visual ques. Reducing the white space by this much creates a need for color shading to assist readability.

---

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 21, 2017, 2:41오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/9 "2017-12-21T14:41:03Z")

</div>

@lll Thanks so much for taking the time to post this. I will add it to our site and give people the option to use it. It will be interesting to see how many select the compact theme.

---

<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: [12월 21, 2017, 4:05오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/10 "2017-12-21T16:05:39Z")

</div>

That’s not compact. _ **This** _ is compact:

```css
.topic-body {
	padding: 7px 11px;
}

.post-menu-area {
	margin-top: 0;
}

.topic-meta-data .post-info {
    float: none;
}

.topic-list th, .topic-list td {
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (min-width:900px) {
.topic-meta-data .post-info {
    float: none;
}
.post-menu-area {
    position: absolute !important;
    top: -40px;
    right: 0;
}
.who-liked {
    margin-top: 0;
    padding: 2px;
    background: #fff;
    box-shadow: 0 2px 4px #333;
}
}

```

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

At least to me, it seems like most of the empty space in Discourse is to the left of the post action bar. Hence, a compact theme’s goal is to get rid of that, while still preserving a readable line length.

---

<div class="post-metadata">

### Author: ![abrambailey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/abrambailey/32/119786_2.png) [@abrambailey](https://meta.discourse.org/u/abrambailey)
#### Post date: [12월 21, 2017, 5:51오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/11 "2017-12-21T17:51:17Z")

</div>

The one issue with placing the post-menu-area in the top right absolutely is that when a post is in reply to someone, it will overlap their name.

---

<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: [12월 21, 2017, 11:28오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/12 "2017-12-21T23:28:06Z")

</div>

I agree with @abrambailey it is not recommendable to move the post actions up there.

---

<div class="post-metadata">

### Author: ![Edward\_Hibbert](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edward_hibbert/32/113611_2.png) [@Edward\_Hibbert](https://meta.discourse.org/u/Edward_Hibbert)
#### Post date: [10월 6, 2018, 8:53오후 UTC](https://meta.discourse.org/t/is-there-a-compact-option-like-gmail/76263/13 "2018-10-06T20:53:40Z")

</div>

Just getting going with Discourse. I would also welcome a more compact view, though I’m not yet familiar enough with Discourse to start tweaking the CSS or themes. There’s a lot of white screen up there…
