The Blogger WorkShop: March 2007

Saturday, March 24, 2007

DownRight v2.1

March 29:

I was told (and I have noticed) this new DownRight v2.1 Theme doesn't work correctly in MIE < 7!
So the template is down for now.
And I will fix this, of course.

I do apologize to the folks who have tried this v2.1!

Hi Thur,

I use your Downright v1.4 on my blog Bonnie Writes.

I would like to make the whole thing fixed, like you use here on the Blogger Workshop, rather than the fluid that it is now.

Can you tell me what to do to change that please. Because of SEO, I want to have the main load first, [...] .

Thank you for your help, in advance!

Hi Bonnie,

[ status: completed! ]

[ click image to view DownRight v1.4 page ]

[ click image to view DownRight v2.1 page ]

As promised I have copied the original DownRight v1.4, and made some alterations using negative margins, any order columns and opposite floats
(as I gratefully learned from Alessandro Fulciniti)!

Resulting in a DownRight v2.1 Blogger Theme featuring:

3-column
fixed 960px width
Main column loads first

Here is the xml MarkUp:

<div id='content_wrap'>


   <div id='header_wrap'> </div>



   <div id='main_wrap'> </div>



   <div id='leftbar_wrap'> </div>



   <div id='rightbar_wrap'> </div>



   <div id='footer_wrap'> lt;/div>


   </div>

I have tested the v2.1 in MIE 5/6/7, FireFox and Opera (not in Safari!!!).

Notice:

Because the margin settings are very very strict one should not set any border-width to 0px. Alter the border-color to match the page-background-color instead!

Due to those negative margins the Layout in the Blogger Dashboard looks a bit silly. Works though!

Sunday, March 18, 2007

LightBox Photo Cloud

Using about the same Photo Cloud from my the fat trimmed out ...
I just wanna share that fair and fancy LightBox JS v2.0 with you!

Please click any image:

(© me) Lonely little duck left solitary behind

(© me) 35°2 l'après-midi (Château La Tour)

(© me) Boke on the Schiermonnikoog Beach

(© Boke) Me on the Schiermonnikoog Beach

(© me) Blown about elderly doggie on splendid beach

Hovering over every image in the Lightbox triggers a Next or Prev button, where the whole image works as a map. Neat! Simply pressing n or p for navigating to Next or Previous image (and x to close the box) works too.

Please follow that LightBox link for clear instructions and downloads.

Notice:
The viewer must have JavaScript enabled.
When your WeBlog is published on BlogSpot, you must find yourself a shelter to store all LightBox files (js, css and images)!

The LightBox for WordPress:

WordPress (org) on Lightbox JS
WP lightbox JS WordPress plugin

Saturday, March 17, 2007

2.0 needs Rounded Shapes

Web 2.0 needs Rounded Corners?

Sure! Yes Sir/M'am, indeed! But how?

You can use background images (Dan Cederholm) but there are 'rounded corners without images' (Alessandro Fulciniti) techniques as well!

BIG advantage: can easily be implemented in flexible designs.

I took the page from the Creating a Blogger Template (3) - a fluid design thread and embedded the post in a box. To be found here ... have a look and resize your browser window once you are there!

Pretty much all links pointing towards this subject:

Web 2.0 Workgroup: rounded corners!

(Here is a nice one, for example! Airtight Corners: 'Use the offset filter to shift the image 15 pixels in both directions with Wrap Around selected.')

Tuesday, March 06, 2007

Creating a Blogger Template (4)

... Variables ...

This is the fourth part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

Hmmm ... this is (on my account) a rather superfluous thread. All I have to do is point to Google Help > Blogger Help > Working with Blogger > Layouts > Fonts and Colors Tags for Layouts, but this one makes the CaBT tutorials a circle!

A big advantage of the Blogger Layout Feature is the use of (though limited to only fonts and colors) Variables.
(The other one: the Page Element Drag-and-Drop feature - limited within each Blogger Section.)

As explained in the first CaBT:

Notice

<style type="text/css">

</style>

is replaced by

<b:skin><![CDATA[/*
*/

]]></b:skin>

The variables are added, embedded between the comment tags /* */, like this:

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="" description="" type="" default="" value="">

