CorePress主题美化合集

2023-4-26

前言

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

教程

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

更新时间

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

代码

首页模仿mac样式

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

css代码如下：


/** 首页模仿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: 5px 0px 5px 0px; */
      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/1687.html

下载图标后放在 /wp-content/themes/CorePress-Pro/static/img/ 文件夹下。

想要给图标添加鼠标悬停放大效果添加如下 css 即可：

/** 文章下图标放大效果 */
.post-end-tool-btn-item svg:hover {
    transform: scale(1.2); 
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

图标文件下载地址：

download
来源：蓝奏云

评论输入框添加背景图

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

css代码如下：

/*评论背景图*/
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

css代码如下：

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

文章页图片悬浮

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

css代码如下：

图片具体文字太近，加了一个 margin 属性，不需要的可以去掉

/*文章图片悬浮效果*/
.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

css代码如下：

/**彩色滚动条*/
::-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;
}

首页文章图片悬浮效果

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

css代码如下：

/*首页动态效果*/
[cp-post-item]:hover {
    background: #edededba;
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    box-shadow:5px 5px 10px gray;
}

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

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

首先下载背景图：

css代码如下：

将your img api 替换为你的图片链接

/**  导航栏添加背景图和透明效果  */
header {
    background-color: rgba(255, 255, 255, 0.96);
    background-image: url(your img api);
    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);
    background: unset;
}

文章底部彩色标签

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

css代码如下：

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

底部菜单美化

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

首先进入WordPress后台添加底部菜单导航，然后再进行CSS美化。

css代码如下：

/** 底部菜单美化 */
.menu-footer-list {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff !important;
    line-height: 15px;
    margin-bottom: 5px;
}
.menu-footer-list .menu-item a {
    color: #fff !important;
    font-size: 13px;
}
.menu-footer-list .menu-item{
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 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);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

底部黑暗明亮模式切换

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

首先找到主题文件夹下的/static/css/dark.css 添加如下代码

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

然后添加CSS代码

css代码如下：

/** 修改底部颜色 */
.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;
}

侧边栏添加滚动播报

本代码来源于有爱分享网：https://www.90svip.cn/143.html

只需在后台—>外观—>小工具—>自定义HTML添加下面的代码，把它放在合适的位置。

代码：

<div id="scroll-broadcast">
    <div id="container-box-1">
        <div class="container-box-1-1">每天来逛逛我的博客，会让你</div>
        <div id="flip-box-1">
            <div><div class="flip-box-1-1">生活也美好了！</div></div>
            <div><div class="flip-box-1-2">心情也舒畅了！</div></div>
            <div><div class="flip-box-1-3">走路也有劲了！</div></div>
            <div><div class="flip-box-1-4">腿也不痛了！</div></div>
            <div><div class="flip-box-1-5">腰也不酸了！</div></div>
            <div><div class="flip-box-1-6">工作也轻松了！</div></div>
        </div>
        <div class="container-box-1-2">你好我也好，不要忘记哦!</div>
    </div>
</div>
<style type="text/css">
    #scroll-broadcast {margin: -10px;}
    #container-box-1{color: #4c5864;font-weight: bold; border-radius: var(--border-hd);text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);}
    #flip-box-1{overflow:hidden;height:50px;border-radius:99px}
    #flip-box-1 div{height:50px}
    #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
    #flip-box-1 div:first-child{animation:show 8s linear infinite}
    .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
    .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
    .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
    .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
    .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
    .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
    @keyframes show{
        0%{margin-top:-300px}
        5%{margin-top:-250px}
        16.666%{margin-top:-250px}
        21.666%{margin-top:-200px}
        33.332%{margin-top:-200px}
        38.332%{margin-top:-150px}
        49.998%{margin-top:-150px}
        54.998%{margin-top:-100px}
        66.664%{margin-top:-100px}
        71.664%{margin-top:-50px}
        83.33%{margin-top:-50px}
        88.33%{margin-top:0}
        99.996%{margin-top:0}
    100%{margin-top:300px}
    }
