Has anybody created themes for Discourse?

(Trevor Williams) #1

Are there any themes for Discourse yet? Here’s a couple screenshots of what I’m working on ATM:


It’s still in it’s early stages and that was done in 19 hours. It’ll take at least a week or two for everything to finished.

Adding unique class names to to the elements in the topic map
(Sam Saffron) #2

I love it, @awesomerobot can probably help out with some css tips having themed a few sites already.

rearranging structure needs to be untangled into single items and raised with the core team

(Trevor Williams) #3

Thanks @sam glad you love it. What do you mean untangled into single items? That’s all CSS, no images.

(Sam Saffron) #4

for example, you mention renaming “1 day ago” to “yesterday”, that is a code change, not css.

(Trevor Williams) #5

Duly noted. That was just a suggestion on my part, and even though it would look great arranged like that, it will have to wait.

Also, thanks for the likes!

(Kris) #6

Yes, quite nice! We’ve done some general stuff to match the forum to their corresponding site, like on http://discuss.howtogeek.com and I’ve been working on a theme in my free time for the past few months that pretty much spans every element of the site - it does certainly take a quite of bit of time, this is probably about 90 hours…

If you get hung up on anything you’re working on let me know!

Oh, and there are some things that really just can’t happen - like your re-positioning of the search bar - the title docks into the main bar when you’re scrolling, so anything expanding further left of the buttons up there would start to interfere with that… unless of course you shorten the title width

(Trevor Williams) #7

(Sam Saffron) #8

I see what you did there, but the search UI there feels really awkward. A button the transfers focus 200px to the left feels very odd to me, also this is going to clash with really long titles potentially.

(Trevor Williams) #9

I’ve got it to trim long titles, plus the h2 font-size for the titles when scrolling are umm… 16px or 15px. Also, I was thinking about moving the search button in front of the notifications.

(Sam Saffron) #10

In the proposed design you have it would make much more sense there, or even embedded within the search textfield.

(Kris) #11

Looking cool - so I assume you are just limiting the maximum width of the post titles once they’ve docked? or would you just allow the search to overlap when it’s expanded?

Definitely move the search button if you continue with this - the disconnect caused by the notifications button is awkward.


Love the searchbar UI. Search is, in my view, the most interesting feature for a new user, and Discourse is build to build new communities, so It’s great to have alternative like the one you show us. :ok_hand:

(Trevor Williams) #13

Thanks @PabloC

I will.

(Trevor Williams) #14

Since Discourse is using the Bootstrap framework, it needs to utilize it as much as possible. Meaning, Bootstrap for example, fits on all devices. It would make more sense than having max-width and min-width.

I was testing the Discourse layout using an iPad, and I would have to flip it on the side when instead it should automatically adjust the size. Is it possible that the developers can implement this into Discourse as a standard? It would benefit and satisfy many devices and UI developers as well.

(Kris) #15

As far as I know, the ultimate goal is to completely remove bootstrap (there has already been work done to remove portions of it) - so I’d advise against relying on it. @codinghorror may have some more specific information on that, but in my mind bootstrap is the scaffolding you use to build your app, and when you’re done it’s best to remove it.

It’s definitely possible to make Discourse more responsive, it’s just a matter of taking the time to (I think there’s only… what, 1 simple breakpoint for tablets now?). There has also been some preliminary discussion on how to approach mobile here.

Generally I think, since most themes will likely rely on overriding the base theme - that it really should be simplified (if no one else works to do it, I’ll eventually have a bunch of suggestions). Then, as you said it’d be nice to have a more responsive layout in place to make it easier for developers to pick up and run with.

(Trevor Williams) #17

And that’s good news too! Thanks for the heads up.

(Luke Larris) #18

Wow, that design looks very nice. I have no issues with the default theme, but that’s definitely a nice design you have there.

(Trevor Williams) #19

As much as I’d like to, theres no motivation here. As with many UI developers such as myself, some ideas come overnight, some ideas are well planned and thought out and this theme unfortunately came overnight. There was a problem keeping up with commits at such a rapid pace - I don’t like that at all…

Another thing is that I did finish the design completely (maybe a few bugs if I can recall), but like I mentioned, there was no motivation here. In the coming weeks I will definitely create something better than what I had. Here’s another screenshot of the front page.

To make or not to make, that is the question… I’ll let you all decide.

(Andrew Steele) #20

How does one to about removing bootstrap? It seems like once you’ve built a site around it would not easily be removed. Kind of like removing the girders from a finished skyscraper. Can you point me at some resources?

(Kris) #21

Well, since Bootstrap is a framework, you’re getting the whole kitchen when you may only need to use the toaster. But at the time of rolling out bootstrap, you honestly had no idea what you were going to need — you just wanted things to be working fast.

It’s a matter of going back in and throwing out those bits that you aren’t relying on. As you can imagine, that be pretty time consuming as you’re essentially going through everything line by line and determining what’s needed and what’s not.