QQ1000资源网
当前位置:首页 > 网络教程 > 搜集教程

搜集教程

本博客基于Handsome主题的一些小修改教程

作者:小刀娱乐网小说免费下载   来源:小刀娱乐网小说免费下载   评论:0
内容摘要: class="wrapper-lg"> 说明:博客用Handsome主题一年多了,体验还不错,特别适合做个人博客,而博主基于原主题做了下小小的修改,使其更加好看点,鉴于经常有人问博主修改方法,这里就在博客里说一下,顺便也说一下博客没有使用的修改方案,......
class="wrapper-lg">

说明:博客用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(00.071)!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(2552552550);} /*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0000.3); border-radius: 10px; background-color: rgba(2552552550);} /*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(000.3); background-color: #555;}

8、评论表情修改
本项修改评论表情,将原始表情替换成泡泡和阿鲁,只需要替换主题文件里的OwO.min.jsOwO.json文件就可以了。文件下载:HS_OwO.zip。OwO.min.jshandsome/assets/js/features文件夹,OwO.jsonhandsome/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折优惠。

Vultr注册就送$50,可开日本/新加坡等机房,【点击注册】。
最后修改:2019 年 04 月 19 日 10 : 44 PM
如果觉得我的文章对你有用,请随意打赏。

标签:修改  主题  博客  教程  基于  

相关文章

相关评论