Spaz Gets Phat

Landscaping Spaz for fun and profit!

For the past several months, I have hardly used open-source Twitter/Identica client Spaz, having been bedazzled by the many bells, whistles and omgfivemillioncolumns!!! of Seesmic Desktop and TweetDeck. Funny, though, my actual participation also dwindled to nearly nill.

Although I won’t claim that abandoning Spaz was the direct or even primary cause of my reduced participation, heading up a brand-new software startup (army of one style), moving twice (don’t ask) and a large family are enough to explain it. Or are they? Just for giggles, I decided this morning to carve out the bottom few hundred pixels of my larger monitor (1920×1200) for Pandora Mini and my Twitter client.

Pandora Mini player takes up little horizontal space, so I felt confident that I would have plenty of usable space left for Seesmic or TweetDeck. Much to my chagrin, neither is very usable without significant vertical space. Sorry boys, Eclipse HAS to win the vertical game (I am getting paid to build software, after all.).

First I resized Spaz to fit the space and realized that the default single tweet per row wouldn’t work.

Spaz wide, one tweet per row

Remembering that I had seen something about ‘user css hacks’ on the Spaz website, I decided to look there for some help. Spaziki to the rescue. I located the css hacks page and looked for one that I could adapt to suit my purpose. Settling on the “Checkerboard” message layout as most likely, I played with it and came up with the following:

div.timeline-entry {
    display:inline;
    float:left;
    clear:right;
    width:225px;
    height:140px;
    border:none;
    margin:0 auto 0 auto;
    text-align:left;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    margin:5px;
}
 
#timeline-prefs {
    text-align:left;
    background-color:#FFF;
}

Which looks like this:

Spaz wide, checkerboard messages

Better, but still not quite what I’m looking for. I couldn’t help feeling that I could make better use of the vertical space, so I went back to the hacks for inspiration.

This time I noticed that there was a hack to place the message box on top. “Aha! I have tons of space in the header for the message box.”, I thought. After a bit of trial and error, I came up with this:

div.timeline-entry {
    display:inline;
    float:left;
    clear:right;
    width:225px;
    height:140px;
    border:none;
    margin:0 auto 0 auto;
    text-align:left;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    margin:5px;
}
 
#timeline-prefs {
    text-align:left;
    background-color:#FFF;
}
 
#entryform {
    top: 72px;
    bottom: auto;
    left: 200px;
}
 
#entrybox {
    margin: 0 60px 0 20px;
    height: 40px;
    -khtml-border-radius: 5px;
}
 
#entrystats {
    left: 28px;
}
 
div.timeline {
    text-align:center;
    border:none;
    background:transparent;
    top:auto;
    bottom:28px;
    left:auto;
    right:auto;
    padding:none;
    margin:auto;
    width:99%;
    overflow-y:hidden;
}
 
.TabbedPanelsContent {
    text-align:center;
    position:absolute;
    top:10px;
    left: 10px;
    right: 10px;
    bottom:10px;
    overflow:auto;
    background:#999988;
    border-top:3px solid #333300;
    border-bottom:3px solid #333300;
}
 
#timeline-tabs-content {
   top: 67px;
   bottom: 26px;
}

Which resulted in the following:

Spaz wide, checkerboard entries, message box top

Much better, but I didn’t like how much wasted space there was at the bottom of each post. So I finally settled on the following:

div.user {width:45px;}
 
img.user-image {width:35px; height:35px;}
 
div.status {margin-left:5px;}
 
a.status-created-at, .status-source {font-size:8px;}
 
div.timeline-entry .status-text {
    font-size:8.5pt;
    font-family: Helvetica, Verdana, Arial, sans-serif;
}
 
div.timeline-entry {
    display:inline;
    float:left;
    clear:right;
    width:282px;
    height:55px;
    border:none;
    margin:0 auto 0 auto;
    text-align:left;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 1px 2px;
    position:relative;
}
 
.status-action {
    position:absolute;
    bottom:5px;
}
 
.status-action-fav { right:53px; }
 
.status-action-retweet { right:37px; }
 
.status-action-dm { right:22px; }
 
.status-action-reply { right: 5px; }
 
div.status-link {
    position:absolute;
    bottom:5px;
    right: 75px;
}
 
.TabbedPanelsContent {
    text-align:center;
    position:absolute;
    top:10px;
    left: 10px;
    right: 10px;
    bottom:10px;
    overflow:auto;
    background:#999988;
    border-top:3px solid #333300;
    border-bottom:3px solid #333300;
}
 
div.timeline {
    text-align:center;
    border:none;
    background:transparent;
    top:auto;
    bottom:28px;
    left:auto;
    right:auto;
    padding:none;
    margin:auto;
    width:99%;
    overflow-y:hidden;
}
 
#timeline-prefs {
    text-align:left;
    background-color:#FFF;
}
 
#entryform {
    top: 72px;
    bottom: auto;
    left: 200px;
}
 
#entrybox {
    margin: 0 60px 0 20px;
    height: 40px;
    -khtml-border-radius: 5px;
}
 
#entrystats {
    left: 28px;
}
 
#updateButton { display: none; }
 
#timeline-tabs: { top:50px; }
 
#statusbar { padding-top: 3px }
 
#timeline-tabs-content {
   top: 67px;
   bottom: 26px;
}

Which yields the layout I call “Phat Spaz”:

Spaz, wide, 2 rows, checkerboard, message top

For those who care to see how it looks in context on the screen:
spaz-gets-phat

Now, I am able to keep my Twitter stream constantly visible, without giving up too much precious screen real estate. I have a feeling that I will be participating in and benefiting from it’s many tidbits and conversations more often.

P.S. Feel free to follow me on Twitter: .

Tags: , , ,

This entry was posted on Thursday, October 29th, 2009 at 10:11 and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply