美化小米簽到按鈕,賊好看

影子江湖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

開始教程

步驟可能會(huì)有點(diǎn)多

我們先打開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. }

復(fù)制代碼

然后是下面的

登錄/注冊后可看大圖

        {//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. 
   

復(fù)制代碼

然后開始刪代碼

登錄/注冊后可看大圖

打開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>

復(fù)制代碼

之后繼續(xù)打開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. 
   

復(fù)制代碼

依舊是這個(gè)文件
.midaben_con .visted 這個(gè)代碼的

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

復(fù)制代碼

.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. }

復(fù)制代碼

最后一步   簽到后的狀態(tài) 會(huì)有一個(gè)已簽到

我們刪掉一個(gè)代碼就行

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

復(fù)制代碼

打開k_misign\template/button_default_return.htm


到這差不多就結(jié)束了

如果有啥問題可以回復(fù) 我會(huì)解決的  理論上應(yīng)該是沒了   畢竟這個(gè)美化代碼 時(shí)間有點(diǎn)久 我是直接我拿我網(wǎng)站一點(diǎn)一點(diǎn)找出來的 如果大家弄了之后發(fā)現(xiàn)有不美觀的地方可以回復(fù)加上圖片

這些代碼都是我改好的,你們復(fù)制后直接替換就行

湖中沉

我們的插件，如果真的很多人喜歡這個(gè)樣式，我們也可以做成組件提供

影子江湖

湖中沉 發(fā)表于 2023-3-21 20:18
我們的插件，如果真的很多人喜歡這個(gè)樣式，我們也可以做成組件提供

大大好

6718522

看著不錯(cuò)！話說 首頁  那個(gè)首頁4格怎么自己DIY 去設(shè)置 模塊有點(diǎn)不懂??！

6718522

我看上這邊這一塊了 我該怎么做

影子江湖

6718522 發(fā)表于 2023-3-22 19:12
我看上這邊這一塊了 我該怎么做

模板自帶的DIY

6718522

影子江湖 發(fā)表于 2023-3-22 20:24
模板自帶的DIY

有沒有DIY 教程學(xué)習(xí)！我也想自己弄，但是不熟悉模塊, 比如 怎么弄一個(gè)輪播圖 和一個(gè)熱門帖子模塊 只展示2個(gè)板塊 像這樣

影子江湖

6718522 發(fā)表于 2023-3-22 21:28
有沒有DIY 教程學(xué)習(xí)！我也想自己弄，但是不熟悉模塊, 比如 怎么弄一個(gè)輪播圖 和一個(gè)熱門帖子模塊 只展示2 ...

原Discuz論壇應(yīng)該有

yezirui

大佬，問一下，這個(gè)美化適用什么版本的小米簽到