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
分类
标签
Load WordPress Sites in as fast as 37ms!
建站交流群
建站咨询请联系企业微信
技术支持/服务

推荐阅读

UE插件Ajax Search元素按钮颜色透明度CSS重写

本文记录我使用UE插件Ajax Search元素按钮颜色透明度CSS重写的代码的过程。 在使用UE的Ajax Search元素时,发现其按钮被默认设置了透明度。于是只能手动对代码中的CSS进行修改。

Elementor如何隐藏页面标题?

如何在Elementor编辑中隐藏页面标题呢?在使用Elementor编辑一个新的页面时,页面顶部会出现当前页面标题?这个标题是无法删除的,但是我们可以通过Elementor的页面设置来隐藏它。 1、

Elememtor设置全局的内容宽度

本文介绍如何使用Elememtor设置全局的内容宽度,默认情况下Elementor Containner的宽度是Boxed 1140px,你可以针对这个Containner去修改内容的宽度,但是如果你

目录

搜索你想找的内容

站长自用主机推荐
前三个月享85折优惠
注册无需身份验证
点击下方LOGO注册【无需绑卡】免费试用3天
外贸建站服务
提供外贸建服务:模板建站、定制建站、小语种建站,通过微信联系咨询
建站咨询请联系企业微信
WP建站技术交流群
建站咨询请联系企业微信
建站咨询购买主题插件模板