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

影子江湖

开始教程

步骤可能会有点多

我们先打开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


到这差不多就结束了

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

这些代码都是我改好的,你们复制后直接替换就行
如果, 可以, 回复, 美化, 代码

湖中沉

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

影子江湖

大大好

276397082

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

6718522

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

6718522

模板自带的DIY

影子江湖

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

6718522

原Discuz论坛应该有

影子江湖

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