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.

Picture 8 copy

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:

Picture 13

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.

Picture 10

6 Responses to “ Mozilla Community Theme ”

  1. John Slater Says:

    Great stuff! Kudos to you and everyone else who made this happen.

  2. dao Says:

    Yeah, the logo is great, although it shouldn’t be repeated in the header bar when it’s already part of the main header.

  3. Tara Says:

    - Thanks John!
    - And yes, I agree that the logo doesn’t need to be repeated in both the header and the masthead. But keep in mind that communities are offered a combination of options to choose from, so ideally they’d mix the elements to avoid this type of repetition (choosing a different header bar if the logo is already present right below it, etc..)

  4. Ken Saunders Says:

    This is so very cool!
    You’ve all done an awesome job!

    -(pause for ovation and long applause)-

    Is there any documentation online yet about what exactly defines and qualifies a site as being a Mozilla community one? I see great potential for abuse and fraud without having guidelines put in place before this hits the entire Internet.

    I’d really hate to see the new Mozilla Community logo on Tiffany-88’s MySpace page along side of sparkly Care Bears, or the theme being used on sites with content that doesn’t directly pertain to Mozilla or that just has a download Firefox button on it. Or even worse a site with no official affiliation to Mozilla offering downloads of Mozilla’s products.

    I think that a review and oversight team would be a good idea to establish guidelines for the Mozilla Community theme and logo usage. Having a team would reduce the burden of one person trying to respond to guideline violations.
    Some ideas for those guidelines could be to require that sites that wish to use the Mozilla Community theme must maintain or provide a certain percentage of Mozilla related content. That the community logo can only be used with the theme with exceptions for press and media etc. And also any sites using the Mozilla Community theme must register it and include information like the purpose of their site, its content, how it pertains to Mozilla etc.
    That would make it a lot easier to keep an eye on how it’s being used.
    And finally, including the guidelines and terms of use along with the items that are available for downloading isn’t a bad idea.

    Just my thoughts and opinions and things that I’d like to know personally because I’m very interested in using the resources myself but I don’t want Tiffany-88 to use them.

    By the way, when I started writing this I had no idea at all that there was an actual Tiffany-88 on MySpace. I don’t know if she has sparkly Care Bares though. I just Googled the name.
    Go figure. :|

  5. about:mozilla - Final 2010 goals, Firebug, add-ons, Labs, Snowl, Community theme, Camino, and more… | Bits & Pieces Says:

    [...] Shahian writes, “Last week the localization team deployed a set of customizable web tools as part of an ongoing [...]

  6. about:mozilla - Final 2010 goals, Firebug, add-ons, Labs, Snowl, Community theme, Camino, and more… | Bits & Pieces Says:

    [...] Shahian writes, “Last week the localization team deployed a set of customizable web tools as part of an ongoing [...]

Leave a Reply

” onclick=”return fbs_click()” target=”_blank”>”Share