CoreNext主题美化合集
前言
- 本次美化教程部分来源于CorePress主题美化合集,再加上本人的修改而成。
- 本章内容不定时更新,有好的美化教程第一时间分享出来,记得经常光顾本站!
- 本章内容只适合CoreNext主题,其他主题暂未测试,如有问题自行调整。
教程
所有Css代码放到子主题文件夹中的Css文件夹内的main.css内即可。
更新时间
最新更新时间:2024年6月19日23:06:21
代码
申请友链模块
评论输入框添加背景图
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>
提示:本文最后更新于2024年 9月 14日,如有错误或者已经失效,请留言告知。
THE END