提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

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
5 1 投票
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
文章分类
文章标签
0
希望看到您的想法,请您发表评论x
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!