说明：博客用Handsome主题一年多了，体验还不错，特别适合做个人博客，而博主基于原主题做了下小小的修改，使其更加好看点，鉴于经常有人问博主修改方法，这里就在博客里说一下，顺便也说一下博客没有使用的修改方案，给同样使用Handsome主题的做下参考。
方法
1、首页文章版式圆角化
本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。
#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
2、首页文章图片获取焦点放大
本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS。
#放大的时间和大小自行修改以下数值(别复制该行)
/*首页文章图片获取焦点放大*/
.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);
}
3、首页头像转动并放大
本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。
#转动快慢和头像大小自行修改数值(别复制该行)
/*首页头像自动旋转*/
.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
}
4、首页头像放大并自动旋转
本项修改的是首页头像，效果就是将首页头像放大，并使其自动旋转。将以下代码添加至后台主题设置 自定义CSS。
#旋转速度请修改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;
}
5、文章标题居中
本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置 自定义CSS。
/*文章标题居中*/
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
6、首页文章版式阴影化
本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义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);
}
7、自定义滚动条滑块
本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置 自定义CSS。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}
8、评论表情修改
本项修改评论表情，将原始表情替换成泡泡和阿鲁，只需要替换主题文件里的OwO.min.js和OwO.json文件就可以了。文件下载：HS_OwO.zip。OwO.min.js在handsome/assets/js/features文件夹，OwO.json在handsome/usr文件夹。
9、鼠标点击特效
将以下代码放在主题的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>
10、评论框特效
下载特效JS文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件handsome/component/footer.php，在</body>后面添加以下代码。
<script type="text/javascript" src="(JS文件路径)"></script>
暂时只说这么多，修改方案很多由Zero博主提供，还有通过本博客联系作者购买Handsome主题的，可打9折优惠。
功能7有些问题，无法实现，另：代码最后是不少了个花括号。。不是学前端的，建议仅供参考
好像漏了，已改正
么么哒，谢谢大佬，太照顾小白了，直接下载或者复制就可以用了
话说我还想知道大佬您博客右边的热门文章前的图片怎么设置自定义呀？求大佬指导，谢谢
你是说的叮当猫头像？
测试了自己博客的表情包不行啊
测试是什么都没有
清空下缓存看看？
还真是，这个问题有待研究
我想把这个评论特效设置成点击特效，请问能实现吗？
一切皆有可能
建议把注释上面的#圆角大小可修改15px数值 这个#号改成正确注释哈，因为好多把这一行也复制过去了，导致代码有问题
哦，我懂了
不知道你说的这几个 修改css是那个文件？是hansome.min.css吗还是？求详细说明
后台直接添加
后台直接添加？？请问怎么操作啊，可以具体点嘛
前来看看
额，我的评论框特效怎么不显示啊，难道文件位置不对么
检查下位置，然后清除缓存
不要/www/wwwroot，直接http://xx.com/commentTyping.js，前提commentTyping.js在网站根目录
点击commentTyping.js为啥不是下载,反而是在网页上打开
这个右键保存就行了