Here is another fun tutorial for your Yahoo! Store! When I was making it I was thinking of different things this could be used for! Here are a couple I thought of;
- Daily Deals
- Special Promotional Stuff
- Contact Link
- Login Box
- Help Box
- Shipping Quote Box
- Testimonial Box
Now its just up to you what your are going to do with it. This tutorial will give you that basics needed put it you would like something more than this… you will have to change a couple things in the text and the css files. The RTML will need to be changed a bit as well!
[alert_yellow] View Demo [/alert_yellow]
So… lets get started now!
Store Manager >> Store Editor
This first thing that you will want to do is think of how you will want to using and decide where you would like it. Once you figure out these two things out, find that template and place the RTML below in there some how!
Now that you have the RTML in place you will need to add the script! Please download the link below and upload them into a fold called “bounce-box” within your main directory.
[alert_yellow]Download Script[/alert_yellow]
After you have uploaded the script files to your main directory… we will need to paste the script links into your variables page of your store.
Store Manager >> Store Editor >> Variables
Now that your in the variables page you will be to create a new variable. Click the “Define New Variable” on the top of the page. Name it “script-text”, without the quote and give it a “big text” type! After clicking contiune scroll down the variables page until you see the empty text box for the “script-text” and paste the code below into it. Please remember to change the “siteurl” to your own url.
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/jquery.bouncebox.1.0.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/script.js"></script> |
Now that we have the RTML in place, the script upload and the script into the your variables page… We will need to add a couple more new items to the variable page. Below are the two others that will need to be added.
box-bg – image
warning – image
Please download and upload these images below to the new variable items you have just made!
Now is’t time for the last thing… the css file!
Store Manager >> Store Editor >> Contents
This is the contents page where your should have most of your css files! We are going to click on the “new” button on top. Give it the id of “bounce-box” and a type of “css”… click continue and copy and paste the css code below into the css-text box!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
/* The bouncing box */
#box{
background:url($box-bg) repeat-x center top #fcfcfc;
height:115px;
padding:20px;
margin-top:-10px;
padding-top:30px;
width:400px;
border:1px solid #fcfcfc;
color:#494848;
text-shadow:1px 1px 0 white;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}
#box p{
font-size:25px;
background:url($warning) no-repeat 10px center;
padding-left:90px;
margin-top:-20px;
}
#box p b{
font-size:52px;
display:block;
}
#box,
#main,
a.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* Styling the big button */
a.button,
a.button:visited,
a.button:active{
color:white;
letter-spacing:-2px;
padding:20px;
display:block;
text-shadow:1px 1px 0 #145982;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
font-size:80px;
font-weight:bold;
text-align:center;
width:350px;
border:1px solid #60b4e5;
margin:60px auto;
/*
CSS3 gradients for webkit and mozilla browsers,
fallback color for the rest:
*/
background-color: #59aada;
background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}
a.button:hover{
text-decoration:none;
background-color: #5eb2e2;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}
/* Only needed for the demonstration page */
#main{
background-color:#073753;
height:500px;
margin:140px auto 50px;
padding:90px 30px 0;
position:relative;
width:640px;
}
#main p{
color:#ccc;
font-size:19px;
line-height:1.4;
margin-bottom:20px;
text-align:center;
}
#main p strong{
color:white;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px black;
margin-bottom:30px;
font-size:24px;
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
} |
Now this should about do it! Remember you will need to change the css colors and what not if you would like to create your own idea for the bounce box! Please be sure to share with us what you have done with it… I would love to see it!
...
View all articles by Adam