• 欢迎访问db1024网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏db1024吧

本博客基于Handsome主题的一些小修改教程 – Rat’s Blog

主机教程 Liam 1年前 (2019-04-27) 291次浏览 0个评论 扫描二维码
文章目录[隐藏]

说明:博客用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.jsOwO.json文件就可以了。文件下载:HS_OwO.zipOwO.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折优惠。


db1024 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:本博客基于Handsome主题的一些小修改教程 – Rat’s Blog
喜欢 (0)
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址