Sam's Simple Theme

@chapel @sam where can I find the full template for customize ?

I think @sam is just updating the code snippets in the first post in this topic as he moves along. @sam have I got that right?

Incidentally, thanks for doing this! :awthanks: I have been enjoying observing this experiment and it’s going to be helpful to show my team how amazingly customizable discourse is as a platform.

1 Like

Here is a good base for customize on our own
https://meta.discourse.org/?preview-style=ab0d551a-aa4b-4590-82b2-f13859205808

I’ve updated my post with the current CSS and Header changes.

2 Likes

@sam, did you stumble across this little oddity?


There is a spurious colspan=“2” in the main-link clearfix TD where it really should be a colspan=“1”… I was not really able to reproduce it with anything but the “Welcome to Discourse”-thread…

/Edit: @chapel’s design (thanks for sharing btw!) shows the same effect!

1 Like

Is the Pinned icon adding an “extra” table cell to that row?

Nope, it must either be the missing category, or the missing poster list, if I take a look at the original design… do we need the colspan="{{titleColSpan}}" at all? Is there any use case left for it in the new, reduced designs?

Let me check. I don’t have any topics uncategorized so that might explain why I haven’t seen it.

Nope, the missing category isn’t the culprit… must be the missing poster list:

I just kicked the colspan and haven’t found any other errors in the topic list…

I’m not able to reproduce or see the case you’re seeing.

Due to the modifications in the simplified topic list, I would guess that it isn’t necessary but I haven’t tracked down where that variable is created, I’m sure @sam could answer authoritatively.

Thanks anyway Jacob - so let’s wait and see what @sam knows about titleColSpan! :smiley:

He is out on vacation for 2 weeks I believe, so he may not show up here any time soon.

Quickly searched and found this:

https://github.com/discourse/discourse/blob/0947191060757efee411d05afcc267c968af316e/app/assets/javascripts/discourse/controllers/topic-list-item.js.es6#L25-L33

From the looks of it, this is the logic that you were seeing: this.get('model.isPinnedUncategorized')

So it’s a combination of a pinned topic that is uncategorized. So he colspan attribute is unnecessary for the simplified design.

4 Likes

Without the table headers, how do we sort by # of replies, recency, or category?

2 Likes

Some hack around inspired by this topic :smile:

<script>
Discourse.HTML['categoryStyle'] = function(category) {
    var color = Em.get(category, 'color'),
        textColor = Em.get(category, 'text_color');

    if (!color && !textColor) { return; }
    
    // Add the custom style if we need to
    var style = "";
    if (color) { 
        style += "border: 2px solid #" + color + "; "; 
        style += "color: #" + color + "; ";
    }
    return style;
}
Discourse.HTML['categoryBadge'] = function(category, opts) {
    opts = opts || {};

    if ((!category) ||
          (!opts.allowUncategorized &&
           Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
           Discourse.SiteSettings.suppress_uncategorized_badge
          )
       ) return "";

    var name = Em.get(category, 'name'),
        description = Em.get(category, 'description_text'),
        restricted = Em.get(category, 'read_restricted'),
        url = Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
        elem = (opts.link === false ? 'span' : 'a'),
        extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
        html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ",
        categoryStyle;

    // Parent stripe implies onlyStripe
    if (opts.onlyStripe) { opts.showParent = true; }

    html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
            (opts.onlyStripe ? ' clear-badge' : '') +
            extraClasses + "\" ";
    name = Handlebars.Utils.escapeExpression(name);

    // Add description if we have it, without tags. Server has sanitized the description value.
    if (description) html += "title=\"" + Handlebars.Utils.escapeExpression(description) + "\" ";

    categoryStyle = Discourse.HTML.categoryStyle(category);
    if (categoryStyle) {
        html += "style=\"" + categoryStyle + "\" ";
    }
    if (restricted) {
      html += "><div><i class='fa fa-group'></i> " + name + "</div></" + elem + ">";
    } else {
      html += ">" + name + "</" + elem + ">";
    }
    return html;
  }
</script>
2 Likes

digging the squares :beers:

5 Likes

I switched over to using my minimal view as the default on my forum. If you would like to see how it looks/feels feel free to check it out at Wasting Your Life

I haven’t tried the squares, but I am thinking of alternative styles to try and see how they look in the different areas categories are shown.

9 Likes

:+1: I just always think that the “replies” and “last author” column should be changed. But I have no idea about design, though. =)

1 Like

@chapel This looks so clean, I think it should be considered as the default discourse theme.

3 Likes

I do like it very much! Clean and minimal :wink: I want it!

2 Likes

The info is in my post above. Has the necessary CSS and JS changes.

Edit: added link to the post.

3 Likes