css Woocommerce产品档案/查看CSS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Woocommerce产品档案/查看CSS相关的知识,希望对你有一定的参考价值。
/* product archive */
/* ------------------------------------------------------------------------- */
body.archive ul.products li .details {
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 30px;
line-height: 30px;
background: url('css/img/black-bg.png');
color:#666;
font-family: 'ProximaNovaSemiBold';
font-size: 0.9em;
letter-spacing: 1px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color:white;
}
body.archive ul.products li .details a.add_to_cart_button {
border: 0 !important;
height: 30px !important;
text-indent: 10px;
line-height: 30px !important;
padding: 0 !important;
text-shadow: none !important;
-webkit-box-shadow: inherit !important;
border-radius: inherit !important;
color: white !important;
font-weight: normal;
background: transparent !important;
position: absolute;
top: 0;
left: 0px;
}
body.archive ul.products li .details span.price {
text-align: right;
color: white !important;
margin: 0 10px 0 0;
}
/* product view */
/* ------------------------------------------------------------------------- */
body.single-product .summary h1 {
border-bottom: none;
}
body.single-product .left {
width: 70%;
float: left;
}
body.single-product .right {
width: 25%;
float: right;
}
body.single-product .left .summary {
position: relative;
}
body.single-product .left .summary button.single_add_to_cart_button {
color: white !important;
}
body.single-product .left .summary .addthis_toolbox {
margin: 0 0 10px 0;
}
body.single-product .left .summary .addthis_toolbox a.addthis_button_pinterest_pinit {
margin: 0 0 0 -30px;
}
body.single-product .left .summary span.price {
position: absolute;
left:-110px;
top:20px;
width: 60px;
height: 60px;
text-align: center;
font-family: 'ProximaNovaSemiBold';
font-size: 1.5em;
line-height: 60px;
display: block;
background: white;
color:#666;
border-radius: 80px;
-moz-box-shadow: 0px 0px 8px #333;
-webkit-box-shadow: 0px 0px 8px #333;
box-shadow: 0px 0px 8px #333;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
body.single-product .left .summary span.price span {
color:#666 !important;
}
body.single-product .left .images .main-img {
position: relative;
}
body.single-product .left .images .main-img img {
display: block;
}
body.single-product .left .images .main-img h2.btm {
width: 100%;
height: 30px;
line-height: 30px;
display: block;
margin: 0;
background: rgba(0,0,0,0.7);
color:white;
text-transform: uppercase;
text-align: left;
font-family: 'ProximaNovaSemiBold';
font-size: 0.95em;
padding: 0;
border-bottom: none;
position: absolute;
left:0;
bottom:2px;
z-index: 200;
}
body.single-product .left .images .main-img h2.btm .zoom {
float:left;
margin: 0 0 0 10px;
}
body.single-product .left .images .main-img h2.btm .zoom span.icon {
height: 30px;
padding: 0 20px 0 0;
display: inline-block;
background: url('css/img/zoom-icon.png') no-repeat center right;
}
body.single-product .left .images .main-img h2.btm a.view-larger {
float:right;
margin: 0 10px 0 0;
color:white;
}
body.single-product .left p {
font-size: 0.80em;
}
body.single-product .left .images .main-img a.shop {
position: absolute;
right:-120px;
display: block;
padding: 0 15px 0 0;
height: 30px;
background: url('css/img/link-arrow.png') no-repeat center right;
line-height: 30px;
bottom:3px;
font-family: 'ProximaNovaSemiBold';
color:black;
font-size: 0.85em;
text-transform: uppercase;
}
body.single-product .left .related h2 {
font-family: 'ProximaNovaRegular';
text-transform: uppercase;
}
body.single-product .left .related ul.products li {
width: 15% !important;
}
body.archive .right, body.single-product .right {
width: 20%;
position: relative;
float:right;
text-transform: uppercase;
font-family: 'ProximaNovaRegular';
font-size: 0.9em;
}
body.single-product .right a:hover {
color:#f072a8;
}
body.single-product .upsells h3, body.single-product .upsells .details {
display: none !important;
}
body.single-product .upsells ul.products li.product {
width: 20% !important;
}
body.single-product .right ul.xoxo li#text-2 {
display: none;
}
body.single-product .right ul.xoxo li.widget_shopping_cart ul li {
width: 100%;
}
以上是关于css Woocommerce产品档案/查看CSS的主要内容,如果未能解决你的问题,请参考以下文章