[持续更新]Handsome魔改记录

MuYu

2020 年 07 月 08 日

20932次浏览

104 条评论

24530字数

随笔生活随笔

826点赞

1人在线

加载中

关于

`自定义CSS`

自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS

首页文章版式阴影化

.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);
}

首页文章图片获取焦点放大

.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);
}

标签云整齐排列

/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

文章内打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

手机适配中不显示热门及标签云

将以下代码添加至后台-开发者设置-自定义CSS。

/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

美化主页文章列表宽度

/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
    max-width: 90%;
}

粗体上色

/* 粗体上色 */
strong{
  color: rgb(255, 153, 0);
}

panel阴影

/*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);
}

右侧栏气泡颜色加深

/* 右侧栏气泡颜色加深 */
div.post-tags>a,aside.asideBar .badge{background-color:#777}

时光机圆形头像

/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

美化网站右侧滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

END

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

第三方登陆

登录即代表您同意《用户服务协议》《隐私协议》

张子
2021-09-27 22:19:58

麻烦问一下，左侧的天气是怎么弄得呀

回复
1. MuYu
  2021-09-30 23:04:23
  
  @张子
  
  兔子插件，友情链接第四个！
  
  回复
ING__
2021-09-07 11:32:23

大佬我想问一下双击文章点赞是哪个插件呀qwq

回复
1. MuYu
  2021-09-21 15:42:41
  
  @ING__
  
  故梦的点赞源码哦，有需要找他，友情链接第一个！~
  
  回复
儒***5
2021-09-04 10:00:37

Muyu，留言为什么是几条评论在下面啊，我的是在上面，能发个教程吗。

回复
1. MuYu
  2021-09-21 15:43:20
  
  @儒***5
  
  主题后台设置有设置评论的位置的！~
  
  回复
Ricken
2021-09-02 01:18:42

博主第三页的版权声明教程少了个哦哈哈哈哈

回复
1. Ricken
  2021-09-02 01:20:05
  
  @Ricken
  
  然后点击特效的花花能不能给个代码好好看！
  
  回复
野菜の国
2021-08-27 17:34:25

麻烦问一下怎么把人生倒计时调到右侧呢？

回复
1. MuYu
  2021-08-30 05:26:25
  
  @野菜の国
  
  代码添加位置改为sidebar.php（右侧边栏）文件内即可！~
  
  回复
Plaid
2021-08-27 12:57:19

心知天气好像失效了欸

回复
1. MuYu
  2021-08-27 16:42:33
  
  @Plaid
  
  是的，直接兔子插件更美观
  
  回复
  1. Plaid
    2021-08-27 19:00:40
    
    @MuYu
    
    大佬兔子插件在哪下载，还有左上角的FPS显示是怎么弄的
    
    回复
    
    MuYu
    2021-08-30 05:27:29
    
    @Plaid
    
    FPS是故梦那的源码，不过最近他博客好像关了，兔子插件在友情链接萌卜兔博客内有~
    
    回复
    
    Plaid
    2021-08-30 12:40:55
    
    @MuYu
    
    好的，谢谢庄主
    
    回复
大名鼎鼎的男孩
2021-08-23 10:17:29

回复
Infinite
2021-07-28 10:57:58

请问一下嘉然模型是怎么导入的

回复
Infinite
2021-07-28 10:56:23

请问一下嘉然的模型是怎么导入的

回复
1. MuYu
  2021-07-28 11:00:20
  
  @Infinite
  
  请看文章《Live2D 看板娘非常卡哇伊哦！》哦~
  
  回复
tehran
2021-07-24 20:11:31

你好，这个背景飘花瓣这个是怎么实现的，是插件还是代码

回复
1. MuYu
  2021-07-25 14:02:42
  
  @tehran
  
  兔子插件有哦
  
  回复