Jan 20, 2011

Testing fed truncation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tortor eros. Donec in augue neque, ut luctus tortor. Cras convallis vehicula nulla quis adipiscing. Nullam feugiat libero non mi molestie egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vestibulum mauris eu metus volutpat vitae imperdiet nulla tincidunt. Maecenas molestie erat felis. Nullam et orci ac nisi placerat consequat a eget ipsum. Aliquam ac porta libero. Nam vitae tempor enim. Cras ac commodo metus. Phasellus venenatis adipiscing libero sed rutrum. Ut in urna sem, eu sagittis magna. Nam hendrerit placerat odio, at varius dui dignissim ut. Etiam aliquam venenatis vestibulum. Quisque ut nulla ac massa faucibus sagittis et sagittis purus. Vestibulum eros ipsum, euismod non lobortis eget, lacinia ut erat.

Nullam tincidunt, elit eu gravida pulvinar, mauris nisi vestibulum enim, eget tempor mauris odio id metus. In ultrices, felis in tristique suscipit, dui velit imperdiet dui, a tempus sem lacus vel lectus. Ut luctus ultricies felis, vel suscipit felis bibendum quis. Duis luctus risus at nisi tristique et viverra arcu condimentum. Duis nec diam sit amet metus pretium lacinia at id justo. Aenean tincidunt nibh quis quam facilisis eu accumsan velit fermentum. Cras rhoncus ultrices semper. Fusce sit amet elit ligula, ut volutpat eros. In vel sapien sit amet leo pharetra varius. Curabitur non lacinia ipsum. Fusce placerat elit vel magna sodales ac hendrerit tortor ullamcorper. Maecenas a urna in ligula accumsan condimentum at quis dui. Proin nec massa quis diam blandit congue. Vivamus aliquet justo feugiat lorem vestibulum cursus. Etiam venenatis purus id neque volutpat tristique ornare enim commodo. Maecenas vel dui dolor, et sodales augue. In ipsum neque, viverra at fermentum ut, condimentum sit amet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nunc, consequat id dapibus eget, porttitor ac libero.

Jan 19, 2011

Jan 18, 2011

whitespace

I am testing some whitespace stuff

In html:
jjjgjhgjhgjghjg

W/ tab char:
jnjsnfjsnfjsnfjl

w/ space in HTML:
knfsgjnfjgndgjf

In compose:
nfjgnjfgnsjgn

Jan 11, 2011

Blog tweaks

I've been busy the past few days making small tweaks to my blog. It feels a lot more... coherent now. Some of the things I've changed:

- Added a webfont from Google's font directory. Headers, navigation links and other text matches the title image now. The one I used was 'Orbitron'.

- Blogroll will only show on the homepage, so it won't vertically stretch post pages!

-Installed an updated version of the "Recent Posts" widget. This one is formatted much better.

- Moved post data and labels links to the top of the post, under the header.

- Made the comment box wider

- Added a few small graphics, such as a post divider.

- Spruced up the About page a little. It's done in pure CSS, my favourite <3. In the process, I found out that webkit browsers render rounded borders in a very silly way. (This is a great page about how each browser handles rounded edges.)
Read more »

Test with content

Code for this version is as follows:

CSS code (should go in blog layout template, but CAN be posted in a post)

<style>
.leftcolumn {
float:left;
width:70%;
padding:10px;
}
.rightcolumn{
float:right;
width:25%;
padding:10px;
border-left:2px solid red;
}
</style>

Post template code to format a post as two columns:

<div class="leftcolumn">

MAIN CONTENT

</div>
<div class="rightcolumn">

SIDE CONTENT

</div><div style="clear: both;"></div>

To change the width of the columns you must change the width attribute lines in the CSS code. You can keep it as percentages as it is now, or change it to pixels. Here is an example with pixels. It is a very easy change, so feel free to play with it.

<style>
.leftcolumn {
float:left;
width:600px;
padding:10px;
}
.rightcolumn{
float:right;
width:300px;
padding:10px;
border-left:2px solid red;
}
</style>

Filler text to make column longer:

Where did it all begin?

At four years old I started dancing tap ... but BEGGED my mom to let me quit. That ended my dance career. Later, I casually started line dancing in a bar until they ran west coast swing lessons – and I got abducted into the world of partnership dance and never looked back!

Filler text (I left it unformatted, but you can format it as normal)

Joanna Swanson is a beloved
ballroom dance teacher
(hustle and west coast swing,
too) in the Toronto, Canada
area.

In July 2010, Joanna quickly
became the face of the
Toronto Open Swing &
Hustle Championships because of her
charisma and kindness.

Currently, Joanna is duking it out with the best competitors - vieing for her place on the very tough west coast swing hierarchy of SuperStars!

Being formally trained as a cellist blessed Joanna with an instant understanding of musical interpretation which is evident in her delightful dance skill.
Joanna is a Sales and Administrative Assistant at UniPrint in Toronto, Ontario, Canada.

Jan 10, 2011

MAIN CONTENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros.

SIDE CONTENT
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacini

Two columns

divs

This method is achieved by putting this code in your blog template anywhere between the <head> tags:

And putting entering this in a post, using the Edit HTML tab:

<div class="leftcolumn">

MAIN CONTENT

</div>
<div class="rightcolumn">

SIDE CONTENT

</div>
<div style="clear:both;"></div>

The widths are defined as a percentage, and so should scale well, but you can edit the CSS code (the first block that goes into your template) to adjust the percentages, or change it to pixels if you wish.

sidebar filler text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacini

With CSS is is much easier to change the style/appearance of the columns. For example, by modifying the CSS code you can add a border:With CSS is is much easier to change the style/appearance of the columns. For example, by modifying the CSS code you can add a border:

<style>
.leftcolumn {
float:left;
width:70%;
border:1px solid black;
}
.rightcolumn{
float:right;
width:25%;
border:1px solid black;
}
</style>

sidebar filler:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacinia vitae eros. Nam pharetra elementum congue. Donec tincidunt pellentesque justo ac dictum.

Tables

You may prefer this one because it doesn't involve adding anything to the blog's template and allows you to define different column sizes for each post.

In Edit HTML mode in a post:

 



MAIN CONTENT



 



SIDE CONTENT

You can cange the width of the side bar by changing the walue in "td width="200px"'

sidebar filler:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacini