More on Using CSS3 Multiple Background Images with Blogger

Back in March, I wrote about CSS3 multiple background images and using them with Blogger. There were some issues with the background rendering in some browsers when I wrote in March. Now, a mere 2 months later, it seems that with updated browser programming on most of the popular browsers, the issue is resolved. Older browser versions will show only a white background which is not a bad thing since the priority for me is that people read my blog and find something of interest.

First, one needs the individual images for the background. I use 3 -- an image for the left side, an image for the right side, and an image for the center of my blog. When I first wrote and tried using CSS3 multiple image coding, I created and used transparent pngs. The pixelation around the edges showed through and I wasn't pleased with the result.

Since then, I've been playing around with editing images to solve this problem and what I discovered is that using the center background color (or texture if that is what your Blogger background includes) as the background color on the actual images for my left and right hand borders works better than transparency. I do think the background and borders now look just how I envisioned.

This is the coding I ended up using successfully:

body {

   background:

url("left-image.png") top left no-repeat,

url("right-image.png") top right no-repeat,

url("center-background-image.png") center top no-repeat;

  background-attachment: fixed;

  margin:0;

  color:$textcolor;

  font: x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

I've copied the entire section from my Blogger html coding because this is where the changes need to be made.

With regard to my image sizing, my left image ended up being 216 pixels wide, the right image is 181 pixels wide, and the center background is 1415 pixels. I don't think the width of the background image is important as long as it is wide enough to fill the open space you have. Your images may need to be wider or narrower depending on the format of your blog. I played with sizing a bit before I found what worked for my blog. There may be a mathematical way to figure this and if you are a math whiz who resolves this, I invite you to share the information in the comments below.

W3Schools has an understandable tutorial regarding using CSS3 in this way. I also found this excellent YouTube video which explains the coding in a way even a novice can understand:

I hope this helps you. Enjoy and I would love to hear how you use this along with a link to your blog or website so I can see what you've done.

Have a wonderful week and blessed day,

CRAFT PROJECT: Bath Salt Bags

To Make the Bag:

1. Cut 7" by 11" strips of muslin cloth. Fold the 7" side and sew a 1/2" seam. This should leave you with a 3" wide, 11" long tube.
2. Fill tube with between 1/4 cup and 1/3 cup of bath salts or other filler. Fold in half and shake the salts down.
3. Fold the open ended side into envelope corners (forming a point) and then fold that section down to seal the open ends of your bag. A portion of the raw edge may show through and I've used my serger to finish these off after folding and filling the bag which also helps to seal the salts in. There are several ways to secure the top. I take a piece of jute string or twine about 2 feet long if I'm making a bath bag, shorter for hanging potpourri, and tie a knot in each end. I then use my sewing machine on the setting for attaching buttons and secure the twine to the bag and seal it up at the same time. I've been told you can use fabric glue as well, but I haven't tried it. I have stapled the bag to close it but wasn't happy with the results.
4. If the bag is not going into water, glue small silk rosettes and/or bits of lace and/or trim. I don't add other embellishments if the bag is going to be used in water since I want to keep everything as pure as possible and I haven't investigated what types of glues and embellishments might work without adding impurities to the water.

Bath Salts Recipe

In a large bowl, mix well: 3 cups of Epsom Salts, 1 cup of Borax and 1 cup of oatmeal. This is the basic recipe. To this, add the scent or essential oil of your choice and mix well again. If the salts are going to be given and used from a jar, instead of using regular oatmeal which will not dissolve in water, use colloidal oatmeal. Food coloring can also be used for salts to be presented in a bottle or jar. Glass should be used to store salts made with scent as the aroma will dissipate over time in plastic.

Update Your Blogger Background Using Multiple Background Images & CSS

There are so many really well designed and cute Blogger templates available. Most are one graphic with a decorative border or borders and solid center where blog content and the sidebar are visible and are uploaded to a service like PhotoBucket or Picasa. These work well in some instances but I recently had to buy a newer computer which has a slightly different sized screen than my previous one.

When I looked at my blog, the only way the background worked was to reduce the size of the text so small that with my eyesight it became impossible to read comfortably.

Researching how to solve this problem and keep an attractive background led me to CSS (cascading style sheets) styling which allows placement of multiple background images. There are quite a few articles written about this on the web searchable through Google.

For the lay person (like me), I thought I would share how I broke down my blog background into three images and placed them within the xml coding. I use the minima 2-column template.

This was how my previous one-piece background coding looked:

body {

  background:$bgcolor;

  url(http://i604.photobucket.com/albums/tt127/dpeagreendesigns/BlogBackground.jpg);

  margin:0;

  color:$textcolor;

  font: x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

I broke my column graphics off into two separate images keeping them approximately 200 pixels or less wide and 685 pixels long. I created the center background from what was left though one could probably use a small seamless tile and add those directions to the CSS. I uploaded these three graphics to my free Comcast personal web page and then coded as follows:

body {
   background: url("http://home.comcast.net/~dpeagreendesigns/LHBorder.png") top left no-repeat, url("http://home.comcast.net/~dpeagreendesigns/RHBorder.png") top right no-repeat, url("http://home.comcast.net/~dpeagreendesigns/CenterBkgrd.png") center top no-repeat;
  background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font: x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

The highlighted coding provides the border and background graphics on this page. It is important to remember the last image (url) is the one which will be at the bottom of the layers. If you look at my background here and compare it to the coding above, I think it will help to make sense of how this multiple background layering can work for a blog.

If you decide to play around with this, I encourage you to use a "test blog". In any event, please make sure you save the existing html template you are using so that if frustration sets in, you can copy and paste the original html coding back into your template. 

There is more information available at the w3Schools website as well as at W3C.org.

I am still working on the cross-browser issues this coding has with Internet Explorer but it works beautifully with Firefox. I did use BrowserShots which allows you to view screenshots of a page in many different browsers and those that won't translate the CSS merely have a white background so content can be read. 

More on this as I learn . . .

Free E-Book on Building Your Blogger Template

It's been awhile since I've posted. Healing from surgery is taking time and while typing is not as difficult as I thought it would be, the pain in my re-worked elbow is slowing me down much more than I thought it would. Ouch, healing bones hurt! While unable to type a lot, I have been reading all the wonderful blogs I subscribe to and have found some really great items to share with you during my healing time. I also have some patterns and how to tutorials to share that I created several years ago.

One of the blogs to which I subscribe is Blogger Buster. This blog is full of helpful tutorials to create just the right template for you. Whether you're interested in working on customizing your personal or business blog or want to learn how to create templates for others, I believe you will find easy to understand and learn techniques.

"In this free eBook you can learn about:

• Different styles of layout and overall blog design
• How to install different types of Blogger templates
• How to maintain widgets when changing templates
  
• Where to download the best free templates
• How to speed up the loading time for your blog
• How to optimize your blog template to rank higher in search engines
• Useful resources to help you get the most from your Blogger template."
  

We're still waiting on the arrival of Liam, my first grandchild. He should make his appearance within the next week or so. I can't wait to share pictures with you. This weekend I'm finishing the Sunbonnet Sam quilt or at least going to try. It would be nice to have it done and ready for when Baby comes home.

Have a great weekend <3
Diane

Some Video on Using Digital Stamps

While these videos refer to the My Grafico website and tools, they also apply to any digital stamp you might purchase from an independent designer of digistamps or digital stamps with a shop at Etsy or eCrater.











I hope you enjoy these videos and that they help get your creative juices flowing.

Hugs and blessings,
Diane

How To Use Digital Stamps

I received a question from a "soon to be" customer the other day asking how digital stamps can be used. I responded to the question with what little I know about the various uses and added that I intend to research and prepare some detailed tutorials for this blog to share with you but that it would take some time to begin and complete each.

With surgery on my hands beginning August 26th (starting with my left and, yes, I'm a southpaw) and then the right side sometime around 6 weeks after the first surgery if healing goes well, I will be doing more reading and research on this during the next 3 or so months and begin to write individual tutorials on each use I discover after all is healed and my doctor gives me clearance.

Meanwhile, since Google is our friend, I spent a few hours researching, reading and compiling some links that I think will help anyone who wants to explore the various creative outlets and uses for digital stamps.

I hope you enjoy these and if you know of others that are easy to understand and follow as well as complete, please share them here with me and others by leaving a comment. I will check them out and comment back.

• Digital Stamps by Creations by Wendalyn
• Using Digital Stamps by Sugarplum Paperie (Nicole Seitler)
• A Beginner's Guide to Digital Stamps by whimsicalwendy
• How to Use Digital Stamps by The Frugal Crafter
• Inkjet Transfer Stamping by Craft Chi (Amy Ybarra Murphy)
• Make a T-Shirt Transfer with Keith Dunlop
• Inkjet Image Transfer Squidoo Lens by Intuitive
• Create Embroidered Patches from Digital Images
• Expand Your Image Options with Digital Stamps

There are lots more instructional and tutorial type websites out there but these are the ones I read and/or watched and found to be easy to follow and understand.

Have a great weekend! Blessings and peace to you,
Diane
http://dpeagreendesigns.etsy.com
http://dpeagreendesigns.ecrater.com

Making A Butcher Paper Stencil Tutorial -- Great Use for Chinese Symbols/Kanji and other Digital Stamps

I was browsing the web earlier this morning ... yep tooo early but I had a spinal injection yesterday and while I'm not in the pain I was I am uncomfortable and now dealing with the little and weird things steroids do to our body. Anyway, I've gotten off my subject (smile).

While Googling, I found this really terrific idea and "how to" on making stencils from butcher block paper. The sample used in this tutorial is an ampersand on a pencil skirt. Very unique and interesting and cool idea I thought.

Butcher paper is inexpensive as are my digital stamps and other sellers as well that are listed on Etsy. There is a tremendous amount of variety and you will probably find exactly the graphic to use to stencil and applique on one of your handmade or store-bought garments to embellish and update the look.

Viewing this tutorial got my brain daydreaming of all the items this particular idea can be instrumental in creating. Appliques on kitchen or bath towels to monogram or add to an Eastern theme, sweat or sweater sets with complimentary or continuing designs, and on and on.... I can't wait until my hands are in good enough shape again to experiment more with these ideas! I had to share this so I can come back and get the creative juices flowing again in a couple of months!

Thank you to Malissa, OCD Overtly Crafty Designer, Diva, Damsel, etc... for sharing this at BurdaStyle, the Burda Pattern Company blog.

Free Software I Use To Create My Designs & Patterns -- Part 2

To edit the pages of a pattern I create to add my copyright, titles and other verbiage in the font I like, I need to convert original pdf files printed from my creation software to a graphics format from "pdf". I have used a variety of free programs from pdf995. All are very good, but include ads that pop up and, sometimes when their servers are busy, the ads take forever and slow me down.

Irfanview takes care of this perfectly! It is another free graphics software that has a lot of ability, most of which I have not taken the time to discover. There are lots of articles on the web on how to use this freeware. One day I will take the time to see what else it can do for me. Right now, I use it to save my "pdf" files printed from my pattern creation software as "tif" files to open in my old graphics program, PaintShopPro 5 (I would provide a link but this program was purchased by Corel years ago and is no longer available). I've had this piece of software for years and paid for it. I learned to use it when I was creating my genealogy website to create the backgrounds, buttons, banners and other graphics I used there. If you're like me at all, it is difficult sometimes to take the learning curve time necessary to become expert at something new when that something old is working well .

To convert a "pdf" file to a "tif" file in Irfanview is easy. Select "File", "Save As" and the file type. There are several different settings to select from but if the end goal is to have a individual "tif" file to edit from each page of the "pdf" file, none of them need to be changed. The resulting "tif" file will appear as one file but when opened in your graphics program will become separate graphics for each page that was originally in the "pdf" file.



When I create quilt and quilt block patterns that I have freehand drawn, there are sometimes some wild sewing lines created by the algorhythm of the software I use. Using Irfanview to create "tif" files and then opening them in my graphics file allows me to clean these up and redraw appropriate lines instead, as well as add the aforementioned copyright text and update fonts.


I hope these articles give you some ideas to help you design your own patterns or for other uses in your daily work and play. Remember, my patterns, as well as custom orders, are always available at my Etsy shop, DPeaGreenDesigns.

Free Software I Use To Create My Designs & Patterns -- Part 1

I have purchased the software I use to actually create my counted cross-stitch and quilt patterns and translate for my Chinese Symbol/Kanji patterns. However, to clean up the design and to create and edit the patterns to a final excellent product, I use several free software programs. During the next week or so (or until I share all of them), I will be blogging this subject.

If you are like me and either new to or thinking of starting an online business creating items which can be delivered by email, I hope this information is helpful to you. There are so many freeware programs out there, it is sometimes overwhelming to choose. However, if like me, you don't have hundreds to thousands of dollars to spend on software, these programs may be exactly what will help you move to the next step in your goals.

Even though my translation software creates good quality symbols, the resulting graphic is raster and I can create a cleaner pattern from the start using a vector graphic. To read more about raster vs. vector graphics, Wikipedia has an excellent article.

Adobe Photoshop, Illustrator and CorelDraw do this but cost hundreds of dollars. Vector Magic used to be free but is no longer and if you create lots of design graphics, can also cost in the hundreds of dollars. I found that Inkscape does a more than adequate job of vectorizing a raster image.

Of course, a poor quality image is not going to give a good result no matter what software is used, but Inkscape also has many of the options available in Adobe Photoshop and Illustrator to trace and add layers to correct a poor quality graphic to better quality or to redraw it from scratch. One can save graphics in SVG format to edit or create different sizes later and also export to "raster" image formats.

The downside to this software is that if you have never used a professional graphics program, learning to use Inkscape can be challenging. There is no one "simple" manual available and a lot of what is written for the user from the site is more understandable by an experienced user or "techie". There are, however, lots of mini-tutorials available free on the web to learn how to create different graphics and text options which will teach one how to use the program. Google is our friend!

NEWS FLASH!!: There are two new "how to" Inkscape books available for pre-order from Amazon.com: The Book of Inkscape by Dmitry Kirsanov was published May 28, 2009, and Beginning Inkscape by Donna Benjamin, is scheduled to be published November 1, 2009.

I have not been able to view any of the contents of either book though I will be ordering The Book of Inkscape next payday. I will write a review once I do receive the book and have an opportunity to see if it is easy for a novice designer to decipher. If you are a book author and have written a help book for Inkscape, please email me so I can share this with others. The more options available to users, the better!

Tomorrow I will share details about another graphics freeware program I use to create my finished patterns.

Have a blessed Sunday!

How To Friday -- Making Balt Salts in a Bag

There's nothing like coming home from a long day to a nice, freshly drawn bath just hot enough to relax and with just the right combination of emollients and aromatics to soothe both the body and the spirit from a busy week! This version is my own and makes the skin so soft and body relaxed enough, it is ready for a good night's sleep and a terrific weekend!

Instructions

To Make the Bag:

1. Cut 7" by 11" strips of muslin cloth. Fold the 7" side and sew a 1/2" seam. This should leave you with a 3" wide, 11" long tube.

2. Fill tube with between 1/4 cup and 1/3 cup of bath salts or other filler. Fold in half and shake the salts down.

3. Fold the open ended side into envelope corners (forming a point) and then fold that section down to seal the open ends of your bag. A portion of the raw edge may show through and I've used my serger to finish these off after folding and filling the bag which also helps to seal the salts in. There are several ways to secure the top. I take a piece of jute string or twine about 2 feet long if I'm making a bath bag, shorter for hanging potpourri, and tie a knot in each end. I then use my sewing machine on the setting for attaching buttons and secure the twine to the bag and seal it up at the same time. I've been told you can use fabric glue as well, but I haven't tried it. I have stapled the bag to close it but wasn't happy with the results.

4. If the bag is not going into water, glue small silk rosettes and/or bits of lace and/or trim. I don't add other embellishments if the bag is going to be used in water since I want to keep everything as pure as possible and I haven't investigated what types of glues and embellishments might work without adding impurities to the water.

Bath Salts Recipe:

In a large bowl, mix well: 3 cups of Epsom Salts, 1 cup of Borax and 1 cup of oatmeal. This is the basic recipe. To this, add the scent or essential oil of your choice and mix well again. If the salts are going to be given and used from a jar, instead of using regular oatmeal which will not dissolve in water, use colloidal oatmeal. Food coloring can also be used for salts to be presented in a bottle or jar. Glass should be used to store salts made with scent as the aroma will dissipate over time in plastic.