Blog Bling – Part 1 – Gutter Images

As you can probably see (click here if you’re reading this via RSS, so you can see), I have a whole bunch of customizations and widgets on my blog page. I often get email from folks asking ‘how did you do that’, so I thought a short series on my various tchotchkes might be in order.

I use a heavily modified version of Apache Roller‘s Sotto theme. Some of my customizations are peculiar to the Sotto theme, others to Roller, while some will work on any web page. Your mileage will vary, so take from this what you will.

So… working down from the top of the page, the first customization you come across is the ‘gutter’ – that row of images near the top of the page. The standard Sotto gutter looks like this (from Sandy’s blog@sun):

While the standard images are quite decorative, they’re not really me. I swapped them out for the following:

Customizing the images requires a little (but not much!) knowledge of CSS, so it’s quite instructive to look at how it is done.

The standard Roller Weblog template for Sotto (Preferences/Templates/Weblog/Edit) contains the following:

<div id="gutter">
<span id="gutterimage1">&nbsp;</span>
<span id="gutterimage2">&nbsp;</span>
<span id="gutterimage3">&nbsp;</span>
<span class="floatSpacer"></span>
</div>

So, what’s happening here? We have a <div> element with id="gutter", three ‘non-breaking spaces’ (&nbsp;), each within a <span> element and another empty <span>.

Let’s look in the default Sotto CSS file to see what all those id attributes mean:

#gutter
{
border-top: 0.1em solid #ddd;
border-bottom: 0.1em solid #ddd;
/*background: #eee;*/
height: 52px;
background: #eee url(../images/bannerBackground.gif) repeat-x;
}
#gutterimage1
{
float: left;
margin: 0px;
width: 75px;
height: 50px;
border: 1px solid #ccc;
background: url(../images/daisy.jpg) no-repeat;
}
#gutterimage2
{
float: left;
margin: 0px;
width: 75px;
height: 50px;
border: 1px solid #ccc;
background: url(../images/clouds.jpg) no-repeat;
}
#gutterimage3
{
float: left;
margin: 0px;
width: 75px;
height: 50px;
border: 1px solid #ccc;
border-right: 2px solid #ccc;
background: url(../images/prairie.jpg) no-repeat;
}
/* Further down the file... */
.floatSpacer
{
clear: both;
overflow: hidden;
}

Now we can see what is happening. The #gutter ID selector sets top and bottom borders, height and a background image for the gutter area as a while. The three #gutterimage ID selectors set the properties of the individual images: float to the left, no margin, width, height, border and background – ah ha – this is what we need to change to customize those images. The floatSpacer makes the gutter’s borders work properly – this page gives a good explanation if you’re interested in the technicalities.

To change the images, you have a couple of choices. Perhaps the simplest is to just define your own ID selectors and change the gutter image ID in the Weblog template itself, as Robin did:

<style>
<!--
#myimage1
{
float: left;
margin: 0px;
width: 75px;
height: 50px;
border: 1px solid #ccc;
background: url(/roller/resources/racingsnake/arch2-sm.jpg) no-repeat;
}
/* ...more images defined... */
-->
</style>
<div id="gutter">
<span id="myimage1">&nbsp;</span>
<span id="myimage2">&nbsp;</span>
<span id="myimage3">&nbsp;</span>
<span id="myimage4">&nbsp;</span>
<span class="floatSpacer"></span>
</div>

If you want to keep the same gutter height, you’ll need to size your images accordingly and set the size in the CSS.

Since I had a number of other customizations in mind, I copied the Sotto default.css and changed the properties in place:

#gutterimage1
{
float: left;
margin: 0px;
width: 75px;
height: 50px;
border: 1px solid #ccc;
background: url(/roller/resources/superpat/SmallPat.jpg) no-repeat;
}

If you hover the mouse cursor over the images on my page, you’ll notice that there is popup text for each one. I was lazy here – rather than figuring out how to do it in CSS, I just put a title attribute on each <span> element:

<div id="gutter">
<span id="gutterimage1" title="Me">&nbsp;</span>
<span id="gutterimage2" title="My beloved">&nbsp;</span>
<span id="gutterimage3" title="Rascal &#35;1 - Tom">&nbsp;</span>
<span id="gutterimage4" title="Rascal &#35;2 - Alex">&nbsp;</span>
<span id="gutterimage5" title="1996 Porsche Carrera 4 Cabriolet">&nbsp;</span>
<span class="floatSpacer"></span>
</div>

And that’s all there is to it. Next time I’ll look at the tag cloud – the group of links just below the gutter. Until then – happy blogging!

links for 2007-03-24

Chatting with Radia

One thing I’ve been meaning to blog about for weeks is my participation in Sun’s Engineering Enrichment and Development (SEED) mentoring program. Katy Dickinson runs SEED – she recently posted this compendium of articles – everything you need to know about SEED is there.

Anyway – I hit the jackpot with my mentor – Sun Fellow Dr Radia Perlman. You may know Radia as ‘Mother of the Internet‘, inventor of the Spanning Tree algorithm and author of Interconnections: Bridges, Routers, Switches, and Internetworking Protocols. SEED participants have to select several potential mentors, writing a few sentences about each one. Here is what I wrote about Radia:

I started the current arc of my career in 1997, implementing SSL in Java and contributing to a ‘clean room’ implementation of JCA/JCE. Radia Perlman has been a familiar name to me since that time, given the security aspects of her work.

Not only does Radia have DEEP technical knowledge, she combines this with a refreshing willingness to speak her mind. When I received a comment on my blog asking about ‘Identity Based Encryption’, I fired off an email to Sun’s internal security mailing list to find out more. Radia gave a detailed and comprehensive reply, with permission to quote her on my blog.

