知更鸟begin主题美化

2019年7月7日11:24:06 评论 2,963

一直以来爱游都是用的知更鸟的begin主题,当然爱游是用的破解版,前几天爱游买了一个正版begin主题,这里分享下以前爱游做的一些美化,有些在最新版的主题里面已经不适用了所以也算是记录,万一哪天我忘了呢。

面包屑导航栏美化

打开主题根目录下的style.css文件,查找下面的代码:

.bread {
    width: 1122px;
    height: 25px;
    line-height: 25px;
    margin: 0 auto;
    padding-left: 10px;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}

将下面的代码替换掉上面的代码:

.bread {
        margin: 10px auto;
        border: 1px solid #ddd;
        border-radius: 2px;
        background-color: #fff;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 10px;
}

效果

感觉比原来的好看多了。

顶部菜单栏改为渐变背景色

在wp后台→主题选项→定制风格→自定义样式添加以下代码:

#header-top {
	background: linear-gradient(-30deg,rgba(255, 213, 60, 0.71) 10%,rgba(161, 230, 243, 0.78)) no-repeat;
}

效果

Admin改成博主

begin/inc/inc.php找到那一行的 Admin (如果找不到,直接Ctrl+F搜索:// admin),改成你想改的字符(如“博主”二字),或者加其他图标,样式都可以的。

效果

WordPress有新评论微信提醒管理员

查看文章:WordPress实现微信推送评论消息

WordPress关注微信公众号获取密码

查看文章:WordPress关注微信公众号获取密码

表格自适应

<h3>AD</h3>
<div class="table-r">
<table width="100%">
<tbody>
<tr>
<td width="25%">自适应表格</td>
<td width="25%">输入文字</td>
<td width="25%">自适应表格</td>
<td width="25%">输入文字</td>
</tr>
</tbody>
</table>
</div>

如果你要两栏,把宽度改成50%,四栏就25%

侧边栏添加广告位代码

外观→小工具→侧边栏,然后点击添加小工具选择增强文本添加,将下面代码放在增强文本的内容里面即可。

<html>
 <head></head>
 <body>
  <div style="position: relative;">
   <a href="https://vipiu.net" rel="nofollow" target="_blank" data-original-title="预留位广告" title="预留位广告"><img class=" aligncenter" src="https://cdn.vipiu.net/wp-content/uploads/2019/03/370x245.jpg" alt="广告测试" style=" margin-left: 0px; padding: 1px;margin-bottom: 1px; border-radius: 4px;" width="360" height="120" /></a>
   <span style="position: absolute;bottom:-1px;right:-1px;"><img src="https://cdn.vipiu.net/wp-content/uploads/2019/03/370x245.jpg" /></span>
  </div>
 </body>
</html>

美化评论“沙发 板凳 地板”添加背景色

找到主题目录 inc/comment-template.php文件,搜索“沙发”。

找到如下代码

case 0 :echo "&nbsp;" . sprintf(__( '沙发', 'begin' )) . "";++$commentcount;break;
case 1 :echo "&nbsp;" . sprintf(__( '板凳', 'begin' )) . "";++$commentcount;break;
case 2 :echo "&nbsp;" . sprintf(__( '地板', 'begin' )) . "";++$commentcount;break;

修改成

case 0 :echo '&nbsp;<span class="pinglunqs plshafa">沙发</span>';++$commentcount;break;
case 1 :echo '&nbsp;<span class="pinglunqs plbandeng">板凳</span>';++$commentcount;break;
case 2 :echo '&nbsp;<span class="pinglunqs pldiban">地板</span>';++$commentcount;break;

然后在Style.css文件里添加如下代码

.pinglunqs{
color:#fff;
padding:0px 8px;
border-radius:8px
}
.plshafa{
background:#fd5d3c
}
.plbandeng{
background:#d270fb
}
.pldiban{
background:#9cf
}

效果

缩略图添加圆角和背影特效

.thumbnail {
    border-radius: 6px;
    box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
}

选中效果圆角

#slider img,.single-tag li a,#slider img,.cat-box, .cat-title,.fadeInUp,#sidebar h3,.cat-grid-title, .cat-square-title,.nbs-flexisel-container,img,h1, h2, h3, h4, h5, h6,a,.nav-menu, .nav-menu *,.type-cat a, .child-cat a,.link-all a
{border-radius: 8px
}

标签云样式美化代码

复制下面css代码放在“外观->定制风格”里

.tagcloud{  
padding:14px 0 14px 12px;  
}  
.tagcloud a{  
float:left;  
margin:3px;  
line-height:26px;  
text-align:center;  
border:1px solid #ddd;  
border-radius:2px;  
padding-top:0;  
padding-right:5px;  
padding-bottom:0;  
padding-left:5px;  
overflow:hidden;  
display:block;  
width:92px;  
height:28px;  
}  
.tagcloud a{  
color:#fff;  
}

复制下面代码添加到页脚文件(主题下footer.php文件)的body标签前

<script type="text/javascript">box_width = $("#cx_tag_cloud-5").width();  
len = $(".tagcloud a").length - 1;  
$(".tagcloud a").each(function(i) {  
    var let = new Array('3366FF', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');  
    var random1 = Math.floor(Math.random() * 9) + 0;  
    var num = Math.floor(Math.random() * 6 + 9);  
    $(this).attr('style', 'background:#' + let[random1] + '');  
    if ($(this).next().length > 0) {  
        last = $(this).next().position().left  
    }  
});
</script>

以上就是爱游博客的一些改造,如有好的建议或是那里有问题,请在下方留言。

  • “爱游博客”微信公众号
  • 关注微信公众号,分享前沿资讯!
  • weinxin
  • “爱游博客”微信小程序
  • 微信扫一扫,资讯唾手可得!
  • weinxin
阿里云首次购买高性能云服务器,享低至2折优惠

发表评论

您必须才能发表评论!