How to add snowfall effect to your blog, website, store

How to add snowfall effect to your blog, website, store?

All you need is one image and one line in your CSS. No JS involved. Believe me it is better not to use extra JS on things like that because any added JS snippet can hurt your website main functions, especially if this is your webshop we are talking about.

Your Steps:

1. Upload snowfall image somewhere to the web and copy this image location

Here is the image I’ve used:

snow-transparent-titel

2. Imagine you want to put this snowfall image on your webpage background.

In this case look in your CSS file for body selector and add to it the following line:

body
        {
        background:url(yourimagepath) 0 0;
        }

Save your CSS file and enjoy your snow fall.

This is how it looks like on my Cafepress web store in the end of the year:

http://www.cafepress.com/technotextnl

Save

Advertisements

How to publish your code snippet in WP post

I must say right away I’ve found one WP shortcoming so far – you just can’t type a code snippet to show it properly as a snippet in your post.
So after a while I figured: wrap your code snippet both in code tag and pre tag. Code tag with square brackets, pre tag – as the ordinary HTML tag.

This is bytesize post – tutorial but it will save you the time you spend on looking all over the web on how to post just few code lines!

And – every time you edit your post, it will kill your snippet so you rather write a new post but don’t touch the one with your nifty snippet! Pffff…

 

search on color store feature

Search Products on Color part 2

Going back to my previous post on Color Search, where I described how to add Shop by color feature to your store. Doesn’t really matter if it is Cafepress store you’d like to add this extra Search function or to your blog…

So how practically you can add Search on color feature to your website?

Very simple!

    1. Make search on colors you want to suggest to your customers on your website and save all links which lead to this products on a certain color.
    2. Add this code snippet in your HTML ( in place you want this color chart to appear:
<pre><div style="text-align:center;">
<a style="text-decoration:none;background:#B30302;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_red"></a>
<a style="text-decoration:none;background:black;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_black"></a>
<a style="text-decoration:none;background:grey;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_grey"></a>
<a style="text-decoration:none;background:#ABF0D1;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_mint"></a>
<a style="text-decoration:none;background:#FFF4D6;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_cream"></a>
<a style="text-decoration:none;background:#FCCED0;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_pink"></a>
<a style="text-decoration:none;background:#8A0034;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_cranberry"></a>
</div>
 <div class="clear">&nbsp;</div></pre>

3. Don’t forget to replace my search on color links to yours and remove  pre tags! Save your changes.
The color chat will appear:

shop-by-color

You can see live example of Search on color in my Cafepress Store

This simple HTML snippet is actually a list of links, displayed as the blocks of color. Don’t forget to replace my search on color links to yours!

Of course you can style this snippet further, laying color boxes in pairs, making color boxes smaller, the options are endless, just make some changes in this HTML snippet.

 

 

 

Save

Save

Cafepress Store – Shop by Color Feature

There is a thing with my Cafepress store that it lives on its own because there is no traffic to it sometimes and all sales I got on Cafepress so far, went through the “Cafepress Marketplace”.  But sales or no sales, I like to have this store  to test simple code snippets to get the store to look pretty and functional at the same time. So today I make myself happy introducing Shop by color feature:

shop-by-color

So far there are seven most popular gift colors in this little swatch but now I think I will add some more colors to it and may be to go further and will add some kind of image map of designs. Very excited about it!

You are welcome to pick this idea for your own store!

Save