wordpress知更鸟begin lts主题网址导航样式优化的更好看

2018.8. 1701:48:32 评论 643

wordpress主题中,国内主题很少有像鸟叔的主题那样有着那么多的功能,比如说文章分类的有着多种多样,并且鸟叔的主题还不贵,这一点才是鸟叔有这么多粉丝的主要原因,这几天我一直在折腾begin主题,原因是这样的;

前几天在一个网站上面看到一个网赚导航,我就心动了,所以打算自己做一个,但是用鸟叔的主题的人都知道,那就是这个样式实在是很一般,给人一种粗犷的感觉,缺少那种细腻。

确实鸟叔的主题begin功能是非常强大的,算是国内的主题里面最强大的一款了。

不过这个样式估计鸟叔是那种追求功能,实用性的一类人吧。

吐槽了这么久,该开始主题模板的修改了,具体的步骤我自己也快忘记了,所以步骤就不写了,最后可以实现的效果是一样的。

wordpress知更鸟begin lts主题网址导航样式优化的更好看

修改后的样子是这样的,对于功能什么的我是没有修改的,所以这个就一步带过。

首先我们需要给分类定义的标题背景定义一个颜色,(begin主题开始的颜色带一点灰色)我觉的太土了,所以我给了一个全白色。

在begin主题的模板文件中找到“sites.css”路径:begin——css——sites.css

然后在122行左右找到:“.sites-cats”这个类,找到定义颜色的属性“background”之前定义的是什么色彩,我也忘了。这里直接将颜色值改成“#fffffff”(白色)。“background#ffffff;”。

然后下面还有一条灰色的线,由于我的网站是浅蓝色为主题,这样看起来更加的干净,所以底部的那一条灰色的线我也改了。

将线条的颜色改成: border-bottom1px solid #dae2ff

其他的就是内容的的修改了,由于图标的边框颜色,也是灰色的,这里我也改成了浅蓝色更好的搭配主题。这里的修改内容在“sites.css”文件的114行左右。具体看.sites-img在什么位置。

由于我需要在外部添加一个边框这样看起来更加的整洁一些,所以我将图标的表框改成了透明色。

.sites-img{border1px solid #dae2ff00;}

再一个begin主题的圆角我觉的给的不够,这里我将数值改大了许多,我改成了13个像素。

.sites-img{border-radius: 13px;}

最后将图标四周多余的两个像素给他去掉。

.sites-img{ padding: 0px;}

由于图标鸟叔只给它们几个像素的外边框,所以我觉的有一些拥挤,这里我将外边框的尺寸调大了许多。也就是.sites-title这个类。

我给padding的边框给了11个像素,让整个图标可以有更大的触发区域。

.sites-title {
width: 11.978%;
float: left;
min-height: 1px;
padding: 11.4px;
border: 1px solid #dae2ff;
margin: 2px;
transition-duration: .5s;}

大家自己去看吧,我实在是不知道怎么解释了,大家可以在sites.css文件当中尽情的修改。几的备份一次就好了。

以上是我修改好的样子。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: