Hansome美化

关于


只基于本站美化

自定义css
放入后台-外观设置-开发者设置-自定义CSS

文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

panel阴影

panel阴影

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 1px 3px rgba(0,0,0);
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 255, 255);
}

.panel:hover{
    box-shadow: 1px 1px 1px 3px rgba(255, 255, 255);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0);
}

.panel-small{
    box-shadow: 1px 1px 1px 3px rgba(0,0,0);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0);
}

.panel-small:hover{
    box-shadow: 1px 1px 1px 3px rgba(255, 255, 255);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0);
}

.app.container {
    box-shadow: 0 0 5px rgba(0,0,0);

}

版权美化

版权美化

/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

    text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

    background-color: #ABBAC3;

    margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

左侧代码,复制到<font color=#FF0000>博客底部左侧信息</font>

<!-- 左侧底部 -->

    <div class="github-badge">
     <a href="./" title="©2021 WuMe">
      <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 WuMe</span>
       </a>
      </div>
 | 
     <div class="github-badge">
    <a href="https://beian.miit.gov.cn/" target="_blank" title="渝ICP备19016543号-2" style="pointer;">
   <span class="badge-subject">渝ICP备</span><span class="badge-value bg-green">19016543号-2</span>
</a>
</div>

右侧代码,复制到<font color=#FF0000>博客底部右侧信息</font>

<!-- 右侧底部 -->
     <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
       <div class="github-badge">
        <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="pointer;">
         <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Typecho</span>
          </a>
         </div>
 |  
        <div class="github-badge">
       <a href="https://www.ihewro.com/archives/489/" target="_blank" title="Theme by Handsome" style="pointer;">
      <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
</span>

加载动画

加载动画


以下代码添加至/usr/themes/handsome/header.php内 最后

    <!--加载动画-->
    <style>
    #PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
    #PageLoading-center{width:100%;height:100%;position:relative;}
    #PageLoading-center-absolute{
        position:absolute;left:50%;top:50%;
        height:200px;width:200px;
        margin-top:-100px;
        margin-left:-100px;
    }
    .object2{
        -moz-border-radius:50% 50% 50% 50%;
        -webkit-border-radius:50% 50% 50% 50%;
        border-radius:50% 50% 50% 50%;
        position:absolute;
        border-left:5px solid #FFB6C1;
        border-right:5px solid #b6def7;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        -webkit-animation:animate 2s infinite;
        animation:animate 2s infinite;

    }
    #object_one{left:75px;top:75px;width:50px;height:50px;}
    #object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
    #object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
    #object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
    @-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    @keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    </style>

  <!--加载动画-->
<body id="body" class="fix-padding skt-loading">
    <body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>

主题设置,自定义 JavaScript,添加以下代码

    $(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });

转载MuYu

正文末尾End标识

正文末尾End标识

在模板文件post.php的适当位置添加下述代码:

<!--内容结束分割线-->
<div class="tt-fenge-end">
    <span>End</span>
</div>
<!--/ 内容结束分割线-->

添加css

/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
        /*深色模式下文章正文下的结束End分割线颜色*/
        html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}

转载申明

转载申明效果

在模板文件post.php的适当位置添加下述代码:

<!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题:<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接:<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明,本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明:转载请注明文章来源。</p>
</div>
<!-- / 知识共享许可协议-->

添加css

/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
        /*深色模式下的知识共享许可协议*/
        html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

转载丛林小二

Google API字体

Google API字体

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />

后台css

body {font-family: 'Yanone Kaffeesatz';}

左侧图标颜色

自定义Javascript和Pjax回调函数添加

let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

背景js动画

背景js动画


自定义输出body 尾部的HTML代码

<script type="text/JavaScript" color="120,128,128" src="https://oss.sicx.top/canvas-nest.js"></script>

未完,待续——

End

本文标题:Hansome主题魔改

本文链接:https://www.sicx.top/01.html

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

声明:转载请注明文章来源。

最后修改:2021 年 10 月 19 日 03 : 55 PM
如果觉得我的文章对你有用,请随意赞赏