以下修改都是基于handsome8.3

侧边栏恋爱倒计时😍😍😍

侧边栏恋爱倒计时

我直接借用了handsome自身的广告位置增加了一个让人羞射的东西.哈哈,找到/usr/themes/handsome/component/aside.php 在合适的位置增加如下内容:


样式一

<!--😍😍😍-->
<section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
     <script type="text/javascript">
        function lovexhjSitetime() {
            window.setTimeout("lovexhjSitetime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth()+1
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            // 时间设置
            var t1 = Date.UTC(2005, 04, 15, 15, 15, 00)
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
            var diff = t2 - t1
            var diffYears = Math.floor(diff / years)
            var diffDays = Math.floor((diff / days) - diffYears * 365)
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                diffMinutes * minutes) / seconds)
            document.getElementById("lovexhjSitetime").innerHTML = "我们相恋了" + diffYears + "年" + diffDays + "天" +
                diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
        }
        lovexhjSitetime()
        </script>
        <aside class="widget_text sidebar-widget widget_custom_html fadeInUp">
         <div class="textwidget custom-html-widget">
            <div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">
                <div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
                 <!-- 左边的头像 -->
                 <img src="//你的头像地址" alt="love" style="width: 60px; border-radius: 50%;">
                <!-- 中间的图片 -->
                <img src="/lovecat.gif" alt="love" style="width: 60px; border-radius: 50%;">
                 <!-- 右边的头像 -->
                 <img src="//你的头像地址" alt="love" style="width: 60px; border-radius: 50%;">
                </div>
        <p id="lovexhjSitetime" style="font-size:0.8rem;margin-top:16px;background:linear-gradient(to right,red,blue);-webkit-background-clip:text;color:transparent;"></p>
            </div>
        </div>
        </aside>
        </section>
<!--😍😍😍-->

样式二

<!--😍😍😍-->
<section id="a_d_sidebar" class="widget widget_categories wrapper-md clear"><div class="bgk1"> <div class="head-portrait1"> <a href="/" target="_blank"><img class="img" src="//q1.qlogo.cn/g?b=qq&nk=你的QQ&s=640" style="margin-left:10%;" alt=""></a> <a href="/" target="_blank"><img class="img" src="//q1.qlogo.cn/g?b=qq&nk=你对象的QQ&s=640" style="margin-left:20%;" alt=""></a> </div> <div class="info1"> <p><span id="runtime_span"></span></p> <script type="text/javascript"> function show_runtime() { window.setTimeout("show_runtime()", 1000); X = new Date("2005/07/05 16:53:03"); Y = new Date(); T = (Y.getTime() - X.getTime()); M = 24 * 60 * 60 * 1000; a = T / M; A = Math.floor(a); b = (a - A) * 24; B = Math.floor(b); c = (b - B) * 60; C = Math.floor((b - B) * 60); D = Math.floor((c - C) * 60); runtime_span.innerHTML = "相遇的第" + A + "天" + B + "小时" + C + "分" + D + "秒"; } show_runtime(); </script> </div> </div> <style> .head-portrait1>a>img { margin-top: 2%; width: 30%; border-radius: 50%; background-size: cover; background-position: 50%; transition: all 0.6s; } img:hover { transform: rotate(-360deg); } .bgk1 { background-color: #f99cf422; border-radius: 5px; -webkit-box-shadow: #e9eaea 0px 0px 10px; -moz-box-shadow: #e9eaea 0px 0px 10px; box-shadow: #e9eaea 0px 0px 10px; } .info1 { text-align: center; width: 100%; } .head-portrait1 { margin-top: 2%; } </style> </section><!--😍😍😍-->


搜索框背景颜色

搜索框背景颜色

后台开发者选项,自定义CSS.其中的theme-dark自己注意修改成你当前主题使用的颜色样式,F12选中搜索框即可查看..

/*自定义搜索颜色*/
html.theme-dark .form-control {
    background: #000000;
    border: none;
}
/*自定义搜索颜色*/

登录界面美化

登录界面美化

typecho登录界面美化,这得单独放一篇

修改时光机格式

修改时光机时间格式

修改路径 usr/themes/handsome/component/say.php 找到如下代码:

<span class="text-muted m-l-sm pull-right"
     datetime="<?php $comments->date('c'); ?>"><?php echo Utils::formatDate($comments, $comments->created, $options->dateFormat); ?>
</span>

用下面这一段替换:

<span class="text-muted m-l-sm pull-right"
    datetime="<?php $comments->date('c'); ?>"><?php echo date("Y年m月d日 H:i:s",$comments->created); ?>
</span>

或者用这一段,样式有点不一样,自己选择

<span class="text-muted m-l-sm pull-right"
    datetime="<?php $comments->date('c'); ?>"><?php echo date("Y年m月d日 H:i:s",$comments->created); ?>
</span>

如果有兴趣自己修改,参考PHP date()函数.

handsome模板列表

handsome模板目录列表 

footer.php 最底部版权、音乐播放器之类
sidebar.php 右侧栏目
aside.php 左边导航栏
post.php 文章输出
comments.php 评论区
header.php 页面头，没啥要改的
headnav.php 顶部导航
say.php 时光机动态
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合

修改字体

修改字体


在设置外观里,找到开发者设置,展开自定义输出head 头部的HTML代码，在里面填入引用字体css
google字体服务没有被墙,可以用.

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=ZCOOL+KuaiLe" />

若实在不放心,可以替换为极客族的CDN

<link rel="stylesheet" type="text/css" href="//fonts.geekzu.org/css?family=ZCOOL+KuaiLe" />

然后再到开发者选项自定义CSS里面填入以下CSS代码

* {
       font-family: 'ZCOOL KuaiLe';
    }

自定义行内代码样式

自定义行内代码样式


添加到后台开发者选项自定义CSS,自行修改下面的颜色字体大小等等,我这个只是复制了模板自带的.

code {
    padding:2px 4px;
    font-size:90%;
    color:#dfaaaa;
    background-color:#f9f2f4;
    border-radius:4px
}

文章内标题居中

文章内标题居中


后台开发者选项自定义CSS,添加如下CSS代码

/*文章内标题居中*/
header.bg-light.lter.wrapper-md {
    text-align: center;
}
/*文章内标题居中*/

右侧TAGS颜色优化

右侧TAGS颜色优化


后台开发者选项自定义CSS

/*右侧tags颜色优化*/
html.theme-dark .badge {
    background: #fff0;
    color: #b69d9d;
}
/*右侧tags颜色优化*/

左侧图标变彩色

左侧图标变彩色


后台开发者选项,自定义JS里面添加如下代码

/*左侧图标变彩色*/
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});        
/*左侧图标变彩色*/

