CorePress主题教程合集

很多朋友觉得美化的主题样式不是那么好看、无从下手,其实大家可以通过自定义,对主题进行微调。

主题美化教程

CSS代码添加到后台CorePress-Pro-child—>style.css—>自定义CSS样式
JS即javascript代码添加到后台主题设置—>插入代码—>页脚代码
没有特殊说明,网站后台—>外观–>小工具–>【自定义HTML】选择放置的位置—>把代码复制保存即可。

IP签名档

欢迎

美化教程

1、在网站根目录下新建一个ip的目录

2、将 ipqm.zip 解压到 ip 文件夹下

3、修改文件下index.php中为你需要的信息

73c63f1376f9394c10a4924456a2463

4、在小工具中找到 自定义HTML<img src=\ip> 即可插入小卡片

 

来源:百度网盘 | 提取码:4399

 

滚动播报小工具

滚动播报小工具

美化教程

添加路径后台—>外观—>小工具—>自定义HTML添加下面的代码,把它放在合适的位置.

<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
  <meta charset="utf-8">
  <div class="textwidget custom-html-widget">
  <aside id="php_text-8" 
  class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
    line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#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-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
    .flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@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:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><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>
<div class="clear"></div>
</aside></div>
</section>

 

 

侧边栏添加简单的小模块

侧边栏添加简单的小模块

美化教程

只需在站点后台 >> 外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。

<a class="ads" href="#" target="工具"  style="border-radius:5px;">
  <h4>测试中!</h4>
  <h5>安全有保障</h5>
  <span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>

 

头像呼吸光环和鼠标悬停旋转放大

头像呼吸光环和鼠标悬停旋转放大

美化教程

CSS代码添加到后台CorePress-Pro-child—>style.css—>自定义CSS样式

CSS代码:

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}

 

模仿Mac样式

 

模仿Mac样式

美化教程

CSS代码添加到后台CorePress-Pro-child—>style.css—>自定义CSS样式

CSS代码:

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

 

 Logo 扫光效果

 

logo

美化教程

CSS代码添加到后台CorePress-Pro-child—>style.css—>自定义CSS样式

CSS代码:

/*扫光开始*/
.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; }
}
/*扫光结束*/

 

 

MySSL安全认证签章

加MySSL安全认证签章

美化教程

CSS代码添加到后台CorePress-Pro-child—>footer.php—>自定义样式

CSS代码:

<!--认证开始-->
<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">
<a href="https://myssl.com/www.dakablog.cn?from=mysslid" target="_blank" rel="nofollow noopener noreferrer">
<img src="https://static.myssl.com/res/images/myssl-id.png" target="_blank" rel="nofollow noopener noreferrer" alt="前端大咖" style="width:100%;height:100%">
</a>
</div>
<!--认证结束-->

 

 

横幅小工具

小工具

美化教程

网站后台—>外观–>小工具–>【自定义HTML】选择放置的位置—>把代码复制保存即可

<p align="center">
<a href="https://www.lovestu.com/corepress.html" target="_blank" rel="nofollow noopener">&nbsp; <img src="https://www.lovestu.com/wp-content/uploads/2021/03/logo4.svg" alt="corepress" width="96" height="20"> 提供本站主题支持</a></p>

 

 

THE END
分享
海报
CorePress主题教程合集
很多朋友觉得美化的主题样式不是那么好看、无从下手,其实大家可以通过自定义,对主题进行微调。
<<上一篇
下一篇>>