# Sam's Simple Theme

**URL:** https://meta.discourse.org/t/sams-simple-theme/23552
**Category:** Theme
**Tags:** official, sams-simple-theme
**Created:** [December 31, 2014, 3:20am UTC](https://meta.discourse.org/t/sams-simple-theme/23552 "2014-12-31T03:20:14Z")
**Posts on this page:** 20
**Page:** 11

<div class="post-metadata">

### Author: ![sphism](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sphism/32/115807_2.png) [@sphism](https://meta.discourse.org/u/sphism)
#### Post date: [March 24, 2015, 4:03am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/203 "2015-03-24T04:03:23Z")

</div>

I’ve been working on styling a client’s discourse site this week and Sam’s minimal UI is working out so well for it. Thanks @sam it’s rally awesome, I think you’d really like what we’ve managed to with the look of the site… I’ll see if I can post screen shots

---

<div class="post-metadata">

### Author: ![dbm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dbm/32/86954_2.png) [@dbm](https://meta.discourse.org/u/dbm)
#### Post date: [March 29, 2015, 9:39pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/205 "2015-03-29T21:39:38Z")

</div>

Hello kind people,

Question; is it possible to bring back in minimal theme heatmap colors for posts and add column views?

To look like this Views | Replies | Last Post (Columns image preview below) with activated heatmap (Post colors). Thanks for help

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

This is the header code;

```
<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

  <td class='main-link clearfix'>
    {{raw "topic-status" topic=topic}}
    {{topic-link topic}}

    {{#if controller.showTopicPostBadges}}
      {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
    {{/if}}

    {{raw "list/topic-excerpt" topic=model}}

    <div class='creator'>
        {{#if showCategory}}
            {{category-link topic.category showParent="true" onlyStripe="true"}}
        {{/if}}

        {{~#if topic.creator ~}}
            <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            &nbsp;
            {{format-date topic.createdAt format="medium-with-ago"}}
        {{~/if ~}}
        
        {{raw "list/action-list" topic=topic postNumbers=topic.bookmarked_post_numbers className="bookmarks" icon="bookmark"}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
    </div>
  </td>

  {{#if controller.showLikes}}
    <td class="num likes">
      {{number topic.like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  {{#if controller.showOpLikes}}
    <td class="num likes">
      {{number topic.op_like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  <td class="num replies">
    {{topic.replyCount}}
  </td>

  <td class="last-post">
    <div class='poster-avatar'>
      <a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
    </div>

    <div class='poster-info'>
      <a href="{{topic.lastPostUrl}}">
        {{format-date topic.bumpedAt format="medium-with-ago"}}
      </a>
      <span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
    </div>
  </td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
  {{raw "topic-list-header-column" order='posts' name='topic.title'}}

  {{#if showLikes}}
    {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='Likes'}}
  {{/if}}

  {{#if showOpLikes}}
    {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='Likes'}}
  {{/if}}

  {{raw "topic-list-header-column" sortable='true' number='true' order='views' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</script>

<script>
  Discourse.TopicListItemView.reopen({
    showCategory: function(){
      return !this.get('controller.hideCategory') &&
        this.get('topic.creator') &&
        this.get('topic.category.name') !== 'uncategorized';
    }.property()
  });

  Discourse.Topic.reopen({
    creator: function(){
      var poster = this.get('posters.firstObject');
      if(poster){
        return poster.user;
      }
    }.property(),
    lastPoster: function() {
      var poster = this.get('posters.lastObject');
      if(poster){
        if (this.last_poster_username === poster.user.username){
          return poster.user;
        } else {
          return this.get('creator');
        }
      }
    }.property('posters'),
    replyCount: function(){
      return this.get('posts_count') - 1;
    }.property(),
    hasReplies: function(){
      return this.get('posts_count') > 1;
    }.property()

  });
</script>

```

Anyone? 😛

---

<div class="post-metadata">

### Author: ![sphism](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sphism/32/115807_2.png) [@sphism](https://meta.discourse.org/u/sphism)
#### Post date: [April 7, 2015, 12:01am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/206 "2015-04-07T00:01:36Z")

</div>

> [@dbm](#):
>
> data-template-name=‘list/topic\_list\_item.raw’

If you have a look in Discourse and find the templates that are being overridden, eg data-template-name=‘list/ **topic\_list\_item**.raw’ then you can see what the original templates look like.

Then you can find any parts that are missing and merge them back into the _Sam’s UI_ template overrides.

Sorry I can’t be more specific, but that should help

---

<div class="post-metadata">

### Author: ![d3zorg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/d3zorg/32/115640_2.png) [@d3zorg](https://meta.discourse.org/u/d3zorg)
#### Post date: [April 29, 2015, 1:46pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/207 "2015-04-29T13:46:14Z")

</div>

It looks perfect, but a lil bug overthere:

When username ‘too long’, it becomes like on the picture. Any workaround for this?

 ![](https://global.discourse-cdn.com/meta/original/3X/4/7/473671a358fe08c48cc6b72039946d89d91e5bbd.png)

---

<div class="post-metadata">

### Author: ![JoeK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joek/32/41618_2.png) [@JoeK](https://meta.discourse.org/u/JoeK)
#### Post date: [April 30, 2015, 8:49pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/208 "2015-04-30T20:49:03Z")

</div>

@d3zorg You can solve that with CSS. Depending on what you want to achieve, you can use:

``

```
.topic-list td.posters {
white-space: nowrap;
}
```

This will force no line-breaks, so the long name will simply overflow past the container’s right edge.

Or you could also play around with this setting:  
``

```
  text-wrap: ellipsis
```

which will apend “…” to any overflowing text instead of wrapping it to the next line. [See here](http://www.w3schools.com/cssref/css3_pr_text-overflow.asp).

---

<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: [May 5, 2015, 2:08pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/209 "2015-05-05T14:08:56Z")

</div>

I just added partial heatmapping (only hot)

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

I find that too many colors distract me in the theme, but highlighting the hottest conversations does have some benefit.

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [May 6, 2015, 6:07am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/210 "2015-05-06T06:07:14Z")

</div>

Have you updated your code with this? I was looking into this the other day but got side tracked since it wasn’t working as expected.

---

<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: [May 7, 2015, 2:27am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/211 "2015-05-07T02:27:25Z")

</div>

Just updated it now … sorry for the delay

---

<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: [May 8, 2015, 12:07am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/212 "2015-05-08T00:07:06Z")

</div>

@eviltrout my theme is pretty broken now, I think the list item template override is not longer taking, how do I fix?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [May 8, 2015, 5:58pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/213 "2015-05-08T17:58:10Z")

</div>

Ah that could be because I changed it to the preferred ember style of using dashes instead of underscores. So `topic-list-item` should fix it.

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [May 10, 2015, 6:11am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/214 "2015-05-10T06:11:13Z")

</div>

Interestingly, I just upgraded to latest and my override didn’t break. Though I am having issues with the suggested topics showing user info sometimes and I am not sure why.

I think it might have to do with the model/data store changes?

[![](https://global.discourse-cdn.com/meta/original/4X/0/e/6/0e6ba9d818e76d72268b3ee3e5a1cd82c016d86b.png) ](https://dl.dropboxusercontent.com/s/bfu7i3ildeqyrug/Screenshot%202015-05-09%2023.10.53.png?dl=0)

---

<div class="post-metadata">

### Author: ![ky\_metro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ky_metro/32/42807_2.png) [@ky\_metro](https://meta.discourse.org/u/ky_metro)
#### Post date: [May 14, 2015, 2:15am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/215 "2015-05-14T02:15:19Z")

</div>

@sam, can you please update the original post (header code, first line):

```
<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

```

to

```
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

```

Thanks!

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [May 19, 2015, 5:40am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/216 "2015-05-19T05:40:21Z")

</div>

@sam affects yours as well

[![](https://global.discourse-cdn.com/meta/original/4X/f/2/1/f21a4abd954c8305857225b559b8d75144b9155b.png) ](https://dl.dropboxusercontent.com/s/d6jt6fqkotyzk0s/Screenshot%202015-05-18%2022.39.50.png?dl=0)

---

<div class="post-metadata">

### Author: ![Maya\_Leshkowitz](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@Maya\_Leshkowitz](https://meta.discourse.org/u/Maya_Leshkowitz)
#### Post date: [August 26, 2015, 7:25pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/217 "2015-08-26T19:25:06Z")

</div>

this would be a great addition! did anyone try to do something like adding excerpts?

---

<div class="post-metadata">

### Author: ![Oskar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oskar/32/103381_2.png) [@Oskar](https://meta.discourse.org/u/Oskar)
#### Post date: [September 5, 2015, 10:33am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/218 "2015-09-05T10:33:51Z")

</div>

I implemented the styles and templates from the first post but they remove some (new?) Discourse features like batch editing topics in a category. The small burger to the left here is now missing:

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

How can I see the original templates to copy it back in or is there a better approach?

---

<div class="post-metadata">

### Author: ![Fabio\_Machado\_de\_Oli](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@Fabio\_Machado\_de\_Oli](https://meta.discourse.org/u/Fabio_Machado_de_Oli)
#### Post date: [September 20, 2015, 10:05pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/219 "2015-09-20T22:05:44Z")

</div>

@sam, are there any plans of supporting column customizations, so we can change, hide or add just one column from the topic list?

---

<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: [September 20, 2015, 10:17pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/220 "2015-09-20T22:17:19Z")

</div>

Hiding columns is trivial, just use CSS, we are pretty customizable as it is, we may split up some rendering chunks a bit more

---

<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 23, 2015, 11:49pm UTC](https://meta.discourse.org/t/sams-simple-theme/23552/221 "2015-11-23T23:49:39Z")

</div>

I just updated the theme to support:

[https://meta.discourse.org/t/deprecating-es6-compatibility-layer/35821](https://meta.discourse.org/t/deprecating-es6-compatibility-layer/35821)

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [December 16, 2015, 5:49am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/222 "2015-12-16T05:49:36Z")

</div>

I did the same, after the work you did in general to core I really just had to remove a bunch of code and only one custom property was added to the topic list view.

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [December 21, 2015, 7:36am UTC](https://meta.discourse.org/t/sams-simple-theme/23552/223 "2015-12-21T07:36:40Z")

</div>

So I updated one [small side project](http://cd-rw.org/) to the beta branch, and applied @sam’s Minimal 1:1. Now I am wondering, arent the avatars supposed to be square? Still getting round. I can see the 3px rounding in the CSS, but it doesn’t seem to cut it.

[Previous page](https://meta.discourse.org/t/sams-simple-theme/23552.md?page=10)

[Next page](https://meta.discourse.org/t/sams-simple-theme/23552.md?page=12)