*/

]]></b:skin>

As you can see each Variable has a few obliged attributes:

name: a (technical) unique ID;

description: the (logical) descriptive name - as it will appear in the Fonts and Colors tab;

type: 'color' or 'font' - no more, alas!;

default: the default value *;

value: the new value - can be initially left blank;

*) Attribute default explained: can be a color (a hexadecimal color code) or a font (font-style font-weight font-size font-family) value!!!

Two examples (one for each type):

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">

<Variable name="bodyfont" description="Body Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">

*/

]]></b:skin>

So-uhh, what's the catch?

For each font or color in your CSS code you can use a pre-defined Variable!

Two examples (one for each type):

Instead of

body {
     color: #CCC;
     font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
     }

one can write

body {
     color: $textcolor;
     font: $bodyfont;
     }

So you can define separate colors for fonts, links, hovers, backgrounds, borders, et cetera ... and separate fonts for posts, comments, links, sidebars, headers, et cetera, et cetera.

And you don't have to dive into the xml template every time you feel the urge to change a font or a color. You can control all these in the Fonts and Colors tab on the Dashboard!

Very neat. It really is a pity this handy gimmick is limited to only two types!

What's left, I guess, is learning and understanding CSS.
There are plenty of fine css-link-lists out there!

Some reading:

CSS Beginner Tutorial | HTML Dog
CSS Intermediate Tutorial | HTML Dog
CSS Advanced Tutorial | HTML Dog
CSS Tutorial | W3Schools
Newly Supported CSS Selectors in IE7
Floatutorial | Max Design
A List Apart (hearty recommended!!!)

and so on and so forth

Monday, March 05, 2007

Creating a Blogger Template (3)

... a fluid design ...

This is the third part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

"Yeah, right, of course ..." (you tell me) "That's all really nice and all ... but where is my flexible layout? I want it fluid ... fluid ... fluid ... ."

Let's use that last Main - Column - Column page:

[ click image to view page ]

The following layout styling was implemented:
( see Creating a Blogger Template (2) )

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 560px;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     margin-left: 10px;
     }

#footer {
     padding: 10px;
     clear: both;
     }

To change this fixed layout into a flexible one (all columns fluid) only 3 attributes have to be altered:

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 96%;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 48%;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 24%;
     float: left;
     margin-left: 10px;
     }

#footer {
     padding: 10px;
     clear: both;
     }

Thus: Main - Column - Column all flexible page !!!

See the working Main-Column-Column fluid

[ click image to view page ]

Again this is merely to show how it's done.
Once the structure is created the fun part begins ... .
Remember: all examples in the last 3 posts are (apart from the layout CSS as added in CaBT 2 & 3) still not styled at all.
Everything is pure Browser Default!

Sunday, March 04, 2007

Creating a Blogger Template (2)

... the layout ...

This is the second part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

Let's introduce some basic CSS to give this rough and unformatted page a respectable and decent look!

[ click image to view page ]

First set the body margin and padding to zero:

body {
     margin: 0px;
     padding: 0px;
     }

Use a width (here 960px, so this layout works in a 1024 resolution minimum) and center the content (using margin-left and margin-right = auto):

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

Give the header some inner space:

#header {
padding: 10px;
}

The important part!
For positioning one can use floating divs here.
Give main and sidebars their widths and add the floats and some margins:

#main {
     width: 560px;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     margin-left: 10px;
     }

(Notice both sidebars are styled the same, so we can use a shorthand here!)

Some space inside the footer too, and a clear to make the footer the last one in the page flow:

#footer {
     padding: 10px;
     clear: both;
     }

This resulting in a clean Main - Column - Column page:

[ click image to view page ]

Changing the above into a Column - Main - Column layout is really simple.
Introducing one negative margin and one new margin:

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

These minor alterations (only two margin settings and necessarily changing the one sidebar shorthand) is all it takes to create the following Column - Main - Column skeleton:

[ click image to view page ]

Here in the rear I give you the Complete and Unabridged Template for this last layout.
This is the one I used, so now naturally sidebars and footer do have some Page Elements included:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/

/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

#footer {
     padding: 10px;
     clear: both;
     }

]]></b:skin>
</head>
<body>


