Tuesday, March 5, 2013

Tuesday's Tip - Removing image frames in Blogger

Yesterday Kathryn from Kathryn's Quest wrote a post in her Fearless Females series about German marriage records. In her post she used my tip for creating ancestor charts with the Microsoft SmartArt tool. Her graphic looks great but she was perturbed by the white border around all of her blog images. I was able to figure out how to get rid of those "pesky borders" and thought I would share it.
Note the border around this image. The template you use in Blogger will determine how prominent your image borders are. You'll note that mine are barely noticeable because I choose to have a white background. A blog design with a colored background may have a more prominent image border. Luckily, Blogger gives us the ability to change our template to suit our tastes.

To make changes to your template, follow the "Template" link on the left-hand column of your Blogger home page and then the orange "Customize" button under the screenshot of your blog.
This opens the Blogger Template Designer where you can make changes to every part of your blog design. Click on the Advanced link and then scroll down to Images.
The Border Color, marked with a red box above, is where you can change that "pesky" frame color.

Once again, Blogger makes it too easy. They supply color choices that go well with your blog template. Or you can choose your own color by clicking the color box circled in red above. In that link you can use the color mixer to design a custom color, or you can nix the image border all together by choosing the transparent option, also circled in red above.
Be sure to apply your changes to your template by clicking the orange "Apply to Blog" button on the very upper right-hand corner of the Blogger Template Designer. You can also click on the "View Blog" link here to view your changes as your readers will see them. I suggest you do this while you have the Blogger Template Designer open so you can adjust changes easily without trying to remember where you were in the Designer.

Remember, a Blogger template is just a great place to start. You can change colors and fonts, adjust widths and the overall layout. Make it your own!

Update: Based on comments from readers I have learned that not all Blogger templates allow you to change the frame on your images via the Blogger Template Designer. Kathryn of Kathryn's Quest found this link helpful. Beware, it does include editing HTML, but it's not difficult.


Christopher Washler said...

Great tip! Interestingly enough, the template I am using doesn't offer the option to edit the image borders. (Images doesn't even appear as an option under the advanced editing.)

Heather Kuhn Roelker said...

Christopher, story of my life! It sounds like if you want to change your borders you would have to edit the HTML directly. Sorry it can't be more easy!

Kathryn said...

Thanks Heather! Perturbed is putting it mildly. :) I also don't have images as an option in my template. I started out with the Watermark template and made some modifications to it. Maybe it's time for a new template. :)

I found a tip here that seemed to basically work: http://helplogger.blogspot.com/2012/04/how-to-remove-blogger-pictureimage.html

Instead of doing Add CSS as the tip says, I clicked on Edit HTML (next to the Customize button) and clicked Expand Widget Templates. I searched for the block of code in the tip and replaced it with the new block. It seemed to work!

My mistake was in trying to edit the HTML for individual posts since I didn't necessarily want to remove all of the borders. Nothing I tried worked for that. Maybe the template code was overriding it. I'm going to do some more testing with this before updating my blog. Use with caution!


Jacqi Stevens said...

Heather, you must have read my mind! The wide white border around images in my blog are particularly irksome to me. Somehow, in the same blog, adding the "LinkWithin" program to the bottom of my posts, that program seems to have a more sedate way to frame their graphics--I've always wanted that, and now I see how I can experiment to achieve a more uniform appearance between the two elements of the blog. Thanks so much!

Heather Kuhn Roelker said...

I'm sorry I wasn't more helpful, Kathryn! I didn't realize that different templates changed the options that you can adjust easily. Silliness. I'm sad because you were who I wanted to help! Alas, you found an option that worked...thanks for sharing that link.

Heather Kuhn Roelker said...

Jacqi, I hope it helps. It appears that different templates in Blogger allow you to change different things. If it doesn't work, check out Kathryn's link in her comment!

Kathryn said...

Heather, don't be sad! This was actually a huge help!! I didn't know different templates had different options either. Once I learned that, I realized the solutions I was trying probably didn't apply to my template either.

Also, thanks to Christopher for his comment, since I would have thought I was the only one not seeing the Image option. :)

TCasteel said...

My husband & I just created a new blog for his business and we were just commenting on how to loose that frame! Thank you,
(Tangled Trees)

Heather Kuhn Roelker said...

I'm glad it worked for you Theresa. Good luck with the new website!