Optional: Border Around The Navigation Tabs

Here is the code, below a preview, we decided against using that, it's just a bit too noisy. Though it might be an interesting option as a standalone feature on the simple blog (remove the "$" in the CSS code, if you want to activate the setting):



.tabs-inner .widget ul, .tabs-inner .section:first-child ul {
position: relative;
$margin: 60px 0 20px 10px;
padding: 10px 15px;
background-color: white;
$$$$border: 10px solid #BAD304;
border: 10px solid #33aaff;
-moz-box-shadow: 20px 20px 30px rgba(0, 0, 0, .2);
-webkit-box-shadow: 20 20 30px rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 20 20 30px rgba(0, 0, 0, .2);
box-shadow: 20px 20px 30px rgba(0, 0, 0, .2);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;
}

Todos

• More space between the posts. 
• More space between the posts and the floating boxes.
• The Post-Footer box containing the Author, the time stamp, the share buttons, the comments and the labels, may benefit from an even lighter grey.
• The gadget titles will become dark grey.
• Maybe a bit more padding in the boxes, the text is a bit too close to the top and bottom border.
• Replace the Blogger "Attributions" Footer by our own "Attributions" version, which will add the copyleft statement, the disclaimer (and impressum, cause we are based in Germany) and some links
• Mess with the Tab-Navigation for "pages". We haven't yet added a navigation menu and we will probably change it a bit.
• Maybe we'll try to move the header (Blog Title and Description) to the right. Add a box to the header. As we have made room on the left of the page, we can try to move the post-section up. We'll see.

Applying the blue floating boxes only to the right column

Before our CSS code applied to all elements in the "main-inner" region of the page. By changing
.main-inner
to
.column-right-inner
we limit the sexy blue boxes to the right side of the blog.

I just realised that the moz / webkit / goog-ms box-shadows differ (see below). My mistake, too many trial and error tests, will soon be corrected.
Here is the full code:

.column-right-inner .widget {

position: relative;

margin: 60px 0 20px;

padding: 0 15px;

background-color: white;

$$$$border: 10px solid #BAD304;

border: 10px solid #33aaff;

-moz-box-shadow: 20px 20px 50px rgba(0, 0, 0, .2);

-webkit-box-shadow: 10 20 30px rgba(0, 0, 0, .2);

-goog-ms-box-shadow: 0 0 50px rgba(0, 0, 0, .2);

box-shadow: 40px 30px 30px rgba(0, 0, 0, .2);

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

-goog-ms-border-radius: 15px;

border-radius: 15px;

}

Some small touches to finalise the first version

The Blogger navbar is visually too "loud", we tone it down. That is done in the the Blogger Dashboard <Design -Page Elements>. If you want the navbar to disappear, simply add #navbar {display: none;} in the Advanced-Add CSS field.

Then there is the Blog Title color, we switch to a humble gray.

And thats it for now. later we will simplify the "post" element. Our initial design brief called for a simple and readable list of messages. Therefore we'll remove the border and shadow around the "post" section on the left of the blog.

The CSS code which transforms Simple to Floating Boxes

After applying the CSS changes

Before (Simple)

.main-inner .widget {

position: relative;

margin: 60px 0 20px;

padding: 0 15px;

background-color: white;

$$$$border: 10px solid #BAD304;

border: 10px solid #33aaff;

-moz-box-shadow: 20px 20px 50px rgba(0, 0, 0, .2);

-webkit-box-shadow: 10 20 30px rgba(0, 0, 0, .2);

-goog-ms-box-shadow: 0 0 50px rgba(0, 0, 0, .2);

box-shadow: 40px 30px 30px rgba(0, 0, 0, .2);

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

-goog-ms-border-radius: 15px;

border-radius: 15px;

}

Where to begin?

Before developing this version of floating boxes, we created a few test blogs with blogger. The first versions where based on the Blogger.com template "Awesome Inc." by Tina Chen tinachen.org. To be exact is is the greenish one we chose, because the blog design elements have rounded corners and have a shadow.

This time we'll try to use Blogger.com's "Simple" template and copy some of the CSS code from our Awesome Inc based test blogs. The main reason to use the white Simple Template by Josh Peterson www.noaesthetic.com is to simplify the overall CSS. Rather than having lot's of CSS code simply to overwrite existing parameters, we simply explicitly insert the ones we want.

The Blogger Template Designer is offering lot's of great options to change the chosen template and really adapt to your needs and wishes. But not all layout features can be configured, for example the level of transparency / opacity. Or to add, delete or change shadow effects of layout elements.

Therefore trying a number of templates is normal. Which is a bit frustrating, because you can't save your changes and you cannot migrate them to another template.

As a reminder to ourselves, an idea is to create a template designer spreadsheet which lists all the features and options of a template. Here is a link to that wiki spreadsheet http://shortlinks.tickertxt.org/bloggertemplatefeatures

The design specs

• The messages should be readable, without visual noise. Attractive but not distracting.
• Yet it should feature some colors to be noticed by visitors when in proximity.
• As the primary ticker display is a projection, all usual interactive features of blog-like sites should be hidden
• The public ticker simply adds a few links for more information, but basically stays true to the simplicity of the ticker.
• The ticker should also prominently invite people to participate and also make it clear to the visitors who is behind this project.
• Not to waste any screen space, top and bottom needed to be as small as possible.
• The museum ticker projection does not have a header or footer, we will try to either minimise or change the template layout.

Our intention of this design

At tickerTXT we wanted to update the design of our ticker application. In this case the ticker has been conceived to serve initialy like a SMS feedback guestbook for visitors of a museum. These messages are displayed onto a wall with a projector.

Our first ticker was a rough prototype used in a context of a two week long small exposition in automn last year. 

For this project, the design spec was to simplify the look. Although the aim is still to display the messages chronoligically, newest messages first, we wanted to soften the blog or twitter like look. We wanted the visitors to be attracted to the "message wall", take their time to read them and feel inspired to take out their mobile phone and add a comment by sending their own text message. 

Floating Boxes - a fresh looking blogger template

This template has been produced as a prototype for a tickerTXT ticker wall projection. Because we have become Blogger specialists and ticker is technically not that different from a blog, we decided to create the design mockup with the help of the template designer. BTW nearly all of our development as well as project infrastructure is based on Googles' incredible range of products, from Google App engine, Google maps to Google Apps and of course Blogger.

And of course if the result is a nice deign, why not using it as a blogger template. So here we go.