复制提醒

复制提醒

复制下面代码到handsome主题，设置外观，开发者设置，自定义 JavaScript里面.

/* 复制成功提示代码开始 */ 
 kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
 message: "尊重原创，转载请注明出处！<br> 本文作者：Mr.X<br>原文链接："+sitesurl,
 title: "复制成功",
 type: "warning",
 autoHide: !1,
 time: "5000"
 })
}}
/* 复制成功提示代码结束 */

网页加载完成提示

网页加载完成提示

使用方法： 复制下面代码到handsome主题，设置外观，开发者设置，自定义输出body尾部的HTML代码里面.

/* 网站加载完成提示开始 */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
 message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
 title: "网站加载完成",
 type: "success",
 autoHide: !1,
 time: "3000"
})
/* 网站加载完成提示结束 */

文章标题居中

文章标题居中

以下代码放置 后台-外观设置-开发者设置-自定义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;
}

评论一键打卡

添加评论一键打卡

主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数

function a(a, b, c) {
 if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
 else if (a.selectionStart || "0" == a.selectionStart) {
 var l = a.selectionStart,
 m = a.selectionEnd,
 n = m;
 c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
 c ? n += b.length + c.length : n += b.length - m + l;
 l == m && c && (n -= c.length);
 a.focus();
 a.selectionStart = n;
 a.selectionEnd = n
 } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
 c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
 daka: function() {
 a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
 },
 zan: function() {
 a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
 },
 cai: function() {
 a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
 }
};

主题目录的component/comments.php里面的130行左右参照下面代码进行修改

<label for="comment"><?php _me("评论") ?>
 <span class="required text-danger">*</span></label>
 <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
 <div class="OwO" style="display: inline;"></div>
 <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
 <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
 <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
 <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
 data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">

主题设置 - 开发者设置 - 自定义CSS 添加以下代码

.secret_comment {
 top: 5px;
}
.OwO.OwO-open .OwO-body {
 display:table
}

彩色标签云

彩色标签云

主题设置 - 开发者设置 - 自定义JS添加以下代码
如果主题中启用了pjax,还需要将代码添加到pjax-pjax回调函数中.

<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
 tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
 tag.style.backgroundColor = tagsColor;
});

加载耗时

加载耗时

在主题的functions.php文件中添加以下代码

//加载耗时
function timer_start() {
 global $timestart;
 $mtime = explode( ' ', microtime() );
 $timestart = $mtime[1] + $mtime[0];
 return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
 global $timestart, $timeend;
 $mtime = explode( ' ', microtime() );
 $timeend = $mtime[1] + $mtime[0];
 $timetotal = number_format( $timeend - $timestart, $precision );
 $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
 if ( $display ) {
 echo $r;
 }
 return $r;
}

然后在/usr/themes/handsome/component/sidebar.php中添加以下代码

<!--响应耗时-->
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

如果你是handsome8.3.0以前的版本,添加以下代码到/usr/themes/handsome/component/sidebar.php

<!--响应耗时-->
<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

手机禁止显示右边栏

手机适配不显示热门跟标签云还有博客信息

将以下代码添加至 后台-开发者设置-自定义CSS.注意如果你在右边栏添加过其他的组件,自行把你的组件div添加进去.

