Easy theme development


(Sam Saffron) #1

One huge pain point current theme developers have is that you need to install Discourse locally or be an admin on a Discourse site somewhere in the cloud just to get started.

This is enormously raising the barrier to entry and making it practically impossible for us to do things like a “theme” competition and so on.

The plan

I would like someone (probably us) to build a “theme editor” plugin for Discourse that allows non-admins to hack on Discourse themes.

Then we can run a theme-creator.discourse.org where end users can hack on themes and show off their work.

How I see this working?

  • User would have an area on the user page where they can add a git repo for their theme and the ability to load up theme json.

  • User would be able to select the theme on said site

  • We would ship a local tiny application to interact with this plugin that would include file watcher that would automatically update a theme when you save files on local, so you get live refresh for css changes.

Devil is in the details here, but this would open the door big time to random people hacking on themes and would have enormous positive effect for our ecosystem in a theme competition.


Help installing Discourse for Developer
Theme Creator, create and show themes without installing Discourse!
(Richard - DiscourseHosting.com) #2

This is a brilliant plan but take away even more barriers. IMHO having to set up a git repo is too high a barrier already. Hide this gory detail, you can put them in git but make it automagically for the user point of view. Make the theme editor accessible in user space, hard wire it to a per-user repository behind the scenes. Then all you need is a publish button that makes the behind-the-scenes-user-repo accessible to the world.

Or something like that. Just thinking out loud.


(Mittineague) #3

Would not a comprehensive collection of pages as static pages be enough to design with?

I occasionally use browser dev tools to experiment with CSS, but I rarely keep any of it.

Of those two, I think the “designer” package of files would be easiest with random lorem ipsum or frozen text (no database) to host for downloading.


(Richard - DiscourseHosting.com) #4

There is much more to Discourse themes than CSS. You can write code, even use the plugin API - you cannot do that with static pages.


(Sam Saffron) #5

Even if we repackaged the entire ember app static with magic sample data it would not be enough cause we also need to be able to compile SCSS using our pipeline and transpile ES6


(Barry van Oudtshoorn) #6

Would the theme playground instance have all of the official plugins enabled? (And perhaps some of the most popular unofficial ones?) Many of the more interesting theme modifications I’ve made have been predicated on or built around particular plugins.


(Sam Saffron) #7

I don’t know yet :upside_down_face: but this is absolutely noted. :pen:


(Jeff Atwood) #8

This is kinda BS IMO, you can do 90% of the theming you need to by simply editing the live CSS.

Remember Wordpress “theming” is basically pasting CSS into HTML text boxes and reloading – and it takes nothing but a web browser to do it. I think sometimes we get a little too fancy for our own good, and forget who the audience is for this stuff.


(Sam Saffron) #9

You are missing that we use SCSS usually not CSS. There are vars you need to use.


(Mittineague) #10

I’ll be the first to admit I’m more a developer than a designer. True some may be good at both. And maybe it’s an unfounded stereotype. But I’m thinking that for those that have the knack for design it would be good to have a “developer newbie” version with a minimum amount of anything that might be a hurdle to those interested in theming Discourse.

True, a lot can be done in dev tools, but sometimes having a large stylesheet can be easier than playing with CSS in dev tools. Browser plugins such as Stylish or browser custom user styles might be difficult for some?


(Sam Saffron) #11

Note I see this feature working in 2 modes

Mode 1 you need a web browser and internet to hack on themes

Mode 2 you get to use your own editor but need to download a program

Mode 1 gets built first, mode 2 second


(Erlend Sogge Heggen) #12

Love this!

But as far as the theme contest is concerned, an even easier step 0 would be to facilitate free hosting for a limited amount of time. Designers would have their own dedicated forum to style as they see fit.

We could do the contest without any dev work by just creating a simple free-hosting-signup for designers, same as we did for open source projects.


(Kris) #13

