tips,tricks and hacks: December 2006

Thursday 21 December 2006

Postbar - something new!

Here is a new one for you. I'm calling it a Postbar in the spirit of previous 'bars'...ie widebar and sidebar. Applications? Well, I wanted an extender to keep my sidebars from moving to the left on label pages.

To explain a bit, I installed the widebar above the right and left sidebars. When I clicked on a label in my category cloud, if I only had a post or two in that category, that made a short list. Then my left and right sidebar, without any prodding from me, shifted to the left to fill up the empty space under that short list. I didn't like that added feature! I wanted all my sidebars to line up in a row like on my home page.

One solution offered was padding the posts to fill space. (And a very nice suggestion. Thanks, Vivek.) Only that left entirely too much white space for my liking. But, it made my sidebars line up. So, I thought instead of putting white space after my posts, why not fill it with something? Hence the Postbar was invented because it is a sidebar that follows the posts.

If you want your very own Postbar, here is what you do. Add the following code to your CSS style sheet (between the <head> and </head> tags):

#postbar-wrapper {
width: 44%;
float:left;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#postbar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

Note: this is for a fluid template design. If you have a static design, plug in your post px sizes. My posts are called #widebar-wrapper in my template. Yours could be labeled differently.

The following code needs to be added between the <body> and </body> tags. Then find <div id='leftsidebar-wrapper'>. (Again your's could be called something similar.)

<div id="postbar-wrapper">
<?xml:namespace prefix = b /><b:section class="sidebar" id="postbar" preferred="yes">
</b:section></div>

After that, save your template and go to the Page Elements. If it is not lined up under your 'Blog Posts' widget, drag the 'Blog Posts' widget to it, then move it all where you want it. This was a gray area for me. No rhyme or reason...lots of dragging. At one point, it wouldn't let me drag a widget, but I saved it and came back and I could move it. Then it worked!

So, a little something for all you blog template tweakers out there. You know who you are!!

post signature

Tuesday 19 December 2006

A Widebar - Fluid Style

A 'Widebar' is another sidebar that spans the space of two sidebars, either above or below those two sidebars. Obviously, this only works if your blog is laid out with two sidebars side by side. I have been wanting to use Vivek's Adding a wider-sidebar to your blog ever since I first saw it. I liked the idea of another sidebar to further group my multiple sidebar widgets into a more pleasing, easy to read format. But, the code was 'static' not 'fluid'. For all you fans of the fluid template style (or those who don't know what a fluid template is) see these posts for a review of fluid templates:

I really wanted that widebar, so I worked on Vivek's hack yesterday to modify it for a fluid template. I had success, much to my surprise. For me, it is always a surprise when my coding works!

To use the code, first read Vivek's post to get a feel of what it about. He has nice graphics to make it easy to visualize.

A fluid template design will expand to fill your reader's computer. Here is a quick re-cap from my other posts on fluid design. Instead of the width being a pixel value, it becomes a percentage. The sum total must be 100%. Now I have four columns...two sidebars, one widebar and the main content. I first addressed the entire content:

left margin 5%
right margin 2%
width 93% (this 93% contains the main and two sidebars)

I then assigned these values: (Follow me here. This part is 100% of the above 93%)

main 50%
sidebarleft 22%
sidebarright 22%
6% for the space between the columns

Then I broke it down again and assigned this value to my widebar (which is 100% of the left and right sidebar)

widebar 44%

Before you begin, backup your template or practice in a test blog! To implement this hack on your blog, this is the code you will add to your CSS style sheet (between the <head> and </head> tags):

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

Now, in the unexpanded view, find <div id='main-wrapper'>. That is what it was called in my template. In Vivek's it was called content-wrapper. Add this code in that wrapper section:

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Save your template. Go to 'Page Elements' and you will see a new 'Add Page Element' in your widgets. You can create a brand new widget for your Widebar, or drag a widget from one of your sidebars to it.

This hack was modified to work on my template, Minima. With a few adjustments here and there, it should work on any template. I found I had to adjust the padding values to make it fit the way I wanted on my blog.

post signature

Friday 15 December 2006

Pretty Blockquotes

In the spirit of making the blogosphere a better (ie prettier) place, here are a couple of ways to dress up the lowly blockquote. This is the code for my simple blockquote:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
blockquote {
background:#EFEFF7;
}

Mine is very simple for a reason. (Not that I don't want wild and wonderful...it just would confuse my readers.) My blockquote is actually a design element that gently separates areas of code from the blog post it's self. That way my readers can see the code that needs to be copied at a glance...no guessing needed. I picked a soft color because codes can make you crazy, and tranquil blue is my way of offsetting any craziness!

One of my favorite blockquotes is with a big chunky quotation mark. I found this fun little blockquote in a theme designed by Fauxzen at Blogger Templates.

Here is the code that you paste into your CSS style sheet (between <head> and </head>):

blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("QuoteImage.URL") 5% no-repeat #FFF8DD;
}

<-- This is the image you will need. Right click it then save to your desktop. Upload it to your webhost. I use Ripway. After uploading, put the URL in the above code.

Here is one more. I use it on Buttermilk Clouds. It is simple in a fancy way. I'm changing the color here so you can see a variety. The great thing about this blockquote is you don't need an image to save and upload. It is all done with smoke and mirrors!

Once again, here is the code that you paste into your CSS style sheet (between <head> and </head>):

blockquote{
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

If you want a different color, find one on this fantastic color chart then put that color code in place of #DC143C in the code above.

I'm going to stop for now. But, this is really fun, so I will probably do more of this type of thing in the future. Especially if I see much interest in it. Let me know!

Update: 1/16/07 I forgot to mention that you should replace the old blockquote code in the CSS style sheet with the new code in this post.

post signature

Painless Blog Posting

Did you know that Blogger (beta and orginal flavors) both have a built in setting that takes some of the hassle out of posting? The feature that I have in mind is found on the dashboard under Settings/ Formatting/ Post Templates. For example, on this blog, I often use a pullquote. So, I take this code:

<p class="pullquote">
<span >Title</span>
<span >"</span>
Text
<span style="font-size:large;">"</span>
</p>

and paste it in the Post Templates box. After I save the settings, the code is in place. When I write a post, I type in the Title and Text of the pullquote. Automatically, I will have a pullquote in my post. (Assuming I have the correct code in place in my CSS style sheet. See Visual Interest - Pullquotes for simple instructions.) You can then cut and paste the code to the area of the post you want it to show up.

On my other blog, Buttermilk Clouds, I always start the post with a photograph. So, in that blog's Post Template box I add this code:

<image class="centered"alt="title" src="URL" />

Post templates help users save time by pre-formatting the post editor.

All I have to do is put in the image URL and write the title of the picture.

This speeds up the posting process and makes posting a breeze. I can never remember the simpliest of codes, and I was forever looking up the code. Now, all my most used codes are in place and waiting.

On the chance I don't want a pullquote or a photo, all I do is delete the code from the post box when I create a post. A simplier process than looking for code to put in!