美化小米签到按钮,贼好看

影子江湖

开始教程

步骤可能会有点多

我们先打开source\plugin\k_misign\template下的button_default.htm文件

1. .midaben_con {
   
2.         font-family:arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
   
3.         //background-color:#fff;
   
4.         width:210px;
   
5.         height:50px;
   
6.         border-radius:5px;
   
7.         /*position:relative*/
   
8. }

复制代码

然后是下面的




        {//background-color:{$setting['bcolor']};
        height:50px;
        display:block;
        position:relative;
        border-radius:50px;
        //background-image:url(./source/plugin/k_misign/static/default/tou.png);
        background-repeat:no-repeat;
        background-position:14px 8px;
        cursor: pointer;
        background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
        background-size: 400%;
}

1. 
   

复制代码

然后开始删代码



打开k_misign\template/button_default_return.htm

然后把下面这段代码全删掉

1.             <div class="fblock">
   
2.                 <div class="all">
   
3.                     {$stats['todayq']}{lang k_misign:people}
   
4.                 </div>
   
5.                 <div class="line">
   
6.                     {$row}
   
7.                 </div>
   
8.             </div>

复制代码

之后继续打开button_default.htm



.midaben_con .midaben_signpanel:before {
    content: "";
    //position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    border-radius: 50px;
    background-size: 400%;
    filter: blur(20px);
}


{
        position:absolute;
        color:#fff;
        width:110px;
        text-align:center;
        height:30px;
        font-size:22px;
        line-height:30px;
        top:11px;
        left:45px
}

1. 
   

复制代码

依旧是这个文件
.midaben_con .visted 这个代码的

1. {
   
2.         background-position:7px 8px
   
3. }

复制代码

.midaben_con .visted .font的

1. {
   
2.         font-size:18px;
   
3.         line-height:25px;
   
4.         width:{$setting['width2']}px;
   
5.         text-align:center;
   
6.         left:40px;
   
7.         top:8px;
   
8.         text-shadow:0 1px 0 {$setting['hcolor']};
   
9. }

复制代码

最后一步   签到后的状态 会有一个已签到

我们删掉一个代码就行

1.             <span class="nums">
   
2.                 {lang k_misign:row}{$qiandaodb['lasted']}{lang k_misign:days}
   
3.             </span>

复制代码

打开k_misign\template/button_default_return.htm


到这差不多就结束了

如果有啥问题可以回复 我会解决的  理论上应该是没了   毕竟这个美化代码 时间有点久 我是直接我拿我网站一点一点找出来的 如果大家弄了之后发现有不美观的地方可以回复加上图片

这些代码都是我改好的,你们复制后直接替换就行

湖中沉

我们的插件，如果真的很多人喜欢这个样式，我们也可以做成组件提供

影子江湖

湖中沉 发表于 2023-3-21 20:18
我们的插件，如果真的很多人喜欢这个样式，我们也可以做成组件提供

大大好

6718522

看着不错！话说 首页  那个首页4格怎么自己DIY 去设置 模块有点不懂啊！

6718522

我看上这边这一块了 我该怎么做

影子江湖

6718522 发表于 2023-3-22 19:12
我看上这边这一块了 我该怎么做

模板自带的DIY

6718522

影子江湖 发表于 2023-3-22 20:24
模板自带的DIY

有没有DIY 教程学习！我也想自己弄，但是不熟悉模块, 比如 怎么弄一个轮播图 和一个热门帖子模块 只展示2个板块 像这样

影子江湖

6718522 发表于 2023-3-22 21:28
有没有DIY 教程学习！我也想自己弄，但是不熟悉模块, 比如 怎么弄一个轮播图 和一个热门帖子模块 只展示2 ...

原Discuz论坛应该有

yezirui

大佬，问一下，这个美化适用什么版本的小米签到