左侧栏签名调整

以下代码测试14个中文+1个字符可以在一行显示(handsome5.0版本已经不需要此代码了)

.block{width:180px;margin:auto}
.wrapper{padding:10px}

标签云颜色修改

以下代码适合黑色主题,配合其他颜色请自行修改

.bg-info{color:#ffffff;background-color:#5f6569}
a.bg-info:hover{background-color:#6f6569}

第一行是未获得焦点的时候的标签云样式,color是文字颜色,background-color是按钮背景颜色
第二行是获得鼠标悬浮焦点的时候的标签云样式

顶部内容居中

博客名字和下方签名(一言)

.bg-light .lter, .bg-light.lter{text-align:center}

首页文章标题和摘要居中

首页头图下面的白色区域都会居中

.post-meta{text-align:center}

内容块颜色

这里的内容在内容块中

/*内容块(左右边框)*/
#post-content blockquote{
   border-left:5px solid #1199c4;
   border-right:5px solid #1199c4;
}
  • border-left 设置左边框,一般单独设置左边框样式使用
  • border-right 设置右边框,一般单独设置右边框样式使用
  • border-top 设置上边框,一般单独设置上边框样式使用
  • border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
  • 如果需要四边都有相同的边框,使用border即可

border共有三个参数,分别为:宽度(厚度),样式,颜色

边框样式值如下:

  • none :  无边框。与任何指定的border-width值无关
  • hidden :  隐藏边框。IE不支持
  • dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
  • dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
  • solid :  实线边框(常用)
  • double :  双线边框。两条单线与其间隔的和等于指定的border-width
  • groove :  根据border-color的值画3D凹槽
  • ridge :  根据border-color的值画菱形边框
  • inset :  根据border-color的值画3D凹边
  • outset :  根据border-color的值画3D凸边

首页文章版式圆角化

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;
}

首页文章头图焦点放大

#放大的时间和大小自行修改以下数值
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

首页头像放大并旋转

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

首页头像自动旋转并放大

#旋转速度请修改3s数值
/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

文章标题居中

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

首页文章板式阴影化

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

#如果也想使盒子四周也有阴影,加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

图片抖动效果

/*图片抖动效果*/
img:hover {
    -webkit-animation:sucaijiayuan 1s .1s ease both;
    -moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
    -webkit-transform:scale(1)
}
10%, 20% {
    -webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
    -webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
    -webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
    -webkit-transform:scale(1) rotate(0)
}

自定义滚动条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;

鼠标点击特效

第一种样式、将下框中的代码放在主题的handsome/component/footer.php中</body>之前即可

<script type="text/javascript"> /* 鼠标特效 */var a_idx = 0;
jQuery(document).ready(function($) {
   $("body").click(function(e) {
       var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
       var $i = $("<span/>").text(a[a_idx]);
       a_idx = (a_idx + 1) % a.length;
       var x = e.pageX,
       y = e.pageY;
       $i.css({
           "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
           "top": y - 20,
           "left": x,
           "position": "absolute",
           "font-weight": "bold",
           "color": "#ff6651"
       });
       $("body").append($i);
       $i.animate({
           "top": y - 180,
           "opacity": 0
       },
       1500,
       function() {
           $i.remove();
       });
   });
});
</script>

第二种样式、将下面的代码放入后台开发者设置的自定义JS中

(function(window, document, undefined) {
    var hearts = [];
    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            setTimeout(callback, 1000 / 60);
        }
    })();
    init();
    function init() {
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }
    function gameloop() {
        for (var i = 0; i < hearts.length; i++) {
            if (hearts[i].alpha <= 0) {
                document.body.removeChild(hearts[i].el);
                hearts.splice(i, 1);
                continue;
            }
            hearts[i].y--;
            hearts[i].scale += 0.004;
            hearts[i].alpha -= 0.013;
            hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
        }
        requestAnimationFrame(gameloop);
    }
    function attachEvent() {
        var old = typeof window.onclick === "function" && window.onclick;
        window.onclick = function(event) {
            old && old();
            createHeart(event);
        }
    }
    function createHeart(event) {
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el: d,
            x: event.clientX - 5,
            y: event.clientY - 5,
            scale: 1,
            alpha: 1,
            color: randomColor()
        });
        document.body.appendChild(d);
    }
    function css(css) {
        var style = document.createElement("style");
        style.type = "text/css";
        try {
            style.appendChild(document.createTextNode(css));
        } catch(ex) {
            style.styleSheet.cssText = css;
        }
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    function randomColor() {
        return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
    }
})(window, document);

修改首页标题栏

(首先后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。接着去除此处的标题显示,修改方法为将下框中的代码在主题的handsome/index.php中删除。)

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

顶部导航天气

在headnav.php中添加如下代码,添加在搜索的代码前后都可以。

<!-- 天气 -->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script> 
(function(T, h, i, n, k, P, a, g, e) {
        g = function() {
        P = h.createElement(i);
        a = h.getElementsByTagName(i)[0];
        P.src = k;
        P.charset = "utf- 8";
        P.async = 1;
        a.parentNode.insertBefore(P, a)
    };
    T["ThinkPageWeatherWidgetObject"] = n;
    T[n] || (T[n] = function() { (T[n].q = T[n].q || []).push(arguments)
    });
    T[n].l = +new Date();
    if (T.attachEvent) {
        T.attachEvent("onload", g)
    } else {
        T.addEventListener("load", g, false)
    }
} (window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js")) < /script><script>tpwidget("init", {"flavor": "slim","location": "WX4FBXXFKE4F","geolocation": "enabled","language": "auto","unit": "c","theme": "black","container": "tp-weather-widget","bubble": "enabled","alarmType": "badge","color": "#00AFDB","uid": "UB7BEE62D3","hash": "3600ce1f732c2aa637f35517da5f7081"});
tpwidget("show");</script>
<!-- 天气结束 -->

去掉头部博客名称

外观设置--开发者设置--自定义 JavaScript

document.querySelector("header.lter").remove();

以上内容来源复杂,有一部分是博主自己写的,大部分来源于网络,无法详细注明作者,敬请谅解,感谢大佬们的分享

最后修改:2019 年 07 月 18 日 10 : 48 AM