I think another “nice to have” for theme development would be an import with a bunch of placeholder post content. There are a lot of elements to style and it’s very easy to miss something if you’re starting on a fresh install.


(David Taylor) #14

I’ve been thinking a little about the security implications of this. If users have the ability to edit themes then there’s a potential for XSS attacks. If the user-created themes are only accessible to the user that created them, then we should be ok (they can only run requests in the context of their own account, so who cares).

However, if we want users to be able to ‘show off their work’, and have things like theme competitions then we may have a problem:

  • Unprivileged user 1 creates theme with JS element
  • User 2 (admin) tries out the theme
  • JS runs in context of an admin
  • User 1 can access/control any data as an admin

We could disable JavaScript modifications, but that would cripple some themes, and CSS security issues exist in old browsers.

I think the only way around this would be to have a workflow like this for theme competitions:

  • Designers use the theme-creator.discourse.org system to design themes (only accessible to them), and then save them to a git repository
  • Designer submits the git repo URL to the admin
  • Admin reviews the code of submitted themes to ensure they’re safe
  • Accepted themes are made publicly accessible for the competition. Themes should be locked to a specific commit to ensure they cannot be edited by an attacker later

Can anyone think of any better method for sharing themes without the security concerns?


(Joe) #15

Lots of great points here! :grin: I am a fan of the idea.

There’s no reason why the issue cannot be broken into pieces.

1- No access unless you have Discourse installed somehow
2- The need to inherit the color scheme variables
3- Security risks because Discourse theming is amazingly flexible.

A near-term solution does not necessarily need to fix all of the above from the get go.

I’d be really happy even if this starts with CSS only themes. Full-blown theme support (with scripts) can come in later.

I really, REALLY like the color scheme function. It’s extremely well made. In fact, I dare say that it is one of the most underrated features of Discourse.

Any theme development workflow must include the color scheme function and by proxy the ability to use those variables while developing.

Finally, since filler / placeholder content is a must, is it not possible to mirror (fetch the topics from) meta.discourse.org on a separate subdomain or even mirror try.discourse.org

It doesn’t have to be the entire database, a couple of months worth of posts should suffice.


(Sam Saffron) #16

I think @lll is entirely on the ball here.

We got to start with baby steps here first before growing this to something super complicated.

I would say that phase 1 works as following:

  1. Plugin is installed on https://theme-builder.discourse.org

  2. theme-builder.discourse.org uses SSO to meta so it is super easy to log in

  3. theme-builder.discourse.org will use the same placeholder content as try, not google indexed

  4. The themes they create are visible in theme-builder.discourse.org/admin/customize/themes , we got to amend that list to somehow display the “user” who created the theme (which exists in the themes table)

  5. Users are allowed only the following:

    1. Create up to say 10 themes

    2. Amend the “common”, “desktop” and “mobile” CSS

    3. Create color schemes and select them for the theme they are building

    4. Because of reduced security, themes they create can automatically be “user selectable” which makes it easy to show off work

I feel like this is a great nicely contained “phase 1” thing, the work needed is very manageable and security is not a concern.

In fact, when I think through this, “phase 2” would actually be improvements to this system as opposed to unlocking the giant pandora box.

  • Allow theme creators to easily share themes they create without json export/import on https://theme-builder.discourse.org for example adding https://theme-builder.discourse.org/themes/10 can be used on any Discourse site to add the theme they build

  • json import/export

  • Allow theme creators to break down CSS into “multiple” sections so it is more manageable

  • Unlock font and image uploads for theme

And the list goes on.

Finally when just fiddle with CSS, schemes and images/fonts is 100% operational we can enter phase 3 the full pandora box.

Which I would also unravel in stages starting with a template selector so you could easily browse templates via a UI and override them.

Its a long and winding road, so I would like us to start with the simplest possible thing and build on it as we go.


(Sam Saffron) #17

This is now complete per: Theme Creator, create and show themes without installing Discourse!

HUGE thank you to @david !


(Sam Saffron) #18