VanillaForums.org Blog

The latest news on VanillaForums.org and the Vanilla community

CSS Improvements in Vanilla 2 by Mark


dashboard

A big downside of the modularity of Vanilla 2 is that we ended up with far too many stylesheets for theme designers to wrestle with. There was a base stylesheet for the garden application, another for the profile page, another for the activity stream, and then every other application had its own stylesheet as well. This meant that to get an entire site styled, it required that the theme designer edit up to 5 stylesheets just for the basic “Vanilla & Conversations” installation. We did what we could to simplify the stylesheets themselves, and re-use common elements throughout applications – but in the end, as expected, the community came back with many complaints about the difficulties in creating custom css-based themes.

After taking a lot of input from the community, and consulting many colleagues in the graphic design field, we decided to switch things up. This morning I pushed the first revision of our new approach to styling a multi-application Garden site. First of all, we’ve isolated all of the administrative pages to their own admin master view, and their own admin.css file. Second, we took all common elements from the user-facing/front-end pages and consolidated them to a single style.css file. So, the user profile page, activity stream, login page, popups, menu styles, and all common element styles are contained therein. Of course every application (Vanilla, Conversations, etc) will need its own custom css file to handle non-standard layout issues created in new applications, but the application css files are greatly decreased in size.

To put it simply, every user-facing page will use the style.css file, and the related application css file – there should only be two css files on any user-facing page. We also changed the style of the administrative pages using the admin.css file. This was done on purpose to give the user a clear visual cue that they’re in a completely different, admin-only part of the site. For the most part, theme designers will only ever have to touch the style.css file when creating their themes!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • FriendFeed
  • LinkedIn
  • Reddit
  • RSS
  • Slashdot
  • StumbleUpon
  • Tumblr
  • Twitter

Discussion

  1. Excellent. ^.^ This will make styling a lot easier!

    [Reply]

  2. Sounds great; two thumbs up from the peanut gallery.

    [Reply]

  3. Karawynn says:

    That sounds much better. Might I beg for an update to the corresponding theme documentation at http://vanillaforums.org/page/ThemeQuickStart ?

    [Reply]

  4. Mark says:

    @Karawynn – Yes, I’m on it :)

    [Reply]

  5. Trevor says:

    Simple, elegant, and amazing. I love it…

    [Reply]

  6. Vusys says:

    “then every other application had it is own stylesheet as well.”

    “will need it is own custom css file”

    [Reply]

  7. rayk says:

    Awesome changes, I’m glad I held off on starting working on a Vanilla 2 theme :)

    [Reply]

  8. jayden says:

    well written thanks

    [Reply]

Leave a Comment