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

 

9 comments:

Unknown said...

Hey!
I found a site that said you can help with html and stuff and I was wondering if you could help me.
The fact is that I have no idea what so ever how to do what I want to mine.
Any suggestions???

Fletch said...

Love a challenge!

Think 'visually' and I'll say whether it can be done in a Blogger template.

Get in touch with me direct at fletch@netcabo.pt and we can talk about it ...

Unknown said...

Thank you! :)

Laila said...

Hi, I stumbled in here through another blog. I really love all your tips & hints, I imagine I can find a lot of great tools in your blog to improve the design of my own :)

(Can't wait to get rid of that screwdriver!!! :-D ))

Thanks! :)

Fletch said...

You're welcome, Laila.

Certainly, get rid of that screwdriver, you can edit via the 'Customise' pane.

Liked your site. The subject is unique - for me in any case!

I have a couple of suggestions, but I'll leave it to you to initiate that. I work hard at curbing my arrogance!

LOL

Carolyn R. Parsons said...

Hi Fletch..thanks for posting on my blog. I'm thinking the book you read is the one at the bottom of my page? Not the one in the post, another I did for my father in law. But thank you for taking the time!

I think you are right about putting the link in the footer however I have no clue how to do that, zero html knowledge and just bumbling along with blogger. I added that link to the html widget along the bottom but it still constrains the width although they show as wider..really weird. But THANK you for taking the time!

Fletch said...

Hi Breeze.

e-mailed you direct. Hope it gets to you.

Laila said...

Oh I'm open for suggestions, I'm constantly reworking my blog design so feel free :-)

Cath said...

*sigh*
Fame at last. :)