Battle Axe - A free theme by the Tappara.co hockey community

[ljpp]

Continuing from Modify Users column to contain only one avatar (latest poster):

Time to give something back to the community. At Tappara.co we finally got our home screen, the Latest view, the way we wanted. This is partially based on @sam’s Minimal Theme and also borrows some from @probus’s excellent work at Keskuskenttä. It was mostly put together by our community member Ozzi. So kudos to them!

Main features:

• Users and Activity merged to Latest, combining the avatar and username of the last poster and a time stamp.
• Columns logically re-ordered to | Topic | Category | Views | Replies | Latest |
• Slightly squeezed vertical padding to allow more threads per screen.

See it in action on our site Tappara.co. Preview (Google Translated to English):

Note that we also have other minor visual CSS patches that I have published earlier. These code snippets below are only responsible for the topic listing.

Any thoughts, ideas, suggestions are appreciated.

###EDIT: The code in this post was old and depreciated. Now published at GitHub.

[Law]

Thank you! I’m liking this.

[ljpp]

Our complete theming and customization work has now been released at GitHub. It has also evolved slightly since I opened this thread, so have a look first: https://tappara.co

TapparaCo/discourse-theme-battle-axe

Edit: Repo name updated. Bug reports and improvement suggestions most welcome.
Edit: Up to date screenshot:

[ljpp]

One thing we have not been able to get sorted out is the Category badge colors. We started with a blue-orange idea for Categories as well, but then we needed to add some more and ran out of colors. It is a bit of a mess really.

It is actually pretty hard to figure out the colors when you have more than a handful of Categories and you’d like to have them somewhat aligned with the overall brand and styling. There should also be headroom for adding more categories in the future, so that adding one more does not break your color system or scheme.

As this is a hockey forum, many of the basic colors associate strongly with certain opponent teams, which is also undesirable.

Very interested in any ideas or suggestions regarding Category colors.

[Mittineague]

If you enter hex you can have 256 different values for each of the 3 color channels.

Granted, an 9A isn’t very distinguishable from 9B etc. but with 256x256x256 how many more do you need?

[Remah (Just another happy Discourse user)]

Thanks for giving something back and not just in this topic.

I don’t have any suggestions regarding specific Category colors for you particularly because of your need to avoid team color associations and I don’t have the same cultural color associations as your users.

I just want to point out that it is worthwhile to integrate Category color theming with the Site color theming because they always interact.

For example, even if you want to have Category colors “somewhat aligned with the overall brand and styling”, you don’t usually want Category colors to repeat the site colors. The appearance of vitality in a site declines when the colors appear too uniform because they are repeated, as your Category colors do - but the blue and orange are a good combination. The same with a lack of contrast between colors. We don’t want them too lively (as discussed in The end of Clown Vomit, or, simplified category styles ) but we also don’t want to hinder engagement by making them appear too bland (e.g.if color seeding isn’t handled well Create a complete color scheme based on one seed color feature).

So it would be good to have more Site and Category color automation which would reduce the need for many of the site customizations that appear in this forum. Maybe it’s time to look at extending What about an easier styling/theming system? / Programmatically adjusting color variables with SASS to Category colors?

[ljpp]

@Mittineague Did you just play me with a classic engineering/developer joke?

Sure, you don’t run out of colors in technical perspective. But it is can be difficult to develop scheme of colors that play well with the overall theming and each other. If you have five categories, it is super simple - just use https://coolors.co/ . But when you have 10-15-20 categories, it gets increasingly difficult. And the scheme should even be future proof, in case one wishes to add more categories…

@mark In addition to categories there are sub-categories. I have been tinking of a color scheme, that would “scale” vertically and horizontally. The root level categories would have different color, and the subcategories would be lighter shades of their root?

Root category        sub-category
Red                  light red
Green                light green
Blue                 light blue

And if you have more than one sub-category, the idea would be to use different levels of white shading 25/50/75 would give you 3 sub-category colors. Haven’t tried this in real life though.

And yes the cultural color associations make it even more complex. Our local rival team goes with a green & yellow jersey, which limits the usage of these colors. The Finnish Elite League has black & white branding, so categories related to the League as a whole should prolly leverage that, and so forth.

[ljpp]

Theme & GitHub repo updated for 1.7 Stable. There was plenty of breakage. NOTE: We will follow the stable branch.

[ljpp]

Well, iti definitely looks like an error but most likely in your implementation, as naturally the theme works Ok on our live site.

[ljpp]

Since you asked so politely, we digged in deeper and actually found knick in the code. This was not 100% reproducible.

Issue: [fi.admin.dashboard.latest_version] shown on index page

[sam (Sam Saffron)]

Can you publish this as a theme so I can move it to #plugin:theme ?

[ljpp]

At some point, yes. We are running 1.7.

A PR is welcome. Yes, finally I get to say this!

[ljpp]

I am just starting to look at 1.8 and it seems that the whole Customization has been dramatically changed.

Is there any documentation on how are the 1.7 customizations managed by the upgrade process and what should be taken into account prior to the upgrade?

Our overall customization is made of multiple several code snippets, impacting different parts of the UI.

[neil (Neil Lalonde)]

Here’s a doc about the new theme support:

Structure of themes and theme components

Discourse now supports native themes that can be sourced from a remote git repository, or from a .tar.gz archive. Recently we also added support for branches and private repositories. [56] An example theme is at: https://github.com/SamSaffron/discourse-simple-theme [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme y…

[ljpp]

Yeah, spotted that. I sure hope that the migration scripts are well tested. My two small side projects ugraded flawlessly though, but they have somewhat less customization.

[ljpp]

Battle Axe theme is now available straight from our GitHub repository. We have just updated it to match Discourse 1.9, which introduced some changes to the UI elements.

We are also offering our customization of inserting local ads to the header and footer areas, mobile and desktop views. The code now serves our partner UpClould.com graphic elements, so you need to modify accordingly.

Tappara.co

Edit: An up-to-date screenshot with FI locale and resposive AdSense ads enabled.

Mobile view (Chrome emulated)

[8BIT]

i like how you built your own theme with ads baked in. do you update those settings via a plugin or manually?

[ljpp]

We have two kinds of ads:

• We use the official endorsed ad plugin to serve responsive AdSense ads.
• As mentioned elsewhere, we struck a deal with UpCloud.com premium hosting (highly recommended for Discourse, if I may say so), exchanging hosting credits for brand visibility. These we baked in to the theme. This provides UpCloud good visibility near the menu button and at the end of every page. This has the added benefit that local images are not blocked by AdBlockers, so they get their goods for every page view served. This customization is also published at our GitHub repo.

[rizka]

Exciting news! The Battle Axe theme was updated today. The new version also includes an awesome dark version with orange header, dark blue background and a white bar separating them. You can right now see the dark theme live at https://tappara.co. The light-colored version will be set to be the default theme again some time tomorrow so here is a screenshot:

The currently available version in Github is compatible with Discourse 2.1 which our site still uses, but we have a 2.2-compatible version prepared. We will publish it on Github rather soon. Most notably, we will stick with traditional categories column in the desktop Latest view. Our front-end guru @ozzi has put together some slick implementation making use of handlebars. I suppose we will share that customization as a separate theme component.