The Blogger WorkShop: coding

Showing posts with label coding. Show all posts

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!

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

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'

Friday, April 14, 2006

Blogger Bug when using the MINIMA

Last few weeks it was raining mail (again) concerning a bug when using the Minima template.

After installing the Minima and republishing the blog people notice the first-post-body-text is pushed under the sidebar(s)!

True ... don't blame the template (dont' blame MIE and DON'T blame ME)!

This happens because of a Blogger software update where the post body is wrapped in a <div clear:both> tag!
The solution (or better: workaround): Disabling Float Alignment!

Blogger Dashboard > Settings > Formatting > Enable float alignment > No
Republish the Blog!

A Blogger Buzz note: "... suppressing the markup will result in layout problems when using left or right alignment for images."

A personal note: this can be avoided by embedding the <$BlogItemBody$> in a html table, as I did in my own templates.
But I chose to keep the Minima 3-column template code completely 'as is'!
A good choice, I think :-) (A 'clean' clone, so to speak!)

Friday, March 24, 2006

Installing a new template in Blogger

Because there are questions about how to install a new template in Blogger here's a Quick Guide:

Download the desired template

Right-click on the download link (that is [download] or [.txt]) and choose 'Save Link As ...' (or 'Save Target As ...')

Save your current template first

Chances are you have coded several additions in your current template.
So first you should save the old template somewhere.

Blogger Dashboard > Template > Edit current

Select ('Ctrl A'), Copy ('Ctrl C') and Paste ('Ctrl V') the template code in a file.

Install the new template

Open the saved new (tb_b_20060122_black.txt or whatever) template file .
Select, Copy and Paste the new code in the Template Edit Window.

If you have any addition you want in the new template, you should copy them from the old one.
Activate the new template (Save Template Changes)

Then choose Republish (You must Republish your blog to see the changes) ... and you are done!

Saturday, January 14, 2006

About a Banner ...

Here's another 'How To ...' ... in case you want a banner-image in the Sodomy non sapiens (or in any other template):

[ Banner Image ] [ Background Image ]

Terms of (ab)Use: please, do not use (or link to) my images (templates are provided without images!). 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 ...)

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

Wednesday, February 28, 2007

Sample Techniques

Saturday, February 24, 2007

Fixed vs. Fluid (reprise)

Friday, April 14, 2006

Blogger Bug when using the MINIMA

Friday, March 24, 2006

Installing a new template in Blogger

Saturday, January 14, 2006

About a Banner ...