
Originally Posted by
nikki72
Hello! How would I make an image drop shadow like the one in the cherry zen template?
The easiest way, if you also like the way the product is laid out in the cherry zen template, is to download the cherry zen template, and move move the includes/templates/cherry_zen/templates/tpl_product_info_display.php to includes/templates/apple_zen/templates/
Then you'll need to add some css from cherry zen to your stylesheet.css (you should also search through the apple_zen stylesheet.css and remove and sections of the same name so there aren't duplicates):
Code:
/* product info page css */
#cartAdd {
width:125px;
text-align:center;
margin:10px auto;
float:right;
padding-right:10px;
}
#cartAdd input {
margin:.3em 0 0 0;
}
#productDescription {
border:1px solid #bfbfbf;
margin-top:20px;
clear:both;
}
#rightFloat {
float:left;
width:45%;
}
#leftFloat {
float:left;
text-align:center;
}
#productDetailsList {
float:left;
}
#productAttributes {
width:100%;
float:left;
border:1px solid #bfbfbf;
padding-left:5px;
margin:5px 0 0 10px;
}
#productImage {
margin:0 auto;
text-align:center;
}
.imgLink {
text-align:center;
margin:0 auto;
display:block;
width:100%;
}
#friendReview {
width:200px;
padding:15px 0 10px 0;
float:left;
clear:left;
text-align:left;
}
.reviewCount {
float:left;
padding-left:2px;
}
#productReviewLink {
padding:5px 0;
}
.wrapperAttribsOptions {
line-height:2em;
width:auto;
float:left;
}
.wrapperAttribsOptions h4 {
padding-right:15px;
}
/* end product info page css */
and
Code:
/* css for product image drop shadow and border. To disable the drop shadow and border, simply delete or comment out this section */
#productMainImage {
float:left;
background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
background: url("../images/shadow.gif") no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
#productMainImage img {
display: block;
position: relative;
background: #fff;
margin: -3px 6px 6px -3px;
border: 1px solid #a9a9a9; /* defines the border for the product image. To remove the border delete or comment out this line, AND padding: 4px; below */
padding: 4px;
}
/* end css for product image drop shadow */
Bookmarks