/*手机不显示右边栏*/
@media (max-width:767px) {
 #tabs-4,#tag_cloud-2,#blog_info {
 display: none;
 }
}
/*手机不显示右边栏*/

个人信息使用QQ头像

左侧个人信息设置QQ头像

主题设置-初级设置–头像图片地址
然后其他的步骤看下面这篇文章

php中调用腾讯自己的接口获取QQ头像

Handsome主题左上可以自定义头像,我如果让他跟着我的QQ头像一起换,那岂不是更有意思一些.调用的是腾讯自己的...

隐藏公告下方标题

隐藏公告下方标题及一言模块居中

修改/usr/themes/handsome/index.php文件，位于公告位置下方
删除以下代码

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

一言模块居中显示

也就是心情模块,修改/usr/themes/handsome/index.php文件，位于公告位置下方

<header class="bg-light lter wrapper-md"> 
替换成 
<header class="bg-light lter wrapper-md" style="text-align:center">

效果图



头像旋转

左侧文章图标和评论头像鼠标悬停旋转

主题设置 – 开发者设置 – 自定义CSS添加以下代码

/*头像旋转开始*/
.img-circle {
 transition: all 0.3s;
}
.img-circle:hover {
 transform: rotate(360deg);
}
/*头像旋转结束*/

文章内头图和图片悬停放大

文章内头图和图片悬停放大效果

主题设置 – 开发者设置 – 自定义CSS添加以下代码

/*文章页头图和图片悬停放大开始*/
.entry-thumbnail {
 overflow: hidden;
}
#post-content img {
 border-radius: 10px;
 transition: 0.5s;
}
#post-content img:hover {
 transform: scale(1.05);
}
/*文章页头图和图片悬停放大结束*/

首页文章列表悬停上浮

首页文章列表悬停上浮

主题设置 – 开发者设置 – 自定义CSS添加以下代码

/*文章列表悬停上浮开始*/
.blog-post .panel:not(article) {
 transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
 transform: translateY(-10px);
 box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
/*文章列表悬停上浮结束*/

首页头图悬停放大并超出范围

首页头图悬停放大并超出范围

主题设置 – 开发者设置 – 自定义CSS添加以下代码

/*首页头图悬停放大开始*/
.index-post-img {
 overflow: hidden;
}
.item-thumb {
 transition: all 0.3s;
}
.item-thumb:hover {
 transform: scale(1.1)
}
/*首页头图悬停放大结束*/

头像呼吸光环和鼠标悬停旋转放大

头像呼吸光环和鼠标悬停旋转放大

主题设置 – 开发者设置 – 自定义CSS添加以下代码,呼吸光环我测试了下,PC上不显示,回头再研究,手机上倒是没问题.

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:

/*头像呼吸光环开始*/
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}
/*头像呼吸光环结束*/

左侧博主介绍信息美化

左侧博主介绍文字美化

后台 – 设置外观 – 初级设置 – 博客介绍添加以下代码

<span class="text-muted text-xs block">
    <div id="chakhsu">
    </div>
    <script>
        var chakhsu = function(r) {
            function t() {
                return b[Math.floor(Math.random() * b.length)]
            }
            function e() {
                return String.fromCharCode(94 * Math.random() + 33)
            }
            function n(r) {
                for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                    var l = document.createElement("span");
                    l.textContent = e(),
                    l.style.color = t(),
                    n.appendChild(l)
                }
                return n
            }
            function i() {
                var t = o[c.skillI];
                c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
                r.textContent = c.text,
                r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
                setTimeout(i, d)
            }
            /*以下内容自定义修改*/
            var l = "😁",
            o = ["中年油腻肥宅的游戏人生"].map(function(r) {
                return r + ""
            }),
            a = 2,
            g = 1,
            s = 5,
            d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {
                text: "",
                prefixP: -s,
                skillI: 0,
                skillP: 0,
                direction: "forward",
                delay: a,
                step: g
            };
            i()
        };
        chakhsu(document.getElementById('chakhsu'));
    </script>
</span>
</span>

<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "😁", o = ["中年油腻肥宅的游戏人生" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

首页文章版式阴影化

首页文章版式阴影化

主题设置 – 开发者设置 – 自定义CSS添加以下代码

阴影颜色修改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);
}

设置标题栏自动变化

设置浏览器标签页失去焦点后自动变化标题

将代码复制粘贴到开发者选项-自定义输出body尾部的HTML代码

<script>
//标题栏自动变化
    var OriginTitile = document.title,
    titleTime;
    document.addEventListener("visibilitychange",
    function() {
        if (document.hidden) {
            document.title = "🙃有本事你别走,回来决战到天亮.";
            clearTimeout(titleTime)
        } else {
            document.title = "😀大哥,我开玩笑的.你牛皮. ";
            titleTime = setTimeout(function() {
                document.title = OriginTitile
            },
            2000)
        }
    });
</script>

© 允许规范转载