What about an easier styling/theming system?

(Kris) #26

I’m thinking something like this for the admin section… anything that changes the opacity from 100 would have to be converted from HEX to RGBa, complicates things a little bit… but seems like something that would be useful.

Screenshot 2014-04-13 23.08.48.png2106×1062 46.1 KB

Support for a color picker would be nice too, and there are a bunch of javascript pickers floating around ( if we’re not going to roll our own )… though I’m not sure what the best option is. I used JSColor for this example… It’s ugly by default, but simple to restyle.

Screenshot 2014-04-13 23.15.04.png1484×662 46.1 KB

cc @neil

(probus) #27

I like the first mockup better. I’m not sure a color picker is needed. In general, you want to choose the colors using some other tool anyway and just plug them in here. Text input is fine for that and makes the ui simpler.

(Erlend Sogge Heggen) #28

I’d say make the js color picker a lightweight plugin.

(Sam Saffron) #29

Update:

@neil is working on the new front-end here this week. It is going to kick ass.

(Neil Lalonde) #30

For completeness, I’m adding to @awesomerobot’s mockup:

cf0f04f223feb3be.png1065×537 33.5 KB

Note the buttons and check boxes at the bottom.

The :white_check_mark:, :x:, and reset to default buttons are from the Settings UI, where each value is saved individually and immediately. But I don’t think we want each color value to be saved to the server immediately like that. Colors will be saved with the Save button at the bottom like the rest of the customization tabs.

So I don’t think we need the :white_check_mark:. But an undo button that puts back the saved value would be useful.

What does reset to default do?

  • use the default value from variables.scss?
  • if a built-in theme was chosen, get the value from that theme?
Calling the SiteCustomization API from a plugin
(Vikhyat Korrapati) #31

How would this work with enabling multiple site customizations at the same time? There could be conflicts between colors defined in different site customizations that are enabled at the same time.

(Rikki Tooley) #32

Are there any plans in the pipeline for a WordPress style theming system (independent and isolated from core)? I guess the real equivalent would be bundling all the handlebars templates into a plugin.

As nice as Discourse is at the moment, it’d be nice to have a way to make each forum structurally different (as opposed to just differently coloured).

(Kris) #33

That’s a good question… maybe variables should live outside of a customization then?

(Vikhyat Korrapati) #34

I think ideally we would have two different top-level tabs in the customize section, one for customizing colors and the other for creating CSS/header customizations that we have right now.

The colors tab doesn’t even need to be shown if the upcoming suppress_default_style_sheet site setting is set to true.

(Neil Lalonde) #35

I think this makes sense, and solves the problem of enabling multiple customizations. You choose your colour theme, and then you can make customizations.

(Loren Baum) #36

I like this but I would add MailChimp’s suggested or popular colors as it takes some of the guesswork out:

(Lee Dohm) #37

Perhaps color scheme plugins for those of us who are not artistically or design inclined?

(Kris) #38

Not a bad idea - I just recently saw http://www.colormoo.com/ on hackernews and was pretty impressed.

(Sebastien Miquerolle) #39

You also have https://kuler.adobe.com/ to find colors scheme.

(Neil Lalonde) #40

The unfinished color theme UI is available to play with:

Screen Shot 2014-04-25 at 3.40.22 PM.png1124×590 20.1 KB

The CSS, HTML tab is the existing “Site Customization” stuff. Better name ideas are welcome.

As the warning says, it doesn’t make any changes to the site. Stuff to do next:

  • add a color scheme from a plugin
  • asset pipeline stuff to include the custom colors

Also, what is a “Theme”? I imagine it’s a bundle that includes one (or more, but choose one?) color scheme, and CSS and HTML.

Calling the SiteCustomization API from a plugin
(Nathan Rijksen) #41

If this means being able to change colors rather than override them I’m all for it! :slight_smile: Nice work thus far!

(Neil Lalonde) #42

Override in that context means that it’s different than Discourse’s default theme. What do you mean by change?

(Nathan Rijksen) #43

For example if I set a link color to red then I’d like the CSS that was defining the link color as blue to be changed to say red, rather than have it define a new css rule which simply overrides the color value (this causes issues with CSS transitions, and is overall just messy and error-prone).

(Neil Lalonde) #44

Oh, yeah it changes. ie, It writes the variables with the configured values once.

(Sebastien Miquerolle) #45

Don’t forget this, please: Discourse Meta

I start to play with Ghost blog with my dark theme and I also need to custom the embedded css stylesheets. http://blog.onaldan.com/avril-2014-turquie-cappadoce/ (at bottom).