CorePress主题美化合集-新锐博客

前言

本次美化教程均来源于其他优秀站点，本人只是把它们整合到一起罢了。
本章内容不定时更新，有好的美化教程第一时间分享出来，记得经常光顾本站！
本章内容只适合Corepress主题，其他主题暂未测试，如有问题自行调整。

教程

免费版可以将下方的css填写到主题的自定义css 中，Pro版本放到子主题的style.css 中即可。

更新时间

最新更新时间：2023年4月30日22:20:58

代码

首页模仿mac样式

本代码来源于corepress主题官网：https://www.lovestu.com/corepressmac.html

/** 首页模仿mac样式 */
:root {
    --border-hd: 10px !important;
}
body header {
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
}
.post-list-page-plane {
    background-color: #fff;
}
body .widget-title {
    border-bottom: none;
}
.friend-links {
    overflow: hidden;
}
body .widget-title:before {
    width: 12px;
    height: 12px;
    transform: none;
    background: #fc625d;
    border-radius: 50%;
    top: 10px;
}
body .widget-title:after {
    background-color: #fdbc40;
    width: 12px;
    height: 12px;
    transform: none;
    border-radius: 50%;
    left: 20px;
    top: 10px;
}
body .widget-title {
    padding-left: 40px;
}
.widget-admin-author-contact-item-icon {
    border-bottom-left-radius:2px!important;
}

申请友链模块

本代码来源于阿蛮君博客：https://www.amjun.com/1830.html

css代码如下：

1.申请按钮美化

/* 按钮美化 */
.friend-links-apply {
    padding: 5px 10px;
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    background: linear-gradient(to right, #fd0808, #df05ed);
    background-size: 200% auto;
    animation: flowingGradient 3s ease-in-out infinite;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(130%);
}
.friend-links-apply:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}
@keyframes flowingGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.friend-links .list-plane-title > div {
    line-height: 30px;
}
.fa-paper-plane:hover { color:red; }

2.按钮悬浮

/* 友链a标签放大效果 */
.friend-links-list a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

3.多行友链添加空隙

/** 友情链接多行时显示过于紧凑 **/
.friend-links-list {
   padding: 10px 10px 10px 15px !important;
}
.friend-links-list a {
   margin-bottom: 10px;
}

4.手机底部导航并美化(按需添加)

@media screen and (max-width: 800px) {
  .friend-links { display: block !important; }
  .friend-links .list-plane-title { padding: 0px; }
  .friend-links-list img { display: none !important; }
  .friend-links .list-plane-title > div {
      padding: 5px 0px 5px 15px;
      font-size: 16px;
      clear: both;
  }
  .list-plane-linksdescribe, .friend-links-apply{ display:none!important }
  .friend-links-list {
      padding: 10px !important;
      margin: 0 5px;
      display: block;
  }
  .friend-links-list a {
      font-size: 12px;
      margin-bottom: 5px;
      color: #262525!important;
      -webkit-tap-highlight-color: transparent;
  }
  .friend-links-item { margin-right: 0px; }
  .friend-links-item:not(:first-child):before {
      content: "";
      width: 4px;
      height: 4px;
      margin: 0 .3em;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      background:#262525;
      opacity: .3;
      vertical-align: .2em;
  }
}

评论输入框添加背景图

本代码来源于阿蛮君博客：https://www.amjun.com/1686.html

/*评论背景图*/
textarea#comment {
    background-color:transparent;
    background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(/wp-content/uploads/2023/03/comment.png) right 10px bottom 10px no-repeat;
    -moz-transition:ease-in-out 0.45s;
    -webkit-transition:ease-in-out 0.45s;
    -o-transition:ease-in-out 0.45s;
    -ms-transition:ease-in-out 0.45s;
    transition:ease-in-out 0.45s;
}
textarea#comment:focus {
    background-position-y:789px;
    -moz-transition:ease-in-out 0.45s;
    -webkit-transition:ease-in-out 0.45s;
    -o-transition:ease-in-out 0.45s;
    -ms-transition:ease-in-out 0.45s;
    transition:ease-in-out 0.45s;
}

请将其中的/wp-content/uploads/2023/03/comment.png 替换为自己的图片地址

本代码来源于阿蛮君博客：https://www.amjun.com/1685.html

/** 上一篇下一篇优化 */
.post-turn-page-main a {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

文章页图片悬浮

本代码来源于阿蛮君博客：https://www.amjun.com/1658.html

/*文章图片悬浮效果*/
.post-content-content img {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    margin: 10px 0;
}
.post-content-content img:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    box-shadow:5px 5px 10px gray;   
}

添加彩色滚动条

本代码来源于阿蛮君博客：https://www.amjun.com/1653.html

