CorePress主题美化合集
前言
- 本次美化教程均来源于其他优秀站点,本人只是把它们整合到一起罢了。
- 本章内容不定时更新,有好的美化教程第一时间分享出来,记得经常光顾本站!
- 本章内容只适合Corepress主题,其他主题暂未测试,如有问题自行调整。
教程
免费版可以将下方的css填写到主题的自定义css
中,Pro版本放到子主题的style.css
中即可。
更新时间
最新更新时间:2023年4月30日22:20:58
代码
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);
}
图标文件下载地址:
本代码来源于阿蛮君博客: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>
本代码来源于有爱分享网: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="https://www.xrbk.cn/612.html#" 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>