Adding Unique Borders to Your Images

You may have noticed that I have a gold border around most of the images on my blog. I choose gold as a border because it is one of the colors I'm using to give my blog a cohesive look.

In this post, I want to show you how you can add your own unique borders to your images. You can do as I have done and apply the same border to all or most of your images, or you can apply a border to a particular image.

I'm not an expert on CSS and HTML coding. In fact, I know very little about it. But there are lots of great tutorials out there which can help you know what code to use and where to put it in your template. I use Blogger as my platform, so I specifically search for tutorials related to it when I'm trying to find out how to do something.

It's easy enough to add a border that's a color around your images. The code for that is:

      .post img { border: #000000 2px solid; }

Using that code results in a thin black border around your images in your blog posts.

I didn't want just a flat looking border, however. I wanted the gold in my border to shine. So, I started looking around for other ways I could achieve that.  I ran across information about how you can create borders with images using CSS3.  I didn't really understand the technical explanation of it, but I thought that this could possibly be my ticket to a shiny gold border if I could figure out how to do it.

So I searched for more information and found a site that allows me to generate a CSS3 border from an image.  I can upload the image from my computer or I can copy the image location from where it resides on the internet and paste that in to generate the code for the border.

To find an image that I wanted to use as my border, I again went to Creative Commons and used CC's image search to find an image that has no restrictions on its use.  Going back to my previous post about using images to customize your blog, I decided that a rope border would fit perfectly with my rustic-cowboy-ranch theme.  I had added the rope image I found to a Picasa Web album, so I right-clicked on that image and copied the image location.  Then I pasted it into the IMAGE: line of the border-image-generator.  You will immediately notice that once you've pasted the image in and clicked off that line that the border appears at the bottom with code.  Then you can make choices about border size, offset, and border repeat.  You can also choose to remove the center of the border (fill border), which I recommend.

You have to play around with these choices until you see a border that looks like you want it to look.  Border size is of course the width of the border on each side.  If you can't get this perfectly proportioned using the generator, you can adjust this later in the template when you paste the code into it.  The offset option helps keep the border from being distorted no matter the size of the image.  The border repeat will determine if the border is rounded, repeated or stretched.  I always use rounded, because that looks the best to me.

 In my image above, I have added the rope border.  This is how I generated it in the border-image-generator.

So, to add the border image to every blog post, I would add the code generated by the border-image-generator to my template (Template - Edit HTML - look for

and insert the following code immediately before it):

.post img {
border-style: solid;
border-width: 16px 21px 15px 22px;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;
}

If I wanted to change the border width at this point, I could.  For example, I could make all sides the same width by changing my code to: border-width: 15px (make it thinner by decreasing the number or thicker by increasing the number).

If you want to add the border to a single image, you can do that in your post that contains the image.  Once you've inserted the image in your post, click on html.  You'll see the code for the image.  Look for the part of the image that has code like this:

img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmqhERdbRPOeLZeA0ZIAazI1Dlf9xlqei2A1eAAt64VUYKz160EjdfT7luZphrVLL1kfplXKvkoAidsPtfJS1HDWZHvShbrKIzVLft5RgZ1qOUzwWJmOoWI7RvhXYBR2wdUU08OTBjJo/s400/customize2.png" width="400"

Immediately after the src statement (src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmqhERdbRPOeLZeA0ZIAazI1Dlf9xlqei2A1eAAt64VUYKz160EjdfT7luZphrVLL1kfplXKvkoAidsPtfJS1HDWZHvShbrKIzVLft5RgZ1qOUzwWJmOoWI7RvhXYBR2wdUU08OTBjJo/s400/customize2.png") insert style= and then the code in quotes that was generated by the border-image-generator.  In my example, it would be:

style="border-style: solid; border-width: 16px 21px 15px 22px; -moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; -webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; -o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round; border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcuTO6jO-bbsCunDoeFMTKHdOktB7NECp4mmH_mv0vJNA8N4TqTnVV_1GUxJ8yeIby53ZXOpR2JFwJA3VDyCPvYORwnPWnO63D8sIyVeKWWmQc7N_AGwMmC95x3ZnZ36fzbJiwfMFl0M/s640/rope-219716_1280.jpg) 127 173 125 170 round;"

Just for fun and to show you how you can really customize your images depending on your theme, I decided to try an animal print border.  This is the code from the border-image-generator.

Using that code, I can add this border to my image or images.

So, in this post alone, I've used three different borders - my shiny gold one, a rope border that fits the theme, and an animal print border just for kicks.

Read more ...

Customize your blog

I have been wanting to open a shop independent of a selling platform.  Because I'm not a huge volume seller, I didn't want to spend a great deal of money in the process.  After researching options, I decided to open a shop by integrating my Blogger site with the Ecwid Shopping Cart.  Blogger is free and Ecwid is free for up to ten items which is great for trying it out. 

I wanted a custom look for my blog and shop.  Again, though, I didn't want to spend a great deal of  money.  So, I googled (a lot) and was able to understand enough css and html to do some basic customization myself.

I want to share some of what I've learned to help others who would also like to get a custom look for their blogs.  In this post, I'll talk about customizing images that you can use on your blog in various ways.  Images are a big part of making your blog stand out and look different from all the rest.  I like a blog to have a specific theme, and it's easy to use images to carry that theme throughout the blog (and shop, if you have one).  For the images I'm using today, I chose a rustic-cowboy-ranch kind of theme.

To make the custom images for the blog, I need to start with other images.  I prefer to use Creative Commons (CC) to find those images, because I don't want to violate any copyright laws and I am able to find images that have been published under a CC license which will allow me to use them for free and with no restrictions (be sure to check the CC license because some images do have some restrictions).  I like the images provided by the Open Clip Art Library and Pixabay, both of which I can search through CC. 

I'm going to first find some background images to use, so I search CC with various terms and phrases including "rust" and "rusty background."  Then, I download those I like.  The backgrounds will be used not only as backgrounds in images but also as the backgrounds for the images which are placed on the background.  For example, in the image I created above, I have used a total of four backgrounds that I downloaded from Pixabay.

I knew I wanted to start this post with an image containing the post title. I had found a terrific post from Design Your Own Blog, on creating gold foil text to add to your blog.  I used her technique on Pixlr to create the text "Customize your blog" with one of the rusty backgrounds I had downloaded from Pixabay.  Her post has very detailed instructions, so I won't repeat them here except to say that it's important to save the text image as a .PNG file to give it a transparent background.

Once I had my text done, I wanted to combine it with a background for the title image I was creating to begin this blog post.  I used Microsoft Paint to accomplish this.  In Paint, I opened my background file and viewed it at 50% (because I couldn't see it all otherwise).  Before I inserted the title file, I clicked on the down arrow under Select and clicked Transparent selection.  This is important because the title image I am going to open next is a .PNG file which means it has a transparent background.  I want it to retain its transparent background when I open it, so that requires me to click Transparent selection before I open the image.  I then open the title image and resize it by pulling on the corners of the image and move it to wherever I would like it to appear on the background.  Once I'm finished, I save the file.  I always save files as .PNG, even though in Paint you lose the transparency once you save the file.  Since I'm just using Paint to combine images with an overall background, it doesn't matter that I lose the transparency.

 I tried a couple of different combinations but was happier with the second.

However, I wanted additional elements on my image.  It looked kind of plain jane.  So I downloaded more images from Pixabay with silver and textured backgrounds and also some star shapes from Open Clip Art Library and then returned to Pixlr.  Instead of making text this time, I was making shapes.  I opened my silver background image (making sure I was viewing it at 100%) and then opened the star image on top of it.  I selected (ctrl a) and copied (ctrl c) the star image and then pasted it (ctrl v) on the silver background.  I resized it to fit on the background image (Image - Image size).  Then I selected the wand tool and clicked on the star.  If I had an image with more than one star, I clicked on the first star and then held the shift button down to select additional stars.  This was the trickiest part for me, because sometimes parts of the background would be outlined in my selection and I would have to start over and be more careful of where exactly I was clicking. Sometimes I would make selections that didn't look right when I got rid of the background.  So, this was definitely a trial and error process, although the more I did it, the better I became at making the right selections the first time.  You definitely need to be careful of where you're putting the wand when you make your selections.  Put it as close to the middle on whatever it is you're selecting.  Once you have the shaped outlined, you can complete the process as described for the gold foil effect.

When I finished, I had various star images I could use.  These were all in separate files.

Using Paint, I opened the image with my background and title and went through the same process to add the stars.  Not only did I use files containing different backgrounds for the stars, I used some files more than once, until I had as many stars as I thought appropriate.  Then, I saved my final image in .PNG format.

But, that wasn't the end of my blog customization.  I thought I would like a profile picture that reflects my theme.  I found a cowboy and a boot on the Open Clip Art Library and downloaded those.  Then, I opened a background on Pixlr and went through the process with the cowboy and boot that I had with the stars.

Using Paint, I combined the two images into one for my profile picture.

I liked the textures so well that I played around with some other possible images to add to my site.

Truthfully, the possibilities are endless for what you can create.  I don't have a rustic-cowboy-ranch theme but I almost want one when I saw the cool effects and images that can be created.  And, I did all this without owning Photoshop or spending any money on software.

Read more ...