Theme Creator, create and show themes without installing Discourse!


(Sam Saffron) #1

A few months ago I raised the idea of an Easy Theme Creator!

The idea was to have a place where anyone can hack on themes without installing Discourse!

Since the plan was set in motion @David_Taylor has been super busy making all the lego pieces fall into place.

The result is https://theme-creator.discourse.org/ , logging in is SUPER easy, just hit the login button and you will be logged in via meta.

Once logged in you will see this giant button:

When you click it you will arrive at your “theme authoring” interface:

The interface has full parity with the admin interface, including live CSS refresh, what more you can use the theme CLI: Discourse Theme CLI (console app to help you build themes)

All members of the @theme_creator group have the special ability to share themes! So, for example you can check out my simple theme at: https://theme-creator.discourse.org/theme/sam/simple (even anonymous can check out my theme!)

We looking forward to getting some feedback here, if any of you theme authors feel like sprucing up the theme-creator site, let me know and link me to your proposed theme!

If you have any themes or theme components please feel free to link your #theme topics to the preview so people can check it out!

Please try this out and report back!

Again extra huge thank you to @David_Taylor for making this happen!

Check out: https://theme-creator.discourse.org/


Joe's Personal Discourse Theme
Big Header - Little Header
SCSS variables in custom CSS
Easy theme development
Developer’s guide to Discourse Themes
User styled posts?
Spinner on initial load
Beginner's guide to using Discourse themes
(Sam Saffron) #2

Note, I will be doing my regular purging here as we action various feedbacks, feel free to post links to your themes here and other throwaway constructive feedback, I will be cleaning this up as I go.


(Evgeny) #3

Design, latest topics (Mini)

https://theme-creator.discourse.org/theme/Stranik/mini


(Sam Saffron) #4

Can you click “share” to generate a link?

Note I just added you to theme_creator so log out and log in. I do wonder if I should just allow all plugin authors access to share as well, but the reality is you will need theme_author membership anyway to post on meta.


(Jeff Atwood) #5

The UI here is really rough. Perhaps @awesomerobot could take a look?


(Sam Saffron) #6

Also the general admin UI we have which shares most of this may need a bit of love.

fyi @awesomerobot theme creator plugin is at: GitHub - discourse/discourse-theme-creator


(Jeff Atwood) #7

If we’re gonna have the redacted then we need to improve that specific page of the UI.


(Sam Saffron) #8

@David_Taylor yes there is a fair amount of cognitive load behind creating a color scheme.

Perhaps we cheat a bit and add a color scheme tab that allows you to create special themes that only include a color scheme.

Something along the line of a new tab called “Schemes” that displays all your color schemes and lets you create a new one if you wish and share a scheme.

For the purpose of people who do not want to learn about the full theme features they can then in 2 clicks create a color scheme and share it.

We can also bypass the security check for people just sharing a list of colors and allow them to share unconditionally. (if theme only has a scheme then allow sharing always)


(Sam Saffron) #9

A few recommended improvements here:


(Jeff Atwood) #10

Delete button also has same color as navigation tabs???


(Joe) #11

Super! :fire:

Even though I am currently away for a couple of days, I still managed to put together a preview for the Vincent theme :sweat_smile:

https://theme-creator.discourse.org/theme/Johani/vincent-beta

If that’s not a sign of how well the theme creator works I don’t know what is. :grin:

I’ll put together a cleaned up preview when I get back.

Thank you very much for making this possible @David_Taylor, @sam and everyone else who worked on this :wink: :heart:

I have one tiny question regarding the creation of topics on Theme creator. I want to create a couple of topics to preview Slick and Tiles gallery themes, what would you advise here? Unlisted topics?


#12

This is amazing @David_Taylor, @sam, and everyone else who made this happen!! Having such an easy way to demo themes to other users on Meta will be incredibly useful. It’s so easy to utilize too!

First the Discourse Theme CLI, now this… What a time to be a theme developer :tada:

Here are a few of my themes for fun. I’ll be adding demo links to their theme topics soon :grin:

https://theme-creator.discourse.org/theme/tshenry/tl-flair
(Shows trust-level flair on bottom left of user avatar)

https://theme-creator.discourse.org/theme/tshenry/topic-stopwatch
(Shows Topic Stopwatch on all topics)

https://theme-creator.discourse.org/theme/tshenry/last-seen
(Shows “last seen” metadata on user card)

PS - I think I found one tiny :bug: that happens when I’ve imported a theme from GitHub. The share function does not seem to work until I refresh the page.


(David Taylor) #13

Thanks for the feedback everyone, glad to hear people are finding it useful :smiley:

Agreed, I will work on improving this, and adding a simplified colour scheme version.

I think for this we should:

  • Make a category which theme-authors can create topics in
  • Hide it from Latest (topics for things like Slick/Tiles are not going to work for other themes, so it could be confusing to show them)
  • Allow theme authors to add a ‘redirect URL’ which users are taken to after clicking “view theme”.

:+1: I’ll get this sorted, thanks

Since this is mostly going to be linked to from Meta, I think it would be cool if share links were oneboxed. I’ll look at adding the appropriate markup for that.


(Sam Saffron) #14

I really enjoyed checking out your theme for the first time!

https://theme-creator.discourse.org/theme/Johani/vincent-beta

@David_Taylor another item to the list ^^^ this should have some oembed goodness so it shows up in a onebox


(Kris) #15

Two quick things:

  1. If I log in and try to preview existing themes as an admin they don’t seem to work… it would also be nice if I could share someone else’s theme as an admin.

  2. Could we force naming themes? or append the author to the theme names?

Right now we have:


(Sam Saffron) #16

Also we should change it so we see the username or avatar there, we can make an outlet for it if it’s not generally useful, by default showing who created the theme and who last edited it is of use


(David Taylor) #17

I have deliberately made it impossible to preview another user’s theme without going through the “view theme” confirmation dialog, as a security precaution. I’ll add the confirmation dialog to the admin panel so that the preview button works again for admins.

:+1: I’ll add a plugin outlet for each item in the list of themes, and add create/update info to the default interface.


(Sam Saffron) #18

@David_Taylor we are going to need a daily job as well to clean up this category:

Quite a few themes like to change the composer, so we need to be able to show it and allow people to create and reply to topics.


#19

Am I missing something or is there no Export? It would be nice to be able to play around with this, then export to the format that allows for easy import into a different forum, especially since there’s no gui for the settings yaml when you’re customizing themes in your own website.


(David Taylor) #20

This is an idea I have working in a branch:


Does that solve the use case you’re thinking of? Or would you rather there was a completely separate UI for colour schemes?