Sam's personal "minimal" topic list design

Do you use the Topic List Previews plugin on your install?

In fact I do
Just disabled it in the settings, but that didn’t help.

The template from the plugin is loaded even if the plugin is disabled in the settings. So, you don’t get the template modifications that this component adds, but you get the CSS, which is why you end up with the broken layout.

3 Likes

So there is no workaround to use Topic List Previews plugin with Sam’s Theme?

I can’t for the life of me figure out how to install this as the default for my community. Seems like it would be in the admin panel, under “customize” and “Themes”, but can’t find it. Anyone have any tips?

The buttons are over here

5 Likes

Thanks for the help. When I add a new one, I’m not seeing Sam’s theme anywhere

Am I supposed to be importing here? If so, how can I find the url to the repository for sam’s theme?

Yes, you need to import it. The URL is in the original post at the top of this topic.

6 Likes

Is this the url to add? https://github.com/SamSaffron/discourse-simple-theme

3 Likes

Yep, that’s the one (you could just try it and find out, nothing bad happens if you use the wrong URL you just get an error).

5 Likes

Hello @sam, is it ok if I use parts of your theme to do a theme component ?

I played with this this weekend and I think I can do a theme component for those interested

2 Likes

Sure the license allows it :slight_smile: https://github.com/discourse/discourse-simple-theme/blob/master/LICENSE.txt

What are you looking to change?

1 Like

I wanted to create a theme component who can work on a majority of themes, because I didn’t really know how to edit the topic-list-item.raw.hbs, I used your work as a base.

I used two parts of your theme, the last post column and the author of the topic under the title, and I put back the views column and compatibility with featured link. I played with a few things here and there. I’ll present my theme component very soon.

To be sure, I wanted to ask for your permission, but I should have read the license :man_facepalming:

Thanks

3 Likes

Hi @sam

I´m starting to using your theme in my new forum. I have a problem in desktop version (not happens in mobile version).

When I activate the feature “topic featured link enabled” the source url is not showing in the topic title. It´s strange, in mobile is showing perfectly, like in the default Discourse theme.

Any idea what can I do to fix it?

Default theme, you can see elperiodico.com and xataka.com as sources:

Sam´s Simple theme, the links to the original sources are gone:

Thanks in advance

You can edit the theme in the Header section

And replace it all with this:

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

{{#if bulkSelectEnabled}}
<td class='star'>
  <input type='checkbox' class='bulk-select'>
</td>
{{/if}}

<td class='main-link clearfix'>
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
 {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
{{~/if}}
  {{#if controller.showTopicPostBadges}}
    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
  {{/if}}
  {{discourse-tags topic mode="list"}}
  {{raw "list/topic-excerpt" topic=model}}
  <div class='creator'>
  {{#if showCategory}}
     {{category-link topic.category}}
   {{/if}}
  {{~#if topic.creator ~}}
  <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
  {{~/if ~}}
   {{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}}

{{raw "list/posts-count-column" topic=topic}}

<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="tiny"}}
</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'>
  {{#if bulkSelectEnabled}}
  <th class='star'>
    {{#if canBulkSelect}}
        <button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
    {{/if}}
  </th>
  {{/if}}
  {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
  
  {{#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='posts' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
 
</script>

Haven’t tried it, but it should work

6 Likes

Thanks @Steven, I´ll try it!

Awesome thanks for specifying this!

It´s working nice, thanks @Steven

1 Like

Hey @sam
I have been trying to get the theme running on my forum

but it doesn’t work, the columns in home page are still same and not like in theme.

how can I debug it and see what prevents it from working?

It is definitely working here. I recommend you upgrade to the latest version of Discourse and install using the official guide.

3 Likes