如何对追格小程序排行榜进行UI界面调整
当您安装了追格小程序排行榜模块时,想要结合自己的小程序风格调整追格小程序排行榜的模板展示,排行榜可以通过css进行调整,可以自己定义排名序号的颜色,大小,字体展示,还可以通过后台控制追格小程序排行榜的背景图。
这里给大家列一些调整的关键点
1. 背景图空间的控制(顶部大图)
.zhuige-ranking {
padding: 400rpx 20rpx 80rpx;
}
/** 这里顶部的padding是控制顶部大图显示的区域,可以结合自己需求改变大小 **/
2. 排序序号的控制(默认序号,前3名,或者自定义前n名)
/** zhuige-ranking-num 控制排名序号宽度和间距 **/
.zhuige-ranking-num {
width: 60rpx;
text-align: center;
padding-right: 20rpx;
}
/** zhuige-ranking-num text 控制排名序号的默认字体,字号,粗细,颜色
如果要控制字体,需要增加 font-family: 来设置字体
**/
.zhuige-ranking-num text {
font-size: 36rpx;
font-weight: 600;
color: #999999;
}
/** 以下的 nth-child(1) ~ nth-child(3)分别设置排行榜的 1,2,3的颜色
如果有必要,可以单独设置字体,字号,颜色,粗细
如果有对其他名次设置字体,字号,颜色,粗细的需求,可以参考1,2,3的写法
增加nth-child(4) ~ nth-child(n),n就是你需要的第几名的具体设置
**/
.zhuige-ranking-list .zhugie-info-block:nth-child(1) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(1) .zhuige-ranking-num text {
color: #FF6146;
}
.zhuige-ranking-list .zhugie-info-block:nth-child(2) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(2) .zhuige-ranking-num text {
color: #1D9FFC;
}
.zhuige-ranking-list .zhugie-info-block:nth-child(3) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(3) .zhuige-ranking-num text {
color: #F5AD1A;
}
-
如何在追格资讯小程序(Uniapp专业版)中将滚动图标调整为自动换行模式追格资讯小程序(Uniapp专业版)中,首页中的图标默认是滚动模式,有些用户希望调整为自动换行模式。那么我们该如何调整呢?
-
WordPress后台文章/用户/评论/标签列表如何显示更多数据WordPress后台文章或用户等列表,默认每页显示20条数据,若我们想显示更多应如何设置?
-
WordPress社区论坛插件WPForo ForumWPForo Forum是一个简易的WordPress社区论坛插件,早些时候追格小编分享过bbPress社区论坛插件,有兴趣的可以看看《WordPress插件之社区论坛插件bbPress》。
-
WordPress外观自定义报错 Uncaught Exception: Supplied nav_menu_item value missing property: description近期一些小伙伴在追格小程序交流群中反馈WordPress外观自定义报错Uncaught Exception: Supplied nav_menu_item value missing property: description。
-
兔年首更:追格小程序V1.5.0发布追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
WordPress小程序直播之追格小程序微信直播模块追格“直播”插件(模块)基于追格小程序(基于WordPress)和微信小程序直播组件开发,人生如戏,每个人都是生活的导演。
暂无评论,抢个沙发...