Mozilla Community Theme
Last week the localization team deployed a set of customizable web tools as part of an ongoing effort to provide better resources to our communities. The toolkit includes templates for community websites, wikis, blogs, and forums that have all been skinned with a brand new Mozilla Community Theme. This will not only help communities establish their web presence more easily, but it also sets a consistent and professional look across the different community sites that choose to adopt it.
The theme was designed with full flexibility in mind. We wanted to make sure that communities can modify the templates freely and create websites that fit their unique needs. It was also important for the theme to feel “Mozillian” and clearly indicate a connection with the Mozilla Project while still being independent from official web properties like Mozilla.com or Mozilla.org. Finding the right balance between this Mozillian influence and community freedom was definitely a challenge. We needed to capture the appropriate brand elements of Mozilla and present them in a way that wouldn’t get diluted with customization.
The solution included a new logo to serve as the unifying visual identity for all community efforts within the Mozilla ecosystem. As an alternative, the header bars also offer a combination of Mozilla and community branding. These can be deployed separately from the theme and used as a common link between community sites.
For the rest of the page, we looked at the content structure of existing websites to make sure the theme accommodates all the expected functionality and supports the more complex, dense websites that larger communities have. We tested various layouts and documented our progress along the way, incorporating your feedback into the final design. Here is a mock-up of the theme as applied to a simple website:
What you see of course, is just one example. The color scheme, masthead, layout grid, and virtually anything else…can all be changed. Gandalf has set up a customization tool that begins to demonstrate the full range of this flexibility, and will be providing more details on implementation through his blog. You can also dig through the source code and upstream your own modifications.
I think the resulting theme looks absolutely awesome (especially the logo) and I’m really excited to finally see these published. I know that both Seth and Gandalf have been working on this project for a very long time, and I enjoyed working with them in leading the creative direction of the themes. I also wanted to thank Tim Hogan, Stephanie Bankhead, Amit Patel, and Jessica Foster from The Royal Order design team who helped us create the visual theme.