Since security is an essential part of my work, and identity is a key consumer of Radia’s work, there is a certain synergy possible in Radia mentoring me.

Our mentoring relationship comprises a phone call every couple of weeks and face-to-face meetings if we ever end up in the same city at the same time. I have to admit, I was pretty intimidated the first time I called Radia – she is not exactly a shrinking violet – but we seemed to hit it off and have spent several hours – well – chatting, basically.

Chatting about her work, my work, career progression at Sun and anything else that’s on our minds. I get a lot out of it, I hope Radia does too, and it’s fun. And, let’s face it, that’s about 50% of Sun’s unofficial mission statement 🙂

New Podcast Posted – OpenSSO: Bridging the Gap

Catching up on the blogging – it’s amazing how time flies by when you’re doing ‘real work’!

Last Friday, Brandon Whichard, Don Bowen and I recorded a podcast in Sun’s Identity Management Buzz series. There was no agenda – Brandon, Don and I just chatted about what’s new, including OpenSSO, its Extensions sub-project and OpenID. As the podcast was recorded on St Patrick’s Eve, we even get to the subject of leprechauns and their gold…

Listen Now [MP3] or Subscribe via iTunes

Latest OpenSSO Extension: SAML 2.0 on Ruby

UPDATE 21 March 2007 – I missed a couple of steps, including, ironically, installing the SAML 2.0 Ruby code. All should be well now.

Hot on the heels of our launch of OpenSSO Extensions comes the latest extension, contributed by Todd Saxton from New Zealand: a SAML 2.0 relying party implementation in Ruby (already noticed by the sharp-eyed Tatsuo Kudo, here). Todd used the existing SAML 2.0 PHP relying party (formerly known as Lightbulb) as a starting point and ported it to Ruby, using Roland Schmitt’s WSS4R to handle the XML Security chores. Note that both the Ruby and PHP SAML 2.0 relying party implementations are very much ‘proofs of concept’. They successfully complete SAML 2.0 single sign-on and single logout, but are not to be considered production quality. In particular, Andreas Solberg has identified some bugs and shortcomings in the PHP implementation and kindly offered to contribute his fixes (nudge!).

I just downloaded the Ruby SAML 2.0 code and… it works! I made one minor fix to account for differences in my environment, but everything else was just configuration. Here is a checklist of what you’ll need (I used this very useful HOWTO on Rails installation as a base):

  • Install Ruby – I have version 1.8.4, installed into Ubuntu via apt-get.
  • Install RubyGems – I have version 0.9.2.
  • Install Rails – I have version 1.2.3, installed via gem.
  • (Optional) Install Mongrel – I have version 1.0.1, installed via gem.
  • Install WSS4R – I downloaded the tarball and ran ruby setup.rb.
  • Install LOG4R (needed by WSS4R) - I used gem install log4r.
  • Checkout the SAML 2.0 Ruby source from opensso.dev.java.net (it's in opensso/extensions/saml2ruby/source). Instructions for getting the code via CVS.
  • Patch the WSS4R library's xmlcanonicalizer.rb according to the instructions in saml2ruby's INSTALL file.
  • Edit saml2ruby/source/examples/rails/SimpleSAMLRP/config/environment.rb and change RAILS_GEM_VERSION to match what you have. There may be cleaner ways of doing this, but this is what worked for me.
  • Edit saml2ruby/source/examples/rails/SimpleSAMLRP/app/controllers/account_controller.rb and change the SP and IdP settings to match your environment.
  • Run the server - from saml2ruby/source/examples/rails/SimpleSAMLRP do mongrel_rails start or ruby script/server.
  • Now browse to http://myserver.mydomain.com/3000/account/login and you should be redirected to authenticate at the IdP. On successful authentication you should be sent back to the Ruby SP example app which will report a successful login.

So - if you're a Ruby-ist (Ruby-ite? Rubier?) and you need SAML 2.0, go grab saml2ruby!

Lightbulb is Dead; Long Live OpenSSO Extensions!

Last October, we released the first SAML 2.0 implementation in PHP, codenamed ‘Project Lightbulb’ (because Lightbulb fits into LAMP) and a sub-project of OpenSSO. In the few months since then, other folks have proposed similar extensions to OpenSSO, and the ‘Lightbulb’ name has looked increasingly anachronistic, particularly since the core OpenSSO project has always fully supported LAMP with its Apache HTTP Server and Tomcat policy agents.

Today, we launch OpenSSO Extensions, OpenSSO’s code incubator, with three initial modules:

So – what is an OpenSSO Extension? Well, it’s any piece of code that either

  • extends OpenSSO to provide new functionality, for example, the OpenID identity provider, or
  • interfaces with OpenSSO, extending other systems, such as the PHP Client SDK and SAML 2.0 relying party.

If you have an idea for extending OpenSSO in an interesting way, then click here to participate!

Great Customer Service

I got into my car last night in the Sun parking lot at the Santa Clara campus, pulled away and immediately heard a “Schlup, schlup, schlup” from the rear of the car – I had a flat. Of course, I had everything I needed to fix it… except a pump. AAA were there within the hour, diagnosed the problem as a nail embedded in the tire, changed it for the space saver spare and I was on my way home. Quick, efficient, friendly service. You expect nothing less from AAA.

This morning I took the tire and my car to Wheel Works’ Los Gatos store. They confirmed that the tire was repairable and fit the job in without an appointment. I spent an hour in their lobby, enjoying their free wifi (well, I assume the default ‘linksys’ ESSID was theirs Smile!) and doing some email. When they handed the car over, I asked for the bill, only to be told “Oh – there’s no charge – you bought the tires from us”. They had repaired the damage, put the space saver back in its space in the luggage compartment and put all my gear back on top neat and tidy, all free of charge. Like I said in the title, great customer service.