A more robust ecosystem for creating, sharing and modifying themes

(Dave McClure) #1

Help brainstorm what things could make a more robust ecosystem for creating, sharing and modifying themes for Discourse. As ideas gain traction, I will list them below and point to new or existing topics discussing the specifics of that idea

What ideas could make a more robust ecosystem for creating, sharing and modifying themes?


In mid December, @codinghorror started a discussion about Minimal Discourse - a custom theme for discourse developed by @karissa and ange. The discussion was focused around what could be learned from that design so as to improve the default theme that ships with Discourse.

@sam then started experimenting with his own Minimal Theme and publicized a hack so that others could load it live on meta to ‘live with it’ (as I have been doing for a number of weeks now) by bookmarking the sticky preview link.

In a discussion that followed later, @geek posted:

To be fair, Sam’s minimal theme goes a long way to illustrate just how configurable things are. But maybe some other things should be easier that go beyond the existing easy styling system.

And as @JSey noted, more could be done to improve the ecosystem for authoring and sharing themes.

If you have any ideas for how to improve the ability to create, modify or share themes, please post your thoughts below!


Theme Gallery / Skin
The end of Clown Vomit, or, simplified category styles
Customize/Design Category
Where is my The Darkness?
The end of Clown Vomit, or, simplified category styles
Big Picture Features Poll
Per-user theme chooser
Support for Piwik Analytics as an alternative to Google Analytics
(Joe Seyfried) #2

I feel that the basics are pretty much there already and the main thing is to simplify things for Discourse admins:

  • you can easily import a theme by copy&paste in the CSS and HTML fields
  • I imagine this could be simplified even more by an upload-button containing two (or more, if you take the mobile versions into account) text files
  • the export button should be almost as easy to implement; just dump a download file with the two text files inside. Spice this with a standardised description XML or text file, and you’re ready to go
  • Take the description XML, add a version number, set up a repository with public themes, and you are moving towards a “theme store” for Discourse in the long run
  • a theme selector could already be implemented by a sticky thread with screenshots of the themes and a link with the sticky flag set - put this in the user profile and you have the standard behaviour of all forum systems out there!

I would offer help in coding - but currently, I would spend 500% of my time searching for the right strings to pull - plus, I have some other projects for my own forum relaunch (a revised phpBB importer among others) - sorry about that!


(Sam Saffron) #3

Also in slightly related discussions:

The biggest pain point I see now is versioning and sharing. I think allowing a customisation to come from a source in github with a simple update button to “get latest / revert to version” would do tons at helping here.

We need a clean way for collaborating and sharing themes.


(PJH) #4

After a user contribution, we have this:

Code placed in /admin/customize/css_html </head>:

$("document").ready(function (){
  Em.View.views[$("header").attr("id")].set("renderDropdowns",true); //force discourse to render dropdown in background

  //inject custom menu items
  Em.run.next(function (){
        <ul class="main_menu">\
                <u>Custom Styles</u>\
                <ul class="csssubmenu">\
                    <li><a data-auto-route="true" class="csslink" href=".?preview-style=5ac5a5e9-c6ed-4197-9ec3-40811fd6ee5d&amp;sticky=true">Discourse Default</a></li>\
                    <li><a data-auto-route="true" class="csslink" href=".?sticky=true&amp;preview-style=">* TDWTF Default</a></li>\
                    <li><a data-auto-route="true" class="csslink" href=".?preview-style=2aeee392-5939-45a8-aaa8-eb7ca3282217&amp;sticky=true">Widescreen+minimal</a></li>\
    ').insertAfter( $("#user-dropdown li:eq(3)") );

PAID REQUEST - $50 - Copy another Discourse Theme
Letting users select different themes
Night Mode / Alternate Theme?
PAID REQUEST - $50 - Copy another Discourse Theme
PAID REQUEST - $50 - Copy another Discourse Theme
(Dave McClure) #5

Added a couple ideas from @geek’s post on the other topic:

and @sam’s post here:


(Sam Saffron) #6

we have a plugin outlet here, so you don’t need all that stuff see: Discourse Meta


Letting users select different themes
(Sam Saffron) #7

Been thinking through my biggest pain points … here are some proposed problems / solutions

The &sticky hack gets lost quite often leaving me looking at the default style

###Proposed solutions

  1. Allow admins/mods/tl4 to “pin” style to themselves.
  2. Allow site customisations to be flagged as “user selectable” which can be then pinned by users to the actual user.


I want to pick my theme and take it everywhere, cutting and pasting is a PITA.

###Proposed Solution

When adding a theme allow people to simply paste in a url, eg: http://meta.discourse.org/themes/22/sams-awesome-theme, the system can then keep track of that theme on an external site and notify admins when it is out of date and may need an update.


I am often editing the theme in multiple windows and am unsure which is latest


  1. We need a trivial form of versioning
  2. ShareJS (open a few windows) would be super cool for me. It would also allow users to collaborate on theme creation very cleanly.

Overall I feel there are a few small steps we can take that would heavily increase productivity and usefulness of the system.


Sam's personal "minimal" topic list design
(Dave McClure) #8

can you explain that a bit more? I’m not quite sure I’m following…


(Sam Saffron) #9
  1. I add a theme called http://meta.discourse.org/themes/22/sams-awesome-theme to say bbs.boingboing.net
  2. once a day a job runs that check what the latest version of sams-awesome-theme is, if it has changed, at the minimum display a glyph showing the theme is “out-of-date”
  3. add an “update from source” button for themes that are sourced externally

or something like that.


(Dave McClure) #10

Some discussion addressing the main issues discussed in this topic is now continuing here:


(Sam Saffron) #11

Closing this cause it is now done per:


(Sam Saffron) closed #12