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

影子江湖 · 發表於 2024-8-29 22:21:11

{014AEB9E-5D31-45b1-B7BE-080213CC1316}.png

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

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

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

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最底下试试

如果你不知道你勋章的数字是多少,你就审查元素勋章就能看见数字是多少了,剩下的就把我分享的那个代码里的数字改成你勋章的数字就行了

{6A230EB7-75C3-4218-8162-E224D815C153}.png

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

顺便分享下我用的图标吧

图标, 你的, 勋章, 左上角, 加上

文強 · 發表於 2024-8-29 22:34:52

这个不错，改天试一下。

海哥 · 發表於 2024-8-30 13:03:42

你的网站发来学习下撒，

天外飘仙 · 發表於 2024-8-30 16:48:34

感谢楼主的无私分享

拈花小和尚 · 發表於 2024-9-20 23:47:02

这个好。

影子江湖 · 發表於 2024-10-5 12:18:08

顶一波

ahfanxin · 發表於 2024-10-6 20:08:28

收藏了，不错。

Sorrel · 發表於 2024-10-14 16:00:46

原来是这样，理解了。不过我有更好的方法。

图片加载起来比较慢，并且你这也不是一套。

div#medal_33 {
content: '极品';
background: linear-gradient(to right, #ecffdd, #e0fee2, #d1faea, #b8eaeb, #bbeffa, #b9e7f7, #bddcf9, #c6d2fc, #dec2ff, #e8befd, #f4bdf7, #f7bee9);
margin-left: -1px;控制左右位置
transform: translateY(-20px);控制上下位置
}

当然还可以添加一些圆角角标的来美化。因为我就打算这样干。

Sorrel · 發表於 2024-10-14 21:15:13

参考你的方法，我想用css做会更友好。

影子江湖 · 發表於 2024-10-14 21:45:09

主要是没啥好的图标素材

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

瀏覽過的版塊