/**彩色滚动条*/
::-webkit-scrollbar {
    width: 8px;  
    height: 1px;
}
::-webkit-scrollbar-thumb {
    background-color: #12b7f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

文章底部彩色标签

本代码来源于技术SOLO博客：https://www.jssolo.com/note/903

/** 文章底部彩色标签 */
.post-tags{margin-bottom: 10px}
.post-tags a{
    padding: 4px 10px;
    background-color: #36a1d2;
    color: white;
    font-size: 12px;
    margin: 0 5px 5px 0;
    border-radius: 10px;
    display: inline-block
}
.post-tags a:nth-child(5n){background-color: #7d43da}
.post-tags a:nth-child(5n+1){background-color: #d74e4b}
.post-tags a:nth-child(5n+2){background-color: #dc9e3a}
.post-tags a:nth-child(5n+3){background-color: #30ce67}
.post-tags a:nth-child(5n+4){background-color: #339ecf}
.post-tags a:hover{background-color: #494949}
.tag-cloud-link:before {content: unset;}

底部菜单美化

本代码来源于阿蛮君博客：https://www.amjun.com/1860.html

/** 底部菜单美化 */
.menu-footer-list {
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    color: #fff !important;
    line-height: 15px;
    margin-bottom: 5px;
}
.menu-footer-list .menu-item a {
    font-size: 13px;
}
.menu-footer-list .menu-item{
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-radius: 4px 0 0 4px;
    margin-right: 5px;
}
.menu-footer-list li:nth-child(6n+1) {background-color: #4dc820}
.menu-footer-list li:nth-child(6n+2) {background-color: #8833d7}
.menu-footer-list li:nth-child(6n+3) {background-color: orange}
.menu-footer-list li:nth-child(6n+4) {background-color: #e91515}
.menu-footer-list li:nth-child(6n+5){background-color: #007ec6}
.menu-footer-list li:nth-child(6n) {background-color: #e323c2}
#menu-footer-nav li:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

实时监测页面是否离开并自动更改标题

<script>
document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
        normal_title = document.title;
        document.title = 'w(ﾟДﾟ)w 宝～请不要离开！';
    } else {
        document.title = normal_title;
    }
});
</script>

添加导航栏背景图和透明效果

/** 导航栏添加背景图和透明效果  */
header {
    background-color: rgba(255, 255, 255, 0.96);
    background-image: url(your_img_url);
    background-position: center right;
    background-size: auto 100%;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,0.1);
}
.menu-header-plane > ul {
    background-color: rgba(255, 255, 255, 0.96);
}

首页文章添加间距

.post-item {
    margin-bottom: 20px;
}

底部ICP备案信息居中

.core-footer {
    position: relative;
}
.icp-warp {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

侧边栏添加滚动播报

<div id="scroll-broadcast">
    <div id="container-box-1">
        <div class="container-box-1-1">每天来逛逛我的博客，会让你</div>
        <div id="flip-box-1">
            <!-- 滚动内容结构保持不变 -->
        </div>
        <div class="container-box-1-2">你好我也好，不要忘记哦!</div>
    </div>
</div>
<style>
    #scroll-broadcast {margin: -10px;}
    #container-box-1{
        background: linear-gradient(45deg, #C7F5FE 10%, #FCC8F8 40%, #EAB4F8 60%, #F3F798 90%);
        border-radius: 10px;
        padding: 10px;
    }
    /* 其他样式保持不变 */
</style>

底部黑暗明亮模式切换

本代码来源于阿蛮君博客：https://www.amjun.com/1462.html

.footer-plane{background: #22292d !important;color: #b3c0ce !important;}

/** 修改底部颜色 */
.footer-plane {
   background: #fff;
   color: #999;
   box-shadow: 0 0.5px 0.5px 1px rgb(0 0 0 / 10%);
    padding: 20px 30px 30px 30px;
}
.footer-plane a {
   color: unset!important;
}
.footer-aside-box {
   margin-bottom: unset!important;
}
.footer-info a:hover {
    color:var(--MaincolorHover) !important;
}

文章版权信息

<fieldset style="border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
    <legend align="center" style="margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;">
        版权声明
    </legend>
    <span class="btn-info btn-xs">1</span> 本文章标题：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 15px"><strong>#postname# </strong></span></span><br>
    <span class="btn-info btn-xs">2</span> 本文章地址：<font color="#09ace2">#url# </font><br>
    <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请发送邮件至<font color="#09ace2">xxx@qq.com</font>进行删除处理。<br>
    <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br>
    <span class="btn-info btn-xs">5</span> 如您发现本站提供资源链接失效或有违规现象，请联系我们处理。<br>
</fieldset>

版权声明 1 本站名称：新锐博客
2 本站地址：https://www.xrbk.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请发送邮件至lx@xrbk.cn进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 如您发现本站提供资源链接失效或有违规现象，请联系我们处理。

THE END

PHP Wordpress 编程学习
# WordPress # WordPress美化 # 主题美化 # WordPress主题

CorePress主题美化合集

CorePress主题美化合集

前言

教程

更新时间

代码

请登录后发表评论