Hi, I am a moderator on the relatively new Age of Empires Discourse forums and would like to learn how to create a modified theme for the forums which matches the existing website color scheme, fonts and backgrounds which looks good on both desktop and mobile browsers.
The existing “Age of Empires” forum theme is hard to read on mobile browsers and I find myself changing over to the Default theme on mobile all the time to make the site usable. Additionally there are some poor color choices which have low contrast with other forum elements.
Would someone be able to steer me to a noob friendly guide on CSS/HTML for creating a simple yet custom Discourse forum theme? I would like to build the new theme and propose it to the community team for consideration.
There’s not really a guide to HTML/CSS specifically for Discourse, if that’s what you’re looking for.
If you’re somewhat familiar with HTML/CSS the best way to figure out which elements to style would be to use your browser’s inspector (right click, inspect). You can look at mobile view on desktop by adding ?mobile_view=1 to the end of your current URL (go back to desktop with ?mobile_view=0).
If you’re not at all familiar with HTML/CSS, there’s quite a bit to learn. Codecadamy has HTML and CSS tutorials. Mozilla also has HTML and CSS introductions.
Hi @awesomerobot, Thank you for the reply. I will look into the resources you provided.
For a beginner, would HTML or CSS be the easiest way to go?
Without access behind the curtain to the Age of Empires Discourse server, is there a way to export or copy the “Age of Empires” forum theme at the URL provided in my original post so it could more easily be tweaked?
The themes mostly consist of CSS, but since CSS styles are applied to HTML… you really need to know the basics of HTML too. It’s not really a one or the other thing.
You’d have to ask an admin at Age of Empires about that, they can easily export their existing theme from admin/customize (you can then import it to https://theme-creator.discourse.org or your own Discourse site for testing/development).