CoreNext主题美化合集

莫忘

2024-1-4

Wordpress

前言

本次美化教程部分来源于CorePress主题美化合集，再加上本人的修改而成。
本章内容不定时更新，有好的美化教程第一时间分享出来，记得经常光顾本站！
本章内容只适合CoreNext主题，其他主题暂未测试，如有问题自行调整。

教程

所有Css代码放到子主题文件夹中的Css文件夹内的main.css内即可。

更新时间

最新更新时间：2024年6月19日23:06:21

代码

申请友链模块

css代码如下：

/* 友链申请按钮美化 */
.application-url {
    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%);
}

.application-url: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%;
  }
}

.application-url .friends-title > div  {
    /* 添加一个高度，不然不能对齐 */
    line-height: 32px;
}

评论输入框添加背景图

css代码如下：

/*评论背景图*/
textarea.comment-textarea[data-v-1ef8f4cc] {
    background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(/api/img/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-textarea[data-v-1ef8f4cc]: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 替换为自己的图片地址

效果如下：

文章页图片悬浮

css代码如下：

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

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

添加彩色滚动条

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

首页文章悬浮效果

css代码如下：

.post-list .post-item:hover {
    opacity: 1;
    z-index: 99;
    border-radius: 20px;
    transform: translateY(-5px);
    box-shadow: 0 3px 20px rgb(0 0 0 / 25%);
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

.post-list .post-item:hover .post-item__cover {
  transform: translateY(-100%);
}

.post-list .post-item__cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  transform: translateY(0);
}

.post-list .post-item__title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

底部菜单美化

本代码来源于诺言博客

css代码如下：

/*CSS 网站底部自定义按钮美化开始*/
:root{--theme-color:#f04494;
--focus-shadow-color:rgba(240,68,148,.4);
--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;    text-shadow: none;    font-size: 12px;    color: #fff;    line-height: 15px;    margin-bottom: 5px;}.badge-subject {
    display: inline-block;    background-color: #4d4d4d;    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;}.github-badge .bg-blue {
    background-color: #007ec6;}.github-badge .bg-brightgreen {
    background-color: #4dc820;}.github-badge .bg-blueviolet {
    background-color: #8833d7;}.github-badge .badge-value {
    display: inline-block;    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;}.github-badge .bg-orange {
    background-color: orange;}.github-badge .bg-red {
    background-color: red;}
    /*CSS 网站底部自定义按钮美化结束*/

再进入小工具的底部左侧添加自定义Html，代码如下

<div class="github-badge">
<span class="badge-subject bg-blue"><a style="color:#fff" href="#" target="_blank">友链申请</a>
</span>
<span class="badge-subject bg-blueviolet"><a style="color:#fff" href="#" target="_blank">网站地图</a>
</span>
<span class="badge-subject bg-green"><a style="color:#fff" href="#" target="_blank">留言建议</a>
</span>
<span class="badge-subject bg-orange"><a style="color:#fff" href="#" target="_blank">免责申明</a>
</span>
</div>

将其中的#换成自己的链接即可

底部黑暗明亮模式切换

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

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

然后添加CSS代码

css代码如下：

/** 修改底部颜色 */
.core-footer {
   background: #fff;
   color: #999;
   box-shadow: 0 0.5px 0.5px 1px rgb(0 0 0 / 10%);
    padding: 20px 30px 30px 30px;
}

.core-footer a {
   color: unset!important;;
}

.footer-right {
   margin-bottom: unset!important;;
}

.core-footer a:hover {
    color:var(--MaincolorHover) !important;
}

文章底部添加时间和时效性

css代码如下

 /**文章添加时间和时效性*/
#comment_addface { 
    position: relative 
    
} 
.conment-face-plane { 
    position: absolute; 
    transition: .15s; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 
    border: 1px solid rgba(0, 0, 0, .2); 
    border-radius: 6px; 
    top: 100%; 
    padding: 10px; 
    background: #fff; 
    max-width: 300px; 
    z-index: 9999; 
    opacity: 1; 
    visibility: hidden 
    
} 
.popover-btn-face { 
    margin-top: 10px 
    
} 
.popover-btn { 
    border-radius: 4px; 
    display: inline-block; 
    transition: .15s; 
    vertical-align: middle; 
    padding: .3em .5em; 
    text-align: center; 
    line-height: 1.44; 
    border: none; 
    outline: none; 
    cursor: pointer 
    
}

再到子主题的template文件夹内的single.php添加如下代码

<div class="c-alert c-alert-error">本文最后更新于<code><?php echo the_time('Y-m-j');
?></code>部分内容具有时效性，如有失效，请留言</div>

LOGO扫光

代码如下

.home-img {
    position:relative;
    float:left;
    margin-right:10px;
    padding:5px 0;
    overflow:hidden;
}
.home-img  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;
}
}

去除侧边栏站长工具中的数据统计

css代码如下

.webmaster-widget .webmaster-site-info{
    display: none;
}

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

首先下载背景图：

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

首页文章添加间距

css代码如下

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

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

将如下代码添加到后台主题设置 - 插入代码 - 页头代码

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

其中的w(ﾟДﾟ)w 宝～请不要离开！ 和 normal_title 分别为离开时和返回时显示的标题，可以根据自己的喜好修改

底部ICP备案信息居中

有不少地区或者服务商要求备案信息放在底部居中

将CSS代码放入子主题的CSS文件中

.core-footer {
  position: relative;
}

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

侧边栏添加欢迎词

如下图效果

侧边栏添加如下自定义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>

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

THE END

Docker 搭建文件快递柜-FileCodeBox

<<上一篇

记一次美化过程中的学习

下一篇>>