Wednesday, 7 April 2010

BORDERS ROUND PHOTOS IN BLOGGER

Suzie Button emailed me about the borders round photos in Blogger. I can't believe I hadn't already done a tutorial about this... so here you are.


1) I WANT TO REMOVE THE BORDERS COMPLETELY

You hate the default borders round the photos in Blogger. You don't want any at all! So how to remove them altogether?  You'll be glad to know this is a very easy tweak and will only take a few minutes.

In Layout > HTML view, begin by downloading a copy of your blog to your desktop: just in case. No need to click on Expand Widget Template.

Type CTRL + F on your keyboard to bring up the 'Find' box


Copy and paste this into the 'Find' box, and it will highlight in green bringing you down to the correct section of code:
.post img {
Now to get rid of the border:


Get rid of the border by changing this code from:  
border:1px solid $bordercolor;
 to: 
border:0px solid $bordercolor;
Then Preview to see the effect. Happy? Then Save.

2) I WANT TO ALTER THE BORDERS

OK - you don't hate the idea of a border, but it needs to have more punch - and you'd like to change the colour too!

In Layout > HTML view, begin by downloading a copy of your blog to your desktop: just in case. No need to click on Expand Widget Template.

Type CTRL + F on your keyboard to bring up the 'Find' box:



Copy and paste this into the 'Find' box, and it will highlight in green bringing you down to the correct section of code:
.post img {
Change the numbers here:


Increase the size of the border by changing this code from:  
border:1px solid $bordercolor;
to: 
border:8px solid $bordercolor;
giving you this result:


You can also change the colour from $bordercolor to any colour of your choice. Just remember to add a hash mark: # and follow this with 6 letter/numbers, which are the code for the colour (eg: white is #ffffff and black is #000000).




which gives you this result:



Here is the link for web-safe colour codes you can try. Firefox users can also download Colorzilla.


RELATED POSTS
  1. How to remove the borders around your header
  2. How to adjust headers

post signature
your photo name

5 comments:

  1. Thanks so much Susie! I had found an HTML to put in the body of each picture's HTML code while posting, but this permanent add in for my html in my layout is perfect! Thanks so much! Suzie

    ReplyDelete
  2. awesome tip! I just did this and voila! image border is gone. thank you sooooo much!

    ReplyDelete
  3. Thank you so much for the tutorial. Thought i needed borders around my photos, but seeing your page decided i didn't. Great blog, and I am your newest follower!

    ReplyDelete
  4. How do you put the font next to your photo rather than on top of it?

    ReplyDelete
  5. Gayle - these are screenshots, so I've put the text on top in a separate layer so that people can see what I'm referring to.

    To put text under your photo, you can do it in Blogger - just upload your image in the usual way, and when you pass your cursor over the image when in Compose view (ie: when actually writing your post) you'll see an option to add a caption. This will put text underneath, automatically in a smaller sized font.

    To put text by the side, click on the image to make it go Left or Right, then type in what you want. You'll have to juggle to make it appear where you want it to. My earlier posts are like this, and took a lot of editing. Alternatively, use LiveWriter, which gives more freedom in positioning (click on LiveWriter in my list of links).

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.