Pigeon主题部分美化

2021.09.18 人间 1.3 k 阅读 15 评论 2233 字

“好的主题值得被推荐”

{cat_tips_warning color=""}注意本篇文章基于主题3.4.x版本写的，3.5版本作者已重构，部分代码的类名已变{/cat_tips_warning}
作者大大说下个版本会大更，今天在群里发现有兄弟因为我上篇文章而买的主题，我觉得好的主题总是会让人倾心的，我现在用的版本是3.4.0最新版本是3.4.1由于是小更新，我也就没更，更重要的是因为我改的地方挺多的。下面的美化仅适用于喜欢主题但是没有前端基础的兄弟

首页加载更多及评论提交按钮的渐变效果

这个效果是我当时想改背景而意外发现的
（以下所提及的代码如果没有特别说明均直接复制粘贴到后台的自定义CSS中）

/* 加载更多渐变色滚动动画*/
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.paging_ajax_btn >.next ,#comment-form .comment-buttons #submitComment {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.paging_ajax_btn >.next,#comment-form .comment-buttons #submitComment:before {
    background-color: rgba(0, 0, 0, 0);
    boder: none
}

footer

首页头像背景图放大以及头像的适配

作者大大说会在下个版本更新增加宽度自定义
以下代码适用于普通皮肤不适用杂志皮肤

#header .suggest .webname {
    font-size: 1.25rem;
    color: var(--white);
    margin-top: 8px;
}

#header .header_frame .p_avatar {
    float: left;
    width: 65px;
    height: 65px;
}

#header .suggest {
    margin-left: 80px;
#header .header_picture {
    height: 225px;
}
}

其他

上面是最最主要的两个，剩下的是首页文章列表的文章标题大小，这个数值是我自己用自己的微信QQ浏览器慢慢试出来的，之前是开启文章图片以后手机端感觉标题有些大于是自己调整了数值。


.index_list_name {
    font-size: 1.1rem;
}

杂志皮肤中的图片模糊是之前发文章设置头图以后文字和背景颜色重复，于是加了一个模糊来凸现文字，这个美化仅针对于杂志模式下

/*文章图片模糊*/
.postz_pic_img {
    filter: blur(4px);
}

最后

主题会大更，相信会更好，有啥问题跟作者大大积极沟通，他很好说话的，然后就是这篇文章会在大更后删除，写他的原因也仅仅是给有需要的人，在本站的关于页面有联系方式，要是有啥需要帮助的直接联系我就好:@(献花)

本文著作权归作者 [ Meteor ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。

取消回复

发表留言

读者留言15

呆哥 Lv.2

2021-11-04 14:15 回复

所得是类
1. Meteor 博主
  
  2021-11-04 16:17 回复
  
  啥
  1. 呆哥 Lv.2
    
    2021-11-04 16:33 回复
    
    太阳国语言
苏木 Lv.1

2021-11-01 23:10 回复

感觉字体好好看什么字体？
另外那个渐变好像直接复制过去没有用
1. Meteor 博主
  
  2021-11-04 16:16 回复
  
  教程适用于3.4版本哈，新版本对应的类名已经变了，字体是思源宋体
魚頭 Lv.2

2021-10-04 03:31 回复

博客最下面的那句句话怎麽添加的呀?
头像改大后右边的名字和站点描述位置观感不好看了，怎么更改?
头像下方和导航栏之间的渐变怎么去掉。让他们之间近一点
导航栏下面的那条横杠怎么去掉。。。
大佬。:&(蛆音娘_偷看)
1. Meteor 博主
  
  2021-10-04 11:16 回复
  
  都是右键审查css能解决的问题
魚頭 Lv.2

2021-10-04 03:25 回复

博客最下面的那句話怎麼添加的呀？
1. 魚頭 Lv.2
  
  2021-10-04 03:29 回复
  
  头像改大后右边的名字和站点描述位置观感不好看了怎么更改？
  头像下方和导航栏之间的渐变怎么去掉。。。
  导航栏的那条横杠怎么去掉。。。大佬:&(蛆音娘_偷看)
Js.nake Lv.3

2021-09-21 13:08 回复

暮云收尽溢清寒，银汉无声转玉盘，
此生此夜不长好，明月明年何处看。
中秋节快乐！
叶开楗 Lv.4

2021-09-19 15:38 回复

划重点（他很好说话的） = 有优惠 = 售后非常好 = 回复积极 = 修复bug积极 23333
1. Meteor 博主
  
  2021-09-19 18:15 回复
  
  确实很好:@(赞一个)
小彦 Lv.2

2021-09-19 10:43 回复

[secret] 不科学啊，滚动条都没有:&(蛆音娘_哭泣)[/secret]
1. Meteor 博主
  
  2021-09-19 10:49 回复
  
  滚动条的宽度被我改成0了:&(蛆音娘_吃瓜)
依晨 Lv.2

2021-09-18 15:44 回复

这个好啊，先收藏一下先:&(蛆音娘_滑稽)