Wednesday, March 22, 2006

Questions, Questions...

I see I have 2 questions in the comments of my previous post from fellow Blogger users regarding template design. So, rather than respond in the comments, here are the answers: Question from GVM:
You seem to be a blogger expert, even a very friendly one, would it be a problem to ask you the following ? - how do you adjust the size of the letters in the side bar, esp. the text in the About Me profile ? - where can one find the "search this site" button ?
To change this, you need to find the following line in your CSS code at the top of your template: #profile-container { } And change it to the following to make the font the same size as the main post body text: #profile-container {font-size:90%;} Make sure you do a full blog republish and if you don't see the changes immediately, press CTRL+F5 to force a full refresh of your page. The "search this site" button is actually built into the Blogger NavBar you see at the top of the blog. It just called "Search this blog" instead. The only problem with this is that it does not always pick up searches for new posts immediately. I had some posts that were over 3 weeks old that did'nt appear when I searched, but eventually they were indexed and it worked ok. You can always try Google Sitesearch too. Question from Tarun:
Different background for different posts intersting.tell me how to do it.
Well. That sounded more of a curt instruction really Tarun! But here's the answer. To do this, you will need to use some Javascript code which sequentially adds 1 to a variable or takes it away for each post and then assigns a CSS property to the post depending on the value. First, you need to add the following lines to the CSS style area of your template. This is usually at the top of the template code, and will be enclosed between the </style> and </style> tags. div.post-even { background-color : #F5F5F5; padding: 5px 15px; } div.post-odd { padding: 5px 15px; } Then, on the line just before the <Blogger> tag, I inserted some Javascript to zero the variable we would use. <script type="text/javascript">var evenodd = 0</script> And on the line just after the <Blogger> tag, I inserted some more Javascript that determines if the variable "evenodd" is 0 or 1 and applies the relevant CSS DIV to the post. <script type="text/javascript">if(evenodd == 0) {document.write('<div class="post-even">');var evenodd = 1;} else if(evenodd == 1) {document.write('<div class="post-odd">');var evenodd = 0;}</script> And that's it! I actually made mine a little more complex by adding a gradient image to the bottom of the post in the CSS bit: div.post-even {background-color : #F5F5F5; padding: 5px 15px; background: #F5F5F5 url(http://static.flickr.com/39/81719143_e19cdc7865_o.jpg) bottom left no-repeat;} Hope this has been some help to you both. I am in the first stages of a new "project" that will encompass many similar requests - so watch this space.

6 comments:

Tarun said...

It is a very intersting solution which I would want to use soon.
Thanks

Fella said...
This comment has been removed by a blog administrator.
Fella said...

Taoski - You seem to be a blogging pro. Is there any way you could write and publish toilet humour on my blog so I can get more sleep?

Fella said...

Good Morning.

Tao said...

You obviously have'nt seen this site then!

Fella said...

Brunching Shuttlecocks, HA!