The Making Of "Floating Boxes"

It started of as an idea to project a text stream via a projector on the wall for an exposition. Therefore we came up with a fresh design http://ttxt-design-02.blogspot.com/. As we do, we turned it into a generic template instruction called "floating boxes". If you like it just follow the steps described on the blog.

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