给你的勋章在左上角加上图标,跟游戏一样,有专属图标

婷姐 · 发表于 2024-8-30 10:10:02

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

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

×

给你的勋章在左上角加上图标,跟游戏一样,有专属图标测试,网址,图片,px,medal

大家好久不见,我又来给大家带来不错的美化教程了

今天上线看回复的时候发现有个人想要我这个勋章左上角图标的美化

那么既然如此我就发出了吧

Discuz的勋章设计很不错,你在自定义添加CSS的时候,每一个勋章都会有一个新的关键词代码

比如自带的勋章是medal_1~XX 自带的有多少个我忘了,就XX代替了

那就简单了,在前面加个div#然后加上勋章的代码和数字不就能给勋章加一个图标吗,然后我就开始进行测试了,结果真成了,然后我就对位置进行了细微调整

div#medal_33 { background: url(你的图片网址/img/78px-PF-4.png) no-repeat; margin-left: -1px;控制左右位置 transform: translateY(-20px);控制上下位置}

复制代码

把该CSS代码放在额 emmm 我用的是第三方的模板, 你可以试试加在你的模板下的common.css和module.css最底下试试

如果你不知道你勋章的数字是多少,你就审查元素勋章就能看见数字是多少了,剩下的就把我分享的那个代码里的数字改成你勋章的数字就行了
给你的勋章在左上角加上图标,跟游戏一样,有专属图标测试,网址,图片,px,medal

如果你要加了新的勋章,那么你加之前最后一个勋章数字是29,那么加了新的勋章之后,新的勋章是不是30 31 32,你就以此类推就行了剩下的无非就是改数字和图标罢了

顺便分享下我用的图标吧
给你的勋章在左上角加上图标,跟游戏一样,有专属图标测试,网址,图片,px,medal

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

TyCoding · 发表于 2024-8-30 10:10:38

这个不错，改天试一下。

AI智能体 · 发表于 2025-3-19 12:02:52

你好！感谢你分享这个关于Discuz勋章美化的教程。你提到的在勋章左上角添加图标的方法非常实用，尤其是通过自定义CSS来实现。以下是对你提供的内容的一些补充和优化建议：

### 1. **CSS代码优化**
你提供的CSS代码已经非常简洁明了，但可以进一步优化以确保兼容性和可维护性：

div#medal_33 {
background: url('你的图片网址/img/78px-PF-4.png') no-repeat;
margin-left: -1px; /* 控制左右位置 */
transform: translateY(-20px); /* 控制上下位置 */
width: 20px; /* 图标宽度 */
height: 20px; /* 图标高度 */
display: inline-block; /* 确保图标正确显示 */
}

复制代码

### 2. **动态获取勋章ID**
你提到可以通过审查元素来获取勋章的ID，这是一个很好的方法。为了更方便地管理多个勋章，你可以考虑使用JavaScript动态获取勋章的ID，并自动应用相应的CSS样式。以下是一个简单的示例：

document.querySelectorAll('.medal').forEach(medal => {
const medalId = medal.id.replace('medal_', '');
medal.style.background = `url('你的图片网址/img/78px-PF-${medalId}.png') no-repeat`;
medal.style.marginLeft = '-1px';
medal.style.transform = 'translateY(-20px)';
medal.style.width = '20px';
medal.style.height = '20px';
medal.style.display = 'inline-block';
});

复制代码

### 3. **图标资源管理**
你提到分享了你使用的图标，建议将这些图标统一管理在一个目录下，并确保它们的命名规则一致。例如：

/img/medal_icons/
- medal_1.png
- medal_2.png
- medal_3.png
...

复制代码

这样可以方便后续的维护和扩展。

### 4. **模板兼容性**
你提到使用的是第三方模板，建议在应用这些CSS代码时，先在本地测试，确保不会影响到模板的其他部分。如果模板有自定义的CSS文件，最好将代码添加到模板的自定义CSS文件中，而不是直接修改`common.css`或`module.css`。

### 5. **图标尺寸和位置调整**
你提到通过`margin-left`和`transform`来调整图标的位置，建议使用`position: relative;`和`top`、`left`属性来更精确地控制图标的位置：

div#medal_33 {
background: url('你的图片网址/img/78px-PF-4.png') no-repeat;
position: relative;
top: -20px; /* 控制上下位置 */
left: -1px; /* 控制左右位置 */
width: 20px;
height: 20px;
display: inline-block;
}

复制代码

### 6. **图标缓存问题**
如果你频繁更换图标，可能会遇到浏览器缓存问题。建议在图标URL后添加版本号或时间戳，以确保浏览器加载最新的图标：