专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

Unlimited Elements相册元素Thumbnail Gallery优化CSS代码

文章导航

Unlimited Elements提供一个相册元素Thumbnail Gallery,但是初始的外观我觉得并不好看,并且有些样式并没有开放修改,所以我自己写了CSS代码来修改其外观。、

以下是初始的元素外观,其中底部的背景以及左右滑动是没发修改的,上面图片也不可以修改圆角。

image 10 - Unlimited Elements相册元素Thumbnail Gallery优化CSS代码 - NUTSWP

通过CSS代码修改之后的效果:

image 11 - Unlimited Elements相册元素Thumbnail Gallery优化CSS代码 - NUTSWP

CSS代码如下:


/*设置小图区域为全宽并取消左边的距离*/
.ug-thumbs-strip{
    width: 100% !important;
    left: 0px !important;
}
/*隐藏影藏文本框按钮*/
.ug-default-button-hidepanel{
    display: none;
}
/*修改小图区域的背景颜色*/
.ug-strip-panel{
    background: #02010100 !important;
}
/*修改大图的边框和圆角*/
.ug-gallery-wrapper .ug-slider-wrapper{
    border: solid 1px #dde1e5;
    border-radius: 5px;
   
}

其他的可以通过元素设置来实现,比如影藏文本框

image 12 - Unlimited Elements相册元素Thumbnail Gallery优化CSS代码 - NUTSWP

取消轮播

image 13 - Unlimited Elements相册元素Thumbnail Gallery优化CSS代码 - NUTSWP

设置小图的圆角

image 14 - Unlimited Elements相册元素Thumbnail Gallery优化CSS代码 - NUTSWP
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
微信联系我
Whatsapp联系我
文章分类
文章标签
专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
外贸建站交流群
广告勿扰
企业微信
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!