How do I make my Roots theme look like the Discourse forum?

Hello I’m new here and also a new user of Roots. I’ve read the preliminary Roots docs (great stuff) dabbled around with Grunt (installed it on my Macbook and running it with the theme (‘grunt watch’ running on console in theme folder.) Been into and dabbling with both Bootstrap CSS and the core roots files to the point I simply fealt I needed to start again from scratch with Roots and hence versioned my theme to 0.2 :smile:

I stumble in here to learn more and got dazzled by the Discourse forum design itself. Its got a lot of resemblance to what I’m out to do with the custom theme I’m developing. The top bar especially caught my eye, but also the use of AJAX loading and more.

So I’m very interested in having something similar for my custom theme. Anybody want to give me a hint or tips how to achieve this, where to start, etc with Roots? I’m very willing to learn :wink:

BTW I’m not out to copy or steal the design, I still aim do customize my theme further along my own design ideas. If it helps I could share my design mockups as to show what I’m trying to make my theme look like. Thanx in advance and for a great forum as well as Roots itself - its a great starting point!

This forum is powered by http://www.discourse.org/ not WordPress/Roots.

Oh I see. Sorry, I should’ve really checked it better, but I was so dazzled and also eager to get to my first post :blush:

@henrik_vaglin Discourse is open source (https://github.com/discourse/discourse) so feel free to steal their templates and CSS :smile:

@swalkinshaw Well I was thinking of going the oute of trying out discourse on my staging server (small Synology home server) to see if that’s a better option all together. Seems unecessary to reinvent the wheel. Still I might use it’s interface to work against my Wordpress installation via AJAX using the Thermal API plugin http://thermal-api.com/ for pages, blog and other customized posts. Any thoughts or tips on that?

Sorry never heard of Thermal. If you want a forum then Discourse is great. Keep in mind that’s a Ruby on Rails application and fairly complicated to get running (especially in production). Discourse actually has a WP plugin to pull in comments as well. https://github.com/discourse/wp-discourse

1 Like

@swalkinshaw Hm, yes I see what you mean about it being complicated installing RoR, especially on my NAS as I was pondering of having it as a staging server. Maybe I’m taking the long and unnecessary route here, when it’s mostly the design I’m after. On their site docs (or was it in the github repo I read it?) it seems that most of the UX is actually a javascipt app interfacing the discourse core with AJAX. Maybe I could extract and adapt it for my Roots based theme, it depends on how integrated the design is with the ruby code I guess.

Anyways, here’s what I’ve imagined my site http://www.friskvardsklubben.se to look like:

Frontpage

Normal page

As of now there’s some minor differences in these mockups where the first is what I’m leaning towards for the front page, while the second should have a more similar top and bottom navbar to it, but excercises what a normal page layout would be.

BTW These were done with the Balsamiq mockup web app, but since I’ve discovered Divshot that is a combined mockup/bootstrap visual designer web app (sic) which just recently upgraded to incorpirating Bootstrap 3. I can recommend it for designers who wants a simple way of reimagine their design and have the code (even edit it and see it on the fly).

It would take a decent amount of work to separate our their UI (HTML + CSS). I wouldn’t even try to replicate their functionality with JS. You’re correct that the front-end of Discourse is a JS app using Ember.js. It’s massive and obviously specific to their back-end API.

At a minimum you’d need their templates and CSS:

https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

Even then it’s very complicated because their templates are in Handlebars and you’d need to basically check the compiled output (in the browser).

Thanx @swalkinshaw for that explanation! Seems like I would get way over my head going that route for and also a bit locked in unless I really learn this Handlebar.js templating engine. Discourse really blew my mind, but adapting its functionality for use in Wordpress and Roots seems less like something I would like to do. I’m still a rookie at Wordpress templating, Bootstrap, jQuery and AJAX, so learning one more vast framework and using it to wield a beast that doesn’t want to be tamed (so to speak) doesn’t seem like a task meant for me at this stage. Once again thanx for your detailed description. Maybe someone more experienced would do go that route and if so can use this thread but for me I’m back to basics and adding Pjax jQuery plugin to the mix, coding ahead in the world of PHP, HTML, CSS, JavaScript and jQuery… :smiley:

Hey @swalkinshaw, does the Discourse WP plugin have any limited functionality as opposed to RoR on its own droplet?

Also, any difference in performance?

I’m a bit confused… if you wanted to run Discourse then you’d need both. The WP plugin just interacts with Discourse itself (the RoR app). It exposes an API that the WP plugin uses.

1 Like

Ah I gotcha. Thanks for clarifying!