<div id='container'>


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>



<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>



<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>



<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>



<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>


</div>


</body>
</html>

This all is not a True Guide nor a profound How-To!
It is merely about the indispensable basics!!
But it shows those basics are essentially all you need!!!

Saturday, March 03, 2007

Creating a Blogger Template ...

... From scratch ...

This is the first part of the Creating A Blogger Template series:

Creating a Blogger Template (1) - from scratch
Creating a Blogger Template (2) - the layout
Creating a Blogger Template (3) - a fluid design
Creating a Blogger Template (4) - variables

As I wrote in the Wonderful Techniques post:
can be pottered easily in(to) ... .

Let's assume you have your own template: just a basic (x)html structure - created using a template generator or maybe you build it yourself or you probably borrowed it somewhere (in that case: be a sport and credit the original designer!).

It should look somewhat like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">

</style>
</head>
<body>

<div id='container'>
<div id='header'> </div>
<div id='main'> </div>
<div id='sidebar1'> </div>
<div id='sidebar2'> </div>
<div id='footer'> </div>
</div>

</body>
</html>

That's a rudimentary, clean, uncluttered template. It can easily be transformed into a Blogger Template. Takes only two steps!

1) Make this a eXtensible Markup Language (XML) document!

Pick a Blogger Template (any!) and copy the necessary code, replacing the (X)HTML heading code with Blogger's XML heading code:

Notice

<style type="text/css">

</style>

is replaced by

<b:skin><![CDATA[/*
*/

]]></b:skin>

Yes, that's all. There you have it: a genuine XML Blogger Template ... .
But empty! So now you should ...

2) add the Blogger Widgets to the body!

As with the XML heading code you can copy the widgets (including the blogger section tags) from any default Blogger Template.

Please read my Save The Widgets !!!.
Make it a habit to comment your code!

Notice it is sufficient to add only

<b:section class='sidebar' id='sidebar1'/>
<b:section class='sidebar' id='sidebar2'/>
<b:section class='footer' id='footer'/>

Once uploaded you can start to Add Page Element(s) there!

This finished example really IS a WORKING Blogger Template - totally unformatted, of course - an adolescent, so to speak.
I just copied that exact code (no more, no less - this sample blog has no css styling at all!!!) in a new testblog. See? Works!

Footer and both sidebars are not visible because no Page Elements were added ... but they are present!

That's how I pottered those Sample Techniques: n01, n16, n26 and n27! Borrowed some structures from Alessandro Fulciniti and made them into ready-to-use Blogger templates.

Like I said before: you probably won't need us anymore!

Friday, March 02, 2007

translatio imitatio aemulatio

I added the following to this (MY OWN) template:

PLEASE DO NOT USE THIS TEMPLATE OR CSS
YOU ARE MOST WELCOME TO DOWNLOAD AND PUBLISH THE DOWNRIGHT V1.4
DO WITH IT WHATEVER YOU WANT
BUT TRY TO BE ORIGINAL
STEALING MY CSS IS NOT!!!

I have noticed the DownRight v1.4 is finding it's way through the blogosphere. Which is a very good thing.

But (only a matter of time) people are starting to use this (the WorkShop's) styling ... my private alterations (the blue and orange h2 boxed titles, the minimal borders, the min- & max-width).

I thought my Terms of Use and Terms of Abuse were pretty clear (and obvious!!!).

( Obviously they never are ... ! )

Thank you for being civilized.

The Blogger WorkShop

Templates

Blogger Themes

WordPress Clones

Blogger Clones

Old Blogger Templates

Old Blogger Clones

Labels

Archives

Terms of Use

Terms of Abuse

Personal Journal

Read there ...

Feed (and all ...)

Saturday, March 24, 2007

DownRight v2.1

Sunday, March 18, 2007

LightBox Photo Cloud

Saturday, March 17, 2007

2.0 needs Rounded Shapes

Tuesday, March 06, 2007

Creating a Blogger Template (4)

Monday, March 05, 2007

Creating a Blogger Template (3)

Sunday, March 04, 2007

Creating a Blogger Template (2)

Saturday, March 03, 2007

Creating a Blogger Template ...

Friday, March 02, 2007

translatio imitatio aemulatio