</style>

首页LOGO扫光

本代码来源于有爱分享网：https://www.90svip.cn/143.html

css代码如下：

/* Logo扫光开始 */.header-logo {
    position:relative;
    float:left;
    margin-right:10px;
    padding:5px 0;
    overflow:hidden;
}
.header-logo  a:before {
    content:"";
    position:absolute;
    left:-665px;
    top:-460px;
    width:200px;
    height:15px;
    background-color:rgba(255,255,255,.5);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    /*角度倾斜45*/-webkit-animation:searchLights 1s ease-in 1s infinite;
    -o-animation:searchLights 1s ease-in 1s infinite;
    animation:searchLights 2s ease-in 2s infinite;
    /*光扫过去的时间，自己修改，可以加快*/1s ease-in表示扫过去时间
}
@-webkit-keyframes searchLights {
    0% {
    left:-100px;
    top:0;
}
to {
    left:120px;
    top:100px;
}
}@-o-keyframes searchLights {
    0% {
    left:-100px;
    top:0;
}
to {
    left:120px;
    top:100px;
}
}@-moz-keyframes searchLights {
    0% {
    left:-100px;
    top:0;
}
to {
    left:120px;
    top:100px;
}
}@keyframes searchLights {
    0% {
    left:-100px;
    top:0;
}
to {
    left:120px;
    top:100px;
}
}
/* Logo扫光结束 */

个人信息模块美化

添加html代码到后台 - 外观 - 小工具 - 个人信息模块中。

css代码如下：

/* 个人信息小工具模块美化开始 */
* .block {
    text-align:center;
}
.block__title {
    font-size:1rem;
    cursor:pointer;
    color:var(--color-blocktitle);
}
.hover-reveal {
    z-index:1000;
    position:fixed;
    width:300px;
    height:300px;
    pointer-events:none;
    opacity:0;
}
.hover-reveal__inner,.hover-reveal__img {
    width:100%;
    height:100%;
    position:relative;
}
.block span {
    margin:2px;
    border-radius:3px;
    display:inline-block;
    padding:0px 8px 0px 8px;
}
.block .author-ipv6 {
    background-color:#40C87F;
}
.block .author-email {
    background-color:#0396FF;
}
.block .author-weibo {
    background-color:#d52c2b;
}
.block span:hover {
    background-color:#000;
}
.block a {
    padding:4px;
    font-size:14px;
    color:#fff;
}
.block a:visited {
    color:#fff;
}
.block a i {
    padding:4px 5px 4px 0px;
}
/* 个人信息小工具模块美化结束 */

 

html代码如下：

<div class="block" >
<a class="block__title" href="#" title="本站及下属子站点已全面支持IPv6协议访问，欢迎体验"><span class="author-ipv6"><i class="fab fa-skyatlas"></i>IPv6</span></a>
<a class="block__title" href="Mailto:admin@wmviv.com" title="邮件与我联系" target="_blank"><span class="author-email"><i class="fas fa-envelope-square"></i>邮箱</span></a>
<a class="block__title" href="https://weibo.com/u/5072462400" title="查看我的动态" target="_blank"><span class="author-weibo"><i class="fab fa-weibo"></i>微博</span></a>
</div>

版权声明 1 本文章标题：CorePress主题美化合集
2 本文章地址：https://www.xrbk.cn/612.html
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请发送邮件至mowang@xrbk.cn和xinruiboke@qq.com进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 如您发现本站提供资源链接失效或有违规现象，请联系我们处理。
THE END
WordPressWordPress主题WordPress美化主题美化
推荐一款WordPress跳转插件
<<上一篇
随机图片API接口源码
下一篇>>

今日访问人数 0 | 今日访问量 0 | 本月访问量 0 | 总访问量 0
本站由 CoreNext 提供主题服务

本站由 火毅盾 提供CDN加速服务