Pigeon主题部分美化

“好的主题值得被推荐”

注意本篇文章基于主题3.4.x版本写的,3.5版本作者已重构,部分代码的类名已变

  作者大大说下个版本会大更,今天在群里发现有兄弟因为我上篇文章而买的主题,我觉得好的主题总是会让人倾心的,我现在用的版本是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);
}

最后

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

EOF
OωO
开启隐私评论,您的评论仅作者和评论双方可见
评论 ( 15 )
  1. 所得是类

    2021年11月04日回复
    1. Meteor 博主大人
      @呆哥

      2021年11月04日回复
      1. @Meteor

        太阳国语言

        2021年11月04日回复
  2. 苏木

    感觉字体好好看 什么字体?
    另外那个渐变好像直接复制过去没有用

    2021年11月01日回复
    1. Meteor 博主大人
      @苏木

      教程适用于3.4版本哈,新版本对应的类名已经变了,字体是思源宋体

      2021年11月04日回复
  3. 博客最下面的那句句话怎麽添加的呀?
    头像改大后右边的名字和站点描述位置观感不好看了,怎么更改?
    头像下方和导航栏之间的渐变怎么去掉。让他们之间近一点
    导航栏下面的那条横杠怎么去掉。。。
    大佬。

    2021年10月04日回复
    1. Meteor 博主大人
      @魚頭

      都是右键审查css能解决的问题

      2021年10月04日回复
  4. 博客最下面的那句話怎麼添加的呀?

    2021年10月04日回复
    1. @魚頭

      头像改大后右边的名字和站点描述位置观感不好看了怎么更改?
      头像下方和导航栏之间的渐变怎么去掉。。。
      导航栏的那条横杠怎么去掉。。。大佬

      2021年10月04日回复
  5. 暮云收尽溢清寒,银汉无声转玉盘,
      此生此夜不长好,明月明年何处看。
        中秋节快乐!

    2021年09月21日回复
  6. 划重点(他很好说话的) = 有优惠 = 售后非常好 = 回复积极 = 修复bug积极 23333

    2021年09月19日回复
    1. Meteor 博主大人
      @叶开楗

      确实很好

      2021年09月19日回复