Sunday, March 25, 2012

My Newest Design -- Abstract Circles




Fun abstract circles made of dots in purple, green and white on a chocolate background created in faux cross-stitch, all on quality products provided by CafePress.

As pictured left -- Scribble important stuff - lyrics, recipes, addresses, and more. Our Wire-O bound, 160 page journal has your choice of papers and measures 5" x 8", a handy on-the-go size to fit in your backpack. Get creative and let the muse flow.
  • Back cover made of thin black flexible textured plastic, measures 16/1000" thick
  • Front cover made of 12pt glossy paper, laminated for durability
  • Filled with your choice of 60lb bookweight (24 lb bond) paper -- blank, dot grid, lined college-ruled, or a task journal.

Your feedback would be lovely and thank you for taking the time. By the way, if you like to cross-stitch and want the pattern to make a pillow cover for yourself, a pdf pattern is available for you in both my Etsy and eCrater shops.



Saturday, March 24, 2012

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




Friday, March 23, 2012

Newest CafePress Design -- Hot Pink & Black Damask

Newest CafePress Design! Hot Pink and Black Damask. Wild yet elegant.






If you prefer to create your own needlework, the pattern for this design is available at both Etsy and eCrater.





Share: