Thursday, 26 February 2009

TIP - Sidebar Image Borders

email me

Cath this time (am I glad that there are questions, or what?), asking how I managed to put borders around her sidebar graphics as the default, rather than inserting the code individually for each picture.

It isn't actually difficult. The reason you don't see many sites with borders around sidebar graphics is more a case of users accepting the default settings and being satisfied with the display that the template brings with it.

Others, like Lee & Cath, want that 'little extra' and are prepared to get their hands grubby fiddling around in the HTML and CSS coding of the template.

If you fall into the second category, here goes ...

  • In your text editor, type in the following code.
  • Please make sure it is a TEXT EDITOR and NOT a WORD PROCESSING package like 'Word'.
/* --------- Terry's sidebar code --------- */

#sidebar img {
border: 1px dotted #FFFFFF;
padding: 2px;
text-align: -moz-center;
#text-align: center;
margin-left: auto;
margin-right: auto

/* --------- end of Terry's sidebar code --------- */
  • Go to >> Layout >> Edit HTML
  • Find          body {          in the edit window.
  • Copy the text you've just typed in your text editor and paste it just above that line. You can even copy/paste directly from the box if you're feeling really lazy!
  • I've commented out (/* ----- text ----- */) the description of the code you've just inserted so that it can be found easily if you wish to edit or remove it later.

Change the border parameters to how you want it to display on your site. 1px thickness can be increased; 'dotted' can be changed to 'dashed' or 'solid'; color (#FFFFFF, white in this example) can be changed to match your colour display.

One important consideration. Some templates refer to the sidebar as a CSS 'class' (class='sidebar'), and others as a CSS 'ID' (id='sidebar'). You need to discover which one your template uses and adjust the above code accordingly.

For templates that use the term 'id', simply use the code I've provided above; it has the symbol [ # ]. For templates that use the term 'class' replace the [ # ] symbol with a period, or dot, or full stop (or whatever you call it). That's it, folks!

Off you go!

back to the top


TIP - Label Cloud

email me

Lee posted a comment in the last post asking if I had/could/would post a tip on how to achieve the 'Label Cloud' I use here, and one which I built for her.

Well, I haven't, I could, but I won't!

No, that is not a rude response. I am not going to post a tip on how to get that particular 'Label Cloud' and appear to take credit for it. Simply because I 'stole' it, and simply because phydeaux3 does a much better job.

If you visit his site through the link above you will see that he has a comprehensive tutorial on what you have to do to get the 'Label Cloud' to display on your site. Please do visit him and you will also realise that there are some really smart, and helpful Bloggers around. All you have to do is 'search'!

If you get into difficulties and you aren't able to contact the original author, please feel free to ask here and I will make every effort to help you out. Can't say fairer than that!


back to the top