Site Identity, Part 1

This week I decided I want to work on my site and extensions a bit before I live and breath Mozilla for the next 3 months. Enter the ribbon. It’s something I’ve wanted to do for quite awhile, and it took a bit longer than I expected.

I added what I’m calling a ribbon (unrelated to Office 2007) to the main sites, like this blog. Clicking on it will bring down a menu of other things on

I wanted to be able to easily modify an existing site to use this style and I wanted to be able to modify the menu content in one place, but I didn’t want to use PHP.

I’m pretty happy with the result (I won’t say “Mission Accomplished”), as including the ribbon without gradient can be done by:

        <link rel="stylesheet" href="" type="text/css">
        <script language="JavaScript" type="text/javascript" src=""></script>
        <script language="JavaScript" type="text/javascript" src=""></script>
        <div id="ribbon_menu" style="display: none;"></div>
        <div id="ribbon"><div id="ribbon_logo"></div></div>

… and the gradient is 2 lines more.

The process I went through to create this reveals why it took longer than expected:

  1. Determine color scheme
  2. Make shiny bar
  3. Place shiny bar
  4. Make 4 versions of logo that I’m not happy with
  5. Make 2 entirely functional menus before deciding I want the ribbon to drop down
  6. Fight with IE
  7. Realize that some sites (blog and LSU map) can’t use the gradient
  8. Separate gradient from shiny bar and redo that area of CSS
  9. Deploy to all sites
  10. Fight with trac’s CSS which did not play nicely with mine
  11. Win!

I called this Part 1, but my current plan is basically:

  1. Implement Ribbon
  2. Profit!
  • Cameron

    A cunning plan!

  • Mgccl

    hi, is it ok if I steal your ribbon?