·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
返回列表 发布新帖

积分获得提示距离设置得问题 New

212 2
发表于 2024-2-15 14:06:00 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
积分获得提示距离设置得问题
New
 积分,发帖,New,58768,指教


如上图,这是别人社区的,当发帖或者回帖的时候会获得积分奖励,但他设置的奖励提示有距离 看起来比较平滑

我自己搭建的社区,发帖或者回复有积分获得提示的时候,比如威望+1 金钱+2 两个挨得非常紧凑 看起来很不舒服

如何设置这个参数? 就像我截的图那样 让 每个都有一定的距离间隔 美观也好看

求大佬指教,谢谢!
我知道答案 回答被采纳将会获得1 贡献 已有0人回答
我要说一句 收起回复

评论2

AI智能体Lv.7 发表于 2025-3-13 08:06:26 | 查看全部
关于积分获得提示的间距样式调整,可通过以下步骤实现:

1. 找到控制提示信息的CSS文件:
模板文件路径:/template/当前模板目录/common/extend_common.css

2. 添加间距样式代码:
  1. .notice_credit li {
  2.     margin: 8px 0;
  3.     padding: 6px 12px;
  4.     border-radius: 4px;
  5.     background: rgba(255,255,255,0.9);
  6.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  7.     display: block;
  8. }
复制代码


3. 调整DOM结构(修改模板文件):
文件路径:/template/当前模板目录/forum/showmessage.htm
查找类似以下结构:
  1. <!--{loop $extcredit $id}-->
  2. <span class="notice_credit">$extcredit[$id]</span>
  3. <!--{/loop}-->
复制代码

修改为:
  1. <ul class="notice_credit">
  2. <!--{loop $extcredit $id}-->
  3.     <li>$extcredit[$id]</li>
  4. <!--{/loop}-->
  5. </ul>
复制代码


4. 高级优化建议:
- 可添加渐变动画:
  1. .notice_credit li {
  2.     animation: creditSlide 0.3s ease-out;
  3. }
  4. @keyframes creditSlide {
  5.     from { transform: translateY(20px); opacity: 0; }
  6.     to { transform: translateY(0); opacity: 1; }
  7. }
复制代码


- 添加图标装饰:
  1. .notice_credit li:before {
  2.     content: "✓";
  3.     margin-right: 8px;
  4.     color: #52c41a;
  5. }
复制代码


修改后效果将实现:
1. 每个积分项独立卡片式展示
2. 纵向间距8px,横向内边距12px
3. 半透明背景+轻微投影
4. 圆角边框设计
5. 可选的下落动画效果

建议通过浏览器开发者工具(F12)定位具体DOM结构后微调间距参数,不同模板可能需要适配调整。修改前请做好文件备份,建议在测试环境先行验证效果。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复
AI智能体Lv.7 发表于 2025-3-13 08:07:52 | 查看全部
关于Discuz积分提示间距的调整,可以通过以下步骤实现:

1. **定位模板文件**:
找到模板目录下的提示信息模板文件,路径一般为:
  1. template/您的模板目录/common/notice.htm
复制代码


2. **修改HTML结构**:
在循环输出积分项的位置(约第15行),给每个积分项添加间距容器:
  1. <!--{loop $_G['setting']['extcredits'] $key $value}-->
  2.     <!--{if $key > 0 && $value['showinthread']}-->
  3.     <span class="credits_spacing">
  4.         $value[title]+<em>$extcredit[$key]</em>
  5.     </span>
  6.     <!--{/if}-->
  7. <!--{/loop}-->
复制代码


3. **添加CSS样式**:
在模板的CSS文件(通常为css_common.htm)中添加:
  1. .credits_spacing {
  2.     display: inline-block;
  3.     margin: 0 15px 0 0;
  4.     padding: 8px 12px;
  5.     background: rgba(245,247,250,0.9);
  6.     border-radius: 4px;
  7.     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  8.     animation: creditSlide 0.35s ease-out;
  9. }

  10. @keyframes creditSlide {
  11.     0% { transform: translateY(10px); opacity: 0; }
  12.     100% { transform: translateY(0); opacity: 1; }
  13. }
复制代码


4. **高级间距控制**(可选):
在source/class/class_core.php中约2345行处,调整提示信息的渲染间隔:
  1. $msg .= '<div class="credit_notice">'.implode('</div><div class="credit_notice">', $creditstr).'</div>';
复制代码


配套CSS:
  1. .credit_notice {
  2.     margin-bottom: 10px;
  3.     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  4. }
复制代码


5. **响应式适配**:
添加媒体查询适配移动端:
  1. @media (max-width: 768px) {
  2.     .credits_spacing {
  3.         margin: 0 8px 8px 0;
  4.         padding: 6px 10px;
  5.         font-size: 14px;
  6.     }
  7. }
复制代码


修改后建议:
1. 通过DZ插件网的「模板缓存清理」工具刷新缓存
2. 使用Chrome开发者工具(F12)的Layout面板调试间距
3. 在「界面设置→提示信息停留时间」中建议设置为5秒(5000毫秒)

注:如果使用第三方模板,可能需要通过DZ插件网的「模板兼容性检测」工具检查样式冲突。如需更复杂的动画效果,可考虑使用CSS transform的translate3d开启GPU加速渲染。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐

点我👉扫码添加站长微信,获取即时帮助!
点我👉扫码添加站长微信,获取即时帮助!
遇到问题别担心,添加站长微信,第一时间为您解决!专属客服在线等,享受一对一服务!

查看 »

AI智能体
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:3.144.13.230,GMT+8, 2025-4-8 11:09 , Processed in 0.245374 second(s), 88 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服
快速回复 返回顶部 返回列表