听闻 All in the game. - 魔改
type: channel
link: http://sangxuesheng.com/tag/%E9%AD%94%E6%94%B9/
items: 【教程】handsome主题个性化备忘录
items: 【教程】handsome自定义扩充iconfont图标进阶

【教程】handsome主题个性化备忘录
type: item
date: 2022-02-26T16:32:00+08:00
description: [tabs][tab name="自定义CSS" active="true"]自定义CSS自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS自定义CSS[collapse status="false" title="修改教程"]/*彩色标签*/ #tag_cloud-2 a,.list-group-item .pull-right { background-color: #309d9d; } /*彩色标签*/ /*头像旋转*/ .img-circle { border-radius: 80%; animation: light 5s ease-in-out infinite; transition: 0.5s; } .img-circle:hover { transform: scale(1.55) rotate(720deg); } /*头像旋转*/ /*鼠标指针*/ body { cursor: url(https://sangxuesheng.com/api/a1.cur), default; } a:hover{cursor:url(https://sangxuesheng.com/api/a2.cur), pointer;} /*鼠标指针*/[/collapse]首页文章版式阴影化[collapse status="false" title="修改教程"].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); }[/collapse]首页文章图片获取焦点放大[collapse status="false" title="修改教程"].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); }[/collapse]标签云整齐排列[collapse status="false" title="修改教程"]/*标签云*/ #tag_cloud-2 a { border-radius: 5px; width: 32%; }[/collapse]文章内打赏图标跳动[collapse status="false" title="修改教程"]/*文章内打赏图标跳动*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } }[/collapse]手机适配中不显示热门及标签云[collapse status="false" title="修改教程"]将以下代码添加至后台-开发者设置-自定义CSS。/*手机不显示*/ @media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; } }[/collapse]文章标题居中[collapse status="false" title="修改教程"]/*文章标题居中*/ .panel h2{ text-align: center; } .panel-small h2{…

【教程】handsome自定义扩充iconfont图标进阶
type: item
date: 2022-02-05T20:59:00+08:00
description: 效果展示： 1.去阿里巴巴矢量库选择自己喜欢的图标官网选择自己喜欢的图标，尽量每个类目都能有。方便后期使用。不清楚怎操作可以看上一期文章[post cid="340" /]2.在项目文件里，生成symbol代码 把修改好的symbol代码在handsome后台的开发者设置/自定义输出head头部的HTML代码3.图标css样式把css代码在handsome后台的开发者设置/自定义 CSS4.选择要使用的图标,获取代码,替换名称即可5. 展示 6.更新矢量图库更新矢量图库需要更新一下symbol代码，handsome后台的开发者设置/自定义输出head头部的HTML代码即可。