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

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: <!-- start content -->    <div id='content_wrap'> <!-- start header -->    <div id='header_wrap'> </div> <!-- end header --> <!-- start main -->    <div id='main_wrap'> </div> <!-- end main --> <!-- start left sidebar -->    <div id='leftbar_wrap'> </div> <!-- end left sidebar --> <!-- start right sidebar -->    <div id='rightbar_wrap'> </div> <!-- end right sidebar --> <!-- start #footer -->    <div id='footer_wrap'> lt;/div> <!-- end #footer -->    </div> <!-- end content --> 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!

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

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

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"> <!-- some css styling here --> </style> is replaced by <b:skin><![CDATA[/* */ <!-- some css styling here --> ]]></b:skin> The variables are added, embedded between the comment tags /* */, like this: <b:skin><![CDATA[/* Variable definitions ==================== <Variable name="" description="" type="" default="" value=""> */ <!-- some css styling here --> ]]></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"> */ <!-- some css styling here --> ]]></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