返回列表 发帖
查看: 638|回复: 6

修改系统内置的DIY幻灯片样式。大家看看和原来的哪个好看。

14

主题

65

回帖

88

积分

渐入佳境

贡献
0 点
金币
5 个
发表于 2024-1-27 15:55:19 | 显示全部楼层 |阅读模式
微信截图_20240127154016.png

局部效果。

微信截图_20240127154200.png

整体效果

修改如下:
1、upload/static/js/common_extra.js
此文件主要是修改幻灯片的编号位置。
搜索并修改如下:
  1. if(!this.slidebar) {
  2.                 if(!this.slidenum && !this.slidestep) {
  3.                         this.container.parentNode.style.position = 'relative';
  4.                         this.slidebar = document.createElement('div');
  5.                         this.slidebar.className = 'slidebar';
  6.                         this.slidebar.style.position = 'absolute';
  7.                         this.slidebar.style.bottom = '4px'; /*原文件是:this.slidebar.style.top = '5px'; */
复制代码
2、upload/template/default/common/common.css
这里是修改这边标题的样式。
搜索并修改如下: (注:这里修改的内容比较杂乱,忘了之前的代码是什么了。你们就直接复制这个代码得了。)


  1. /* 幻灯片 */
  2. .slideblock { position: relative; }
  3. /* 标题内容 */
  4.         .slideshow { clear: both; }
  5.                 .slideshow li { position: relative; overflow: hidden; }
  6.                         .slideshow span.title { position: absolute; bottom: 0; left: 0;right:0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; text-align:right;font-size: 14px; text-indent: 14px; border-radius:6px;}
  7.                         .slideshow span.title, .slidebar li { background: rgba(0, 0, 0, 0.3); color: {LIGHTLINK}; overflow: hidden; }
  8.                         /* 编号 */
  9.                         .slidebar li { float: left; margin-right: 2px; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; cursor: pointer;border-radius:6px; }
  10.                                 .slidebar li.on { background: rgba(255, 255, 255, 0.5); color: #000; font-weight: 700; }
复制代码



至此修改完毕,登录后台,更新一下缓存即可。
个人网站:https://lindianxian.com/
回复

使用道具 举报

14

主题

65

回帖

88

积分

渐入佳境

贡献
0 点
金币
5 个
 楼主| 发表于 2024-1-27 16:34:25 | 显示全部楼层
用户不能编辑自己发的帖子啊。
个人网站:https://lindianxian.com/
回复 支持 反对

使用道具 举报

TaC

80

主题

480

回帖

605

积分

自成一派

贡献
4 点
金币
11 个
发表于 2024-4-3 10:18:21 | 显示全部楼层
我这试了下,幻灯片还是直角的,没有你这个圆角
回复 支持 反对

使用道具 举报

5

主题

94

回帖

116

积分

渐入佳境

贡献
1 点
金币
10 个
QQ
发表于 2024-4-23 08:28:38 | 显示全部楼层
TaC 发表于 2024-4-3 10:18
我这试了下,幻灯片还是直角的,没有你这个圆角

圆角自己加个样式就好了啊,如:border-radius: 20px; 这都懒得加吗
站长交流群:493651246 ,禁广告,纯交流,欢迎加入!
回复 支持 反对

使用道具 举报

TaC

80

主题

480

回帖

605

积分

自成一派

贡献
4 点
金币
11 个
发表于 2024-4-25 20:56:00 | 显示全部楼层
svihua 发表于 2024-4-23 08:28
圆角自己加个样式就好了啊,如:border-radius: 20px; 这都懒得加吗

是不乍会呢,我现在把DIY的图片都整成圆角了,但是统一的,没有一个一个的调,DIY的图片真不知是哪个样式,直接在DIY代码里加的。就这样了,比静态好些。
回复 支持 反对

使用道具 举报

0

主题

16

回帖

16

积分

初学乍练

贡献
0 点
金币
0 个
QQ
发表于 2024-4-25 23:26:44 | 显示全部楼层
你这个不错 比较漂亮
广州服务器托管http://www.gzsjzx.com 服务器租http://www.piis.cn
回复 支持 反对

使用道具 举报

5

主题

94

回帖

116

积分

渐入佳境

贡献
1 点
金币
10 个
QQ
发表于 7 天前 | 显示全部楼层
TaC 发表于 2024-4-25 20:56
是不乍会呢,我现在把DIY的图片都整成圆角了,但是统一的,没有一个一个的调,DIY的图片真不知是哪个样式 ...

我基本不用DIY,大多是创建后台模块,然后调用
站长交流群:493651246 ,禁广告,纯交流,欢迎加入!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2024-5-3 16:49 , Processed in 0.040934 second(s), 8 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2024 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表