Christmas decorating is about . . . pillows

Well, not really. But changing all, or even some, of the pillows throughout your house for Christmas can make it feel more festive. I use a lot of pillows throughout my house the whole year long. They just add so much to the overall decor, I think. And, I know I'm not the only one by a long shot. If you've watched any shows on HGTV, you know what I mean. If you search for pillows on Etsy, the results are overwhelming.

But, the pillow habit can be expensive.  And, I have a small house so have limited storage space.  While I would love to have a whole room devoted to storing pillows, that will never happen.  So, I've come up with several ways to change pillows without taking up much space, all without spending too much money.

In my bedroom, I don't change out all the pillows, just a couple.  The two pillows in front, the gold and red, are pillows I've added for Christmas.

I have also been pretty fortunate to find pillows on sale after Christmas and in the New Year that are extremely reduced in price, so I buy them then to use the next year.  Several of the pillows on my couch were bought after Christmas last year for less than $5.

But my most creative solution to saving money and space is to buy placemats to use as pillows.  Here are two pillows I created out of placemats which I bought very cheaply.

I also do that for my front porch pillows.  Both the back pillow and the middle pillow are placemats.  The square placemat came in a set of four at Home Goods for $6.99.  In addition to the pillow, I am using two of the placemats on my table.  The red placemat I bought on sale after Christmas last year for less than a dollar.  The gold pillow on my bed is also a placemat that I bought last year after Christmas.  I'll post exactly how I turn placemats into pillows in my next post.

Read more ...

Adding an accent wall

All the walls in my house are a taupe color, and I left them that way when I moved in because I figured I could use furniture and accessories to add color.  I love color but I also love to change up things every now and then, so I didn't want to be locked into a color choice that I might regret later.

However, the more I looked at the wall where my couch is located, the more I thought it begged to be an accent wall.  I have a lot of greens and blues in my house, but I decided using one of those colors as an accent would be too much.  Eventually, I chose Spiced Cider - SW7702 - from the Sherwin Williams HGTV Home collection.  

This is the couch and wall before I painted.  You can see how the couch almost blends into the wall.

Adding the accent wall really makes the couch, pillows and accessories pop.  I couldn't be happier with how it turned out.

Read more ...

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 ...