TIP - Sidebar Image Borders

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!