handsome主题修改美化代码,将代码放到 handsome主题设置-开发者设置-自定义css与自定义JavaScript中。
文章列表及文章页面 div圆角化
其中10px这个值可以修改,是圆角的大小。
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 10px;
}
.panel-small{
border: none;
border-radius: 10px;
}
.item-thumb{
border-radius: 10px;
}
侧边栏头像转动并放大
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。
可以修改最后一个类选择器——#aside-user span.avatar:hover 中 scale(1.2); 这个 1.2的值,它是头像放大的程度。
/*首页头像自动旋转*/
.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
}
文章列表及内页盒子阴影
将这段代码放到 handsome主题设置-开发者设置-自定义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);
}
自定义滚动滑条块
将这段代码放到 handsome主题设置-开发者设置-自定义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;
文章列表及文章内页h2标题居中
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。
这段代码会使文章列表以及文章页面的 h2标题(编辑器工具条默认的标题) 和 文章列表的作者时间评论等信息 居中。
/*文章标题居中*/
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
首页缩略图悬停时放大
将这段代码放到 handsome主题设置-开发者设置-自定义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);
}
放大时不溢出父元素
/首页文章版式圆角化,及头图鼠标悬停放大
.index-post-img,.entry-thumbnail,.panel,.panel-small{
overflow: hidden;
}
.index-post-img img,.entry-thumbnail img{
cursor: pointer;
transition: all 0.6s;
}
.index-post-img img:hover,.entry-thumbnail img:hover{
transform: scale(1.1);
}
点击飘出二十四字核心价值观
将这段代码放到 handsome主题设置-开发者设置-自定义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();
});
});
});
差不多就这么多了,又需要的拿走吧。
本文标签:handsome主题, Handsome主题美化