The Blogger WorkShop: templates

Showing posts with label templates. Show all posts

Thursday, April 19, 2007

DownRight v3.0

After the last tribulation (a not working DownRight v2.1 - in MIE5/6, that is!) here is a new DownRight (fixed 960px width) v3.0.

Hmmm ... right! ... the main column does not load first.

Apart from that this one is healthy!

[ click image to view DownRight v3.0 page ]

At work The White Knight Is Talking Backwards ... so I cannot find the serenity to tackle the little v2.1 bugger.

I'll visit my cherished Skiermûntseach first (a tranquil Week Off: strolling the beach - enjoying my company - reading Pratchett - flying my kites) ... !

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!

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!

Wednesday, February 28, 2007

Sample Techniques

Here we go: all layouts fluid (or partly, in case of n16):

The html structure is the same in all 4 pages - hence: any order columns!!!

There are only some differences (margin and width) in each layout's identifiers content, column1, column2 and footer.

Works like a charm in MIE6/MIE7 and Firefox - almost perfect (good enough) in Opera. I haven't loaded them in Safari!

And before I forget: here is a link to Alessandro Fulciniti's great page: Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!.

Err .. I guess you do not need me anymore :-)

Sunday, February 25, 2007

Wonderful Techniques

Right, so we (I) just talked about fixed vs. fluid. Regardless of my personal taste many blogmasters are on the lookout for flexible layouts.
+
Recently discovered a great page where this guy presents 40 CSS layouts based on negative margins, any order columns and opposite floats.

Last weekend I ported one layout to Blogger:

Can be pottered easily in(to) ... 1-column, 2-column, 3-column, columns horizontally or vertically arranged, all columns fluid, all columns flexible, et cetera (and every other possible combination) ... whatever!

Saturday, February 24, 2007

Fixed vs. Fluid (reprise)

On the last thread Prasad Ranatunga commented: "There few problems I see in this test. The Width of the blog is limited, unlike the ones U made in earlier version, which is width of the browser."

True, though I do not see this as a problem!

I am not going to explain (or comment on) the pro's and con's of fluid and fixed layouts here. (You may want to follow the links provided in the rear.)

(Me, Myself and) I prefer a fixed layout. Has among others something to do with readability and pleasing the eye.
That's why I made those Minima Clones fixed. And because the original Minima has all columns fixed!

Here in the WorkShop I am using my own DownRight v1.4 theme, which has - there you go - a fluid main column. The only small addition I implemented here is styling the content_wrap identifier with min-width: 760px and max-width: 960px. (That last attribute will probably not work in some older browsers. Alas!)

Recommended reading:

456 berea st: The Great Fixed vs Fluid Debate
htmldog: Fixed vs. Fluid
StopDesign: On Fixed vs. Liquid Design
ST: max-width in Internet Explorer - a nice one on 'readability and line lengths'

Wednesday, February 21, 2007

Minima 3-column (new) Blogger Clone

[ click images to view a live example ]

Clone: new Minima 3-column - width: 760px.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

Clone: new Minima 3-column - width: 960px.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

Clone: new Minima (Blue) main-side-side w960.
Status: published.

[ black ] [ blue ] [ ochre ] [ white ]

Sunday, February 18, 2007

LikeWise v1.1

A new (stable) release of LikeWise (v1.1) is available in the left sidebar.

A second row of three columns is added to the footer:

Here's an example!

The Blogger Add and Arrange Page Elements Dashboard:

Note:

In the example images the second row is filled with Page Elements. In the template these second row columns are initially left empty.

Of course Page Elements can be added to each column in the first row too. Using the second row only creates a neatly horizontally aligned new row with Page Elements.

One can simply add more (and more) rows by copying and pasting the first row code - add a row between two existing rows!


<div id='container2'>

<div id='column'>
<b:section class='column7' id='column7' preferred='yes'>
</b:section>
</div>

<div id='column'>
<b:section class='column8' id='column8' preferred='yes'>
</b:section>
</div>

<div id='column'>
<b:section class='column9' id='column9' preferred='yes'>
</b:section>
</div>

</div>


Be sure to name each column unique (otherwise the Dashboard will tell you so ...) and add each new column-name as a selector to the following specification (in the template style section)

#column1, #column2, #column3, #column4, #column5, #column6, #column7, #column8, #column9, #main {
padding: 10px;
}

to allow every single column its needed 'air'!

Thursday, February 15, 2007

LikeWise

Meet LikeWise ...
Status: published v1.0.

The idea was to create an unlike Blogger Templates Blogger Theme!
Like they were getting more and more popular last year: layout with several columns in the footer - no sidebar.
And introducing the Blogger colors #004276, #2b9cce and #f67c2a.

The Blogger Add and Arrange Page Elements Dashboard:

The following Variables are present:

Page Background Color
Footer Background Color
Text Color
Footer Text Color
Link Color
Hover Color
Column Link Color
Column Visited Color
Column Hover Color
Header Border Color
Body Font
Comment Footer Font
Post Footer Font

This one is mainly intended for those rare webloggers who just want to write and publish their posts ... not intending to show/use all them stupid stupid stupid Ads, Shout-boxes, Hit-counters, Paris Hilton Pictures, et cetera ... (err ... did I mention Ads ???)

Download available on the left sidebar.

Sunday, January 28, 2007

Mea Culpa,

mea culpa, mea maxima culpa.

More eager then inspired I published today successively a DownRight Theme version 1, version 1.0 and version 1.1.
I know I have at least frustrated one person extremely ... I am so sorry Unscathed.
What I did: publishing this Theme with the Widgets NOT expanded .. permitting the Blogger Engine to use defaults (thus losing my code changes)! I'm an OAF!

Said again:

Confiteor Deo omnipotenti,
beatæ Mariæ semper Virgini,
beato Michæli Archangelo,
beato Ioanni Baptistæ,
sanctis Apostolis Petro et Paulo,
omnibus Sanctis, et vobis, fratres (et tibi pater),
quia peccavi
nimis cogitatione, verbo et opere:
mea culpa,
mea culpa,
mea maxima culpa.
Ideo precor beatam Mariam
semper Virginem,
beatum Michælem Archangelum,
beatum Ioannem Baptistam,
sanctos Apostolos Petrum et Paulum,
omnes Sanctos, et vos, fratres (et te, pater),
orare pro me ad Dominum Deum nostrum.
Amen.

I have corrected my errors ... confessed my sins :-(
What more can I say: the Proof of the Pudding is in these WorkShop Pages!

Sunday, January 21, 2007

You Ask, I Deliver

On the Blogger Forum one inquired about a WordPress Theme (not yet) ported to Blogger: the Journalist (1.01) Theme by Lucian Marin. Although this theme has a GPL license I still want to ask the designer's permission ... and/but meanwhile tinkered that template.
Here's a demo!

UPDATE: Published (download available in the left sidebar).

The following Variables are present:

Page Background Color
Page Text Color
Link Color
Hover Color
Blog Header Link Color
Blog Title Color
Blog Description Color
Post Title Color
Border Color
Sidebar Link Border Color
Sidebar Link Hover Border Color
Date Header Color
Date Header Bg Color
Sidebar H2 Color
Sidebar Text Color
Post Footer Color
Page Text Font
Blog Title Font
Blog Description Font
Post Title Font
Date Header Font
Sidebar H2 Font
Sidebar Font
Post Footer Font

[ that 'You Ask, I Deliver' is a joke, of course! ]

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 ...)

Thursday, April 19, 2007

Saturday, March 24, 2007

Tuesday, March 06, 2007

Monday, March 05, 2007

Sunday, March 04, 2007

Saturday, March 03, 2007

Wednesday, February 28, 2007

Sunday, February 25, 2007

Saturday, February 24, 2007

Wednesday, February 21, 2007

Sunday, February 18, 2007

Thursday, February 15, 2007

Sunday, January 28, 2007

Sunday, January 21, 2007