< 返回
当前位置:
打印

自定义CSS代码

目录
 class="hidden-xs hidden-sm"  class="color-primary"
 /*阴影*/
-webkit-box-shadow: 0px 0px 35px 1px rgb(55 41 67 / 10%); 
-moz-box-shadow: 0px 0px 35px 1px rgba(55,41,67,0.1);
box-shadow: 0px 0px 35px 1px rgb(55 41 67 / 10%);
/*详情页主图缩略图片*/
.woocommerce-product-gallery .thumbnails.owl-carousel .owl-item {border: 0.5px solid #ddd;}   /*缩略图加边框*/
.product-image-thumbnail img{max-height: 108px;object-fit: contain;} /*缩略图强制等比例缩小*/
/*分类列表前符号*/
.product-categories li:before {
content: "\f113";
font-family: woodmart-font;
line-height: 35px;
font-size: 12px;
padding-right: 5px;
}

 

/*边框渐变色*/
border:10px transparent solid;
border-image: -webkit-linear-gradient(to right,#019cdd,#e6d723) 30 30;
border-image: -moz-linear-gradient(to right,#019cdd,#e6d723) 30 30;
border-image: linear-gradient(to right,#019cdd,#e6d723) 30 30;
/*下拉菜单自动宽度,且最小宽度200px*/
.menu-simple-dropdown li{white-space: nowrap;}
.menu-simple-dropdown .sub-menu-dropdown, .menu-simple-dropdown .sub-sub-menu {min-width: 200px;width: auto;}
/*只针对woodmart,添加自定义侧边栏, 查看侧边栏ID  https://prnt.sc/122u341*/
<php> php dynamic_sidebar( 'sidebar-侧边栏ID' ); </php>; 

/*段落P 前面加before小图标,悬停才显示段落P内容*/

.cinfotxt:before{
content:"\f05a";
font-family: "Font Awesome 5 Free";
font-size:18px;
}
.cinfotxt:hover p{ visibility: visible; }
.cinfotxt p{
visibility: hidden;
width: 100%;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
top:-100px;
z-index: 1;
}

/*woocommerce侧边栏只显示当前分类和子分类-在分类超多的情况下*/
.widget_product_categories .product-categories .cat-item{display:none;}
.widget_product_categories .product-categories .cat-parent{display:flex!important;}
.widget_product_categories .product-categories .cat-parent .cat-item{display:flex!important;}
/*或者,woocommerce_product_categories-2为小工具的指定ID*/
#woocommerce_product_categories-2 .cat-item{display:none;}
#woocommerce_product_categories-2 .current-cat{display:flex!important;}
#woocommerce_product_categories-2 .current-cat .cat-item{display:flex!important;}
#woocommerce_product_categories-2 .current-cat-parent{display:flex!important;}
#woocommerce_product_categories-2 .current-cat-parent .children .cat-item{display:flex!important;}

/*carousel类的相册按钮-PC,.bannerbutton为模块Class*/
.bannerbutton .owl-nav&gt;div[class*=next] {right: 30px;}
.bannerbutton .owl-next {background-color: #ffffff91;border-radius: 50%;}
.bannerbutton .owl-nav&gt;div[class*=prev] {left: 30px;}
.bannerbutton .owl-prev {background-color: #ffffff91;border-radius: 50%;}

/*carousel类的相册按钮-平板-手机,.bannerbutton为模块Class*/
.bannerbutton .owl-nav&gt;div[class*=next] {right: 30px;}
.bannerbutton .owl-next {background-color: #ffffff91;border-radius: 50%;}
.bannerbutton .owl-nav&gt;div[class*=prev] {left: 30px;}
.bannerbutton .owl-prev {background-color: #ffffff91;border-radius: 50%;}
.bannerbutton .wd-btn-arrow[class*=next] {justify-content: center;}
.bannerbutton .wd-btn-arrow[class*=prev] {justify-content: center;}
div[class*=wd-carousel-spacing] .owl-nav&gt;div[class*=next] {margin-right: 0px;}
div[class*=wd-carousel-spacing] .owl-nav&gt;div[class*=prev] {margin-left: 0px;}

/*锚点点击,平滑滚动,给body,html写*/
scroll-behavior: smooth;
/*1.单行文本溢出用省略号显示*/
.p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*2.多行文本溢出用省略号显示:*/ 
.p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} 
 
/*悬停元素时翻转*/
.fa-stack:hover{
transition: 0.9s;
transform: rotateY(180deg);
}
 
/*RTL元素翻转*/
rtl{direction: rtl;}

WPbarkey选项卡标题背景效果

选项卡Tab CSS效果

/*WPbarkey选项卡标题背景效果*/
.wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-tab .vc_tta-title-text{ padding-left: 15px;padding-right: 15px;line-height: 2.5;}
.wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-tab>a:hover .vc_tta-title-text:after, .wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-tab.vc_active .vc_tta-title-text:after {
height: 50%;
}
.wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-tab .vc_tta-title-text:after {
bottom: 0;top: unset;
left: 0;
width: 100%;
height: 2px;
background-color: var(--wd-primary-color);
transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
z-index: -1;
}

/*图片处理白底背景*/
img{mix-blend-mode: multiply;}
目录

登录

还没有账户?

开始输入你要找的文章。
商店
0 项目 购物车