About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Blogger. Templates. Designed.

Note: My tem­plate set has been updat­ed — get the scoop here »

bloggerI’ve been wait­ing to write about this for months now. Real­ly. Blog­ger has final­ly relauched with a snazzy new look cour­tesy of Dou­glas Bow­man and Adap­tive Path. The new Blog­ger fea­tures not only a nicer, rounder design, but also a much-improved process for cre­at­ing and man­ag­ing blogs — and a bevy of fresh tem­plates designed by some famil­iar names.

Brand Name Designers

Doug recruit­ed some ter­rif­ic design­ers to design and style brand new, stan­dards-based tem­plates for the relaunch (in addi­tion to the fine tem­plates he con­tributed), and I was hon­ored to be one of this select group: Dan Ceder­holm, Todd Dominey, Dave Shea and Jef­frey Zeld­man all cre­at­ed some fan­tas­tic designs for the new tem­plates (view a list of all the tem­plate designs).

Beautifully Generic

The trick with this project was to design some­thing visu­al­ly fetch­ing, but not too per­son­al (the pri­ma­ry func­tion is a reusable tem­plate, which might dis­play many dif­fer­ent types of con­tent), yet indi­vid­ual enough to inspire some­one to actu­al­ly use it.

Your tem­plates real­ly stand out to me as hav­ing a per­son­al­i­ty while still pre­sent­ing a ‘gener­ic’ feel…” Dan Ben­jamin

My pri­ma­ry goal was to design a base tem­plate that would work in many sit­u­a­tions, for many dif­fer­ent peo­ple. The best way to accom­plish this from the out­set was to lim­it the col­or palette to sim­i­lar hues, which also made it eas­i­er to cre­ate alter­nate col­or schemes that have a fair­ly dif­fer­ent look with­out hav­ing to change any of the base elements:

For the design, I want­ed to play a lit­tle with gra­di­ents, as well as try some lay­er­ing of back­ground ele­ments in CSS to cre­ate sub­tle effects (as it turned out, they are extreme­ly sub­tle). I end­ed up apply­ing gra­di­ents to every pri­ma­ry ele­ment, though chances are you won’t notice them all right away.

The sub­tle gra­di­ents gen­tly direct the eye down the page, and cre­ate the slight decrease in con­trast of the back­ground arrows in the side­bar as they move fur­ther down the page (get­ting clos­er to the dark­er col­or of the gradient).

Standards for the People

The num­ber of peo­ple who will make use of these tem­plates is astound­ing (it’s already start­ed), and the web is going to be a much bet­ter place for the effort (just think of the hun­dreds of thou­sands of sites that will soon be using well-designed stan­dards-based markup!). I’m very hap­py with how Thi­s­away turned out, espe­cial­ly the alter­nate col­ors. I think it fits in nice­ly with the look and feel of the new Blog­ger (though that was entire­ly acci­den­tal, since none of us saw the design before Sun­day), and com­pli­ments the oth­er new designs while remain­ing unique.

Con­grat­u­la­tions, kudos and thanks to Ev and the rest of the Blog­ger crew, as well as Doug and the folks at Adap­tive Path for allow­ing such a ter­rif­ic team of design­ers to con­tribute to this project.

Blog­ger tem­plate ques­tions? Please search and/or post to the offi­cial Blog­ger Help Google Group—you are much more like­ly to get a response there than by email­ing me.

This item was posted by Dan Rubin on Wednesday, May 12th, 2004.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

33 comments on “Blogger. Templates. Designed.”

  1. Posted by Jon Hicks on Wednesday, May 12th, 2004.

    Dan? Is that real­ly you? This isn’t Didi­er pre­tend­ing is it?

    Nice work by the way! Must be good to final­ly see it out in the open…

  2. Posted by emilio on Wednesday, May 12th, 2004.

    Hap­py to read you again, Dan!

    Ter­rif­ic work on the templates!


  3. Posted by Dan Rubin on Wednesday, May 12th, 2004.

    Thanks guys, yes, it is me :)

    It’s very nice to see some­thing like this come to fruition — it was a small project com­pared to most (2 days from start to fin­ish), but the poten­tial pos­i­tive impact on the web is huge.

    BTW Jon, I just love your Thun­der­bird icon, you astound me again and again :)

  4. Posted by Emilio on Wednesday, May 12th, 2004.

    but the poten­tial pos­i­tive impact on the web is huge.

    it is!


  5. Posted by Andrew on Wednesday, May 12th, 2004.

    I like almost all the new blog­ger tem­plates but I think they look ugly with the google adds above them… maybe its just me but I think I’m right.

  6. Posted by Dan Rubin on Wednesday, May 12th, 2004.

    Andrew: I agree com­plete­ly about the ban­ner ads, and I’ve already asked Doug if it’s pos­si­ble for us to tweak our designs so they work bet­ter with the ads (we did­n’t know the ads would be in place until the redesign launched on Sunday).

    Thi­s­away” was designed to have zero mar­gin at the top of the brows­er win­dow, so it’s pos­si­bly affect­ed more than the oth­er tem­plates. Hope­ful­ly the Blog­ger team will allow some tweaks, or per­haps include an addi­tion­al <div> when the ban­ner is present so we can apply a style that “fix­es” the display.

  7. Posted by Cory on Thursday, May 13th, 2004.

    Your Thi­s­away Blue style is beaut­fi­ul… and I use it on my Blog­ger-pow­ered Weblog. (Link with­eld for pri­va­cy reasons.)

  8. Posted by Bonnie on Thursday, May 13th, 2004.

    Thi­s­away Rose is the one I’ve cho­sen. I think it’s love­ly… As I’m teach­ing myself CSS, it’s also help­ful to see how you’ve con­struct­ed it, as a ref­er­ence as I begin to try my own designs. Thanks!

  9. Posted by Dan Rubin on Friday, May 14th, 2004.

    Thanks Bon­nie, it’s nice to know that folks are using the new tem­plates so quick­ly, and I appre­ci­ate your praise of Thi­s­away Rose (the most fre­quent com­ment I’ve received so far is how much peo­ple love the dif­fer­ent col­or schemes, since they each set their own dis­tinc­tive mood).

    The CSS is a study in quick, clean styles (or at least, it should be since there was­n’t much time avail­able to put it togeth­er), so you should be able to learn some­thing from it :)

  10. Posted by Alex Giron on Monday, May 17th, 2004.

    Very nice tem­plates… I par­tic­u­lary like the rounders packs.

    Great job.

  11. Posted by cesar on Sunday, May 23rd, 2004.

    hi dan.

    i´m new to blog­ger and i´m using your thi­s­away tem­plate, which i like a lot. unfor­tune­taly, when i reached my 30th post the pro­file col­umn just went doooown to the bot­tom of my page. and i don´t know how to solve this prob­lem, since i know almost noth­ing of html. i don´t know if i´m the only one with this prob­lem, but, any­way, would you –or any­one read­ing this– give me a tip on what to do?

    thanks in advance, and greet­ings from perú!


  12. Posted by cesar on Sunday, May 23rd, 2004.

    mmm. by the way, my blog url is http://estosdias.blogspot.com/



  13. Posted by carl guillen on Wednesday, June 16th, 2004.

    i use Thi­s­away for one of my sites. i think it is the best I have seen so far. It would be great if more col­ors scemes exist­ed for it. I am toy­ing around with chang­ing the col­or scheme. any plans for more col­ors? any tips on chang­ing to a cus­tom col­or scheme on the Thi­s­away template?

  14. Posted by dodo on Monday, June 21st, 2004.

    i love the lay­out. so clean and refresh­ing. i’m using it.

  15. Posted by pp on Tuesday, June 22nd, 2004.

    I love the Thi­s­away Rose design! It is what I am using now and if you go to my blog site you will see that there is a bug some­where which is caus­ing the side­bar not to wrap prop­er­ly. Help! This only start­ed hap­pen­ing yes­ter­day and I would real­ly rather fix it than change to anoth­er tem­plate. Thanks in advance…

  16. Posted by Brian on Monday, July 5th, 2004.

    I think your prob­lem is some­thing in one of your posts might be stretch­ing too far like a large image or past­ed text, try chang­ing the post that you made when the side­bar went to the bot­tom. Thats what hap­pened to me and I changed it and it worked. I think the lay­outs are pret­ty good though but I’m using one that come from anoth­er web­site called http://blogger-templates.blogspot.com.

  17. Posted by ka edong on Tuesday, July 20th, 2004.

    Hi Dan,

    I’m using your tem­plate in my blog at http://technobiography.blogspot.com .

    1.) I’ve been try­ing to, but could­n’t fig­ure out how to put a “Next »” link at the bot­tom of the homepage. 

    2.) Also a “More »” link below the last blog title. 

    For exam­ple, on the upper right side, we’d see some­thing like…

    Title 1

    Title 2

    Title 3

    What I hope to do is have a …

    Title 1

    Title 2

    Title 3

    More »

    And also …

    Title 12

    Title 13

    Title 14


    Do you think you could help me with this?



  18. Posted by Helen on Saturday, July 24th, 2004.

    Hi, Dan!

    I’va just checked up the templates.

    Great work!

    What I do appre­ci­ate is alter­nate col­ors. Styl­ish, cool, appeal­ing :) You must have been inspired while cre­at­ing it!

    Helen, design­er

  19. Posted by lawnorder on Tuesday, July 27th, 2004.

    I’d like to con­grat­u­late you on your Thi­s­away blue tem­plate. I just love it!

    Like edwin above, I’d like to ad a “more” on my tem­plate but my CSS is very rusty.

    Can you point us out in the right direc­tion ? Is there a site were dif­fer­ent blog­ger tem­plates are discussed ?

    I wish Blog­ger would add a page with FAQs and resources for peo­ple who want to tweak the base templates!

    Thanks again for your won­der­ful blog template!


  20. Posted by Jenny on Tuesday, August 10th, 2004.

    some of those look good any­where. i have a friend who’s using your deis­gn on her site (http://pure-essence.net). b2. looks very nice.

  21. Posted by Jonnie on Thursday, November 4th, 2004.

    Good Read

  22. Posted by LN on Wednesday, November 17th, 2004.

    It appears that your tem­plates do not work with Firefox.

  23. Posted by Dan Rubin on Tuesday, November 23rd, 2004.

    Hi LN, could you cite an exam­ple for me? The tem­plates were test­ed pri­or to release with the most cur­rent ver­sion of FF avail­able at that time, and no updates have been made to the tem­plates since, so it is pos­si­ble that a dif­fer­ent ver­sion of FF has intro­duced some dis­play issues. If you could let me know which ver­sion you are using, and pro­vide a URL which dis­plays the prob­lem (as well as a detailed descrip­tion), then I can take a look.

  24. Posted by Scott on Tuesday, December 7th, 2004.

    Hi, Dan. A friend of mine (see URL) is using Thi­s­away Rose, and is hav­ing a prob­lem with the col­ors not fol­low­ing the orig­i­nal design down the entire page. I’m using Fire­fox, so I thought it was just her, but I viewed it in IE, and it works fine. I’m using the most recent ver­sion of Fire­fox (1.0), and it is real­ly dis­tract­ing. Any ideas?


  25. Posted by Natalie on Tuesday, December 14th, 2004.

    hi Dan… I am a new user of the blog­ger. As I saw your tem­plate (Thisway Rose), I instant­ly like it so I picked it as my tem­plate. There are arrows graph­ic on the right top of the side­bar and along that, I put dis­trib­u­tor and archives list there. But a month lat­er, it moved itself to the right bot­tom of the side­bar, I tried to change some­thing on the tem­plate set­ting but it does­n’t go back to its orginal posi­tion. Could you please give me any sug­ges­tion to this prob­lem? Thanks.

  26. Posted by Markavian on Tuesday, December 21st, 2004.

    Hey Dan,

    Thanks for your work on the Thi­s­away design for Blog­ger. I think the lay­out of the dif­fer­ent ele­ments is great. I’ve start­ed tweak­ing it with my own set of colours and back­grounds for a new project/blog that I start­ed recently. 

    It took me a while to fig­ure out how you’d set out the back­ground images. To be hon­est I was quite annoyed that you’d used a sin­gle back­ground image across the main con­tent area and the links bar on the far right, that kin­da thing gets on my nerves. I’d much pre­fer that they were sep­a­rate con­tent areas that (if need be) could eas­i­ly be shift­ed around, e.g. if you want to switch the links bar on the left from the right.

    Any­way, great job, thi­s­away is a very pleas­ant gener­ic design thats invit­ing, as you put it. 

    — Markavian

  27. Posted by soph on Tuesday, December 28th, 2004.

    hi dan, I’m using thi­s­awayn rose and mine does­n’t wrap prop­er­ly either. I don’t want to have to change my post because what’s the point of a blog design when it rpevents us fro writ­ing what we want to write just so the design can stay in place? Nonethe­less, I think thi­s­away rose is real­ly very nce so please send me the cor­rect­ed code some­time? Thanks.

  28. Posted by scott on Sunday, January 2nd, 2005.

    Amaz­ing work! I love the new templates!

  29. Posted by edwin on Monday, January 31st, 2005.

    dear natal­ie and soph, 

    i’ve been using Dan Rubin’s tem­plate eversince is start­ed blog­gin this year. 

    I’ve expe­ri­enced wrap­ping prob­lems, espe­cial­ly the one where the right side bar goes to the bot­tom of the page. These are the rea­sons I have found that lead to this kind of problem:

    a.) the use of the ital­ics tag [i][/i]
    b.) an image (or text) on the right side bar that has a width wider than the right side bar
    c.) an image (or text) on the body of the web­site that has a width wider than the body col­umn. (see http://technobiography.blogspot.com/2005/01/sms-via-web-will-it-ever-die.html for an example)

    so what i’ve done is to avoid ital­ics tags, put the “width” tag on my image tags and lim­it the use of looooong urls that tend to mess up the lay­out of Dan’s template. 



  30. Posted by Dan Rubin on Friday, March 4th, 2005.

    Many thanks to Edwin for fol­low­ing up with his solu­tion to the wrap­ping prob­lem — I’ve been toy­ing with the var­i­ous problem/solution com­bi­na­tions for a while now, and have been remiss in post­ing my updates.

    I’m prepar­ing a few test cas­es right now, sim­ple, basic exam­ples of the main prob­lems folks have been run­ning into with Thi­s­away, and will be post­ing the infor­ma­tion soon (I’ll also address any spe­cif­ic con­cerns or ques­tions post­ed here or emailed to me by users, so if you’ve had a ques­tion unan­swered, it won’t remain that way for much longer).

  31. Posted by Will on Wednesday, March 16th, 2005.

    Hey dan, loved your designs espe­cial­ly how you men­tioned about using gra­di­ents; what an aswe­some idea! i checked out the link in the stan­dards for the peo­ple and it was the first thing i noticed while vis­it­ing that link, i’d love to know how you did that as i would like to imple­ment this in the tem­plate i am cur­rent­ly work­ing on (cur­ren­ly learn­ing css) any help would be great­ly appreciated.

  32. Posted by Court Rye on Friday, April 1st, 2005.

    hey Dan, I chose to use the Min­i­ma tem­plate as a base to make a flex­i­ble lay­out for blog­ger. I host all my own stuff and spent some time try­ing to work out all of the glitch­es, your site real­ly helped and had some great resources and an awe­some community!

    One thing I have noticed is that when I scale the win­dow size small­er (drag the win­dow to a small­er width) my right hand “con­tent” area drops down at a cer­tain point. Is there any way to fix this? I used float­ing and had to float my con­tent right while the nav­i­ga­tion bar floats left to get the edges to align but I left extra space in my per­cent­ages hop­ing to solve the over­flow problem…

    I guess it’s close enough :) come check it out at http://court.ryefamily.net/blog/

    thanks again!

  33. Posted by sibyl on Sunday, April 3rd, 2005.

    Your Thi­s­away Blue design worked great with the name of my site–Indigo Warp! I also found it easy to cus­tomise; added a back­ground of my own, and changed a few things around.

    I’ll add a link to your site soon.