关于Enews主导航样式以及顶栏搜索栏添加按钮

5年前 (2015-04-22) 水冷眸丶 Enews相关 9评论 已收录 5739℃

群里有小伙伴说主导航的太过粗大,让水冷眸将之直接改小,不过水冷眸觉得各花入各眼,样式风格这东西每个人都有自己的标准,所以就写下这篇不是教程的教程,告诉各位如果有需要修改主导航的,应该修改哪些地方。废话不多说,进入正题。

1、主导航修改宽度,以及高度。

打开css/style.css文件,找到704-713行(如果修改过style.css文件,造成你的行数跟水冷眸的不一样的,可以直接使用下面代码段的第一行代码)

上面那段代码中,padding:20px 25px;这行代码就是控制每个链接之间的宽度,padding在CSS中就是声明内边距的属性,其中20px表示下边距20像素,下边距20像素;25px表示左边距25像素,右边距25像素;

关于padding其它几种用法:

  • 上内边距是 10px
  • 右内边距是 5px
  • 下内边距是 15px
  • 左内边距是 20px

  • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px

  • 上内边距和下内边距是 10px
  • 右内边距和左内边距是 5px

  • 所有 4 个内边距都是 10px

关于padding就是随口一提,详情大家可以直接去w3school学习。

不过看到上面说的,大家应该知道怎么修改了吧,只需要将

这行代码修改你想要的边距就可以了。效果图就不贴了!动手去吧少年。

2、顶栏的搜索框添加按钮

接下来就是很多童鞋跟我反馈过的搜索栏不能点击的问题,其实水冷眸想说,那个搜索框的搜索图标本身就没准备赋予点击功能,它纯粹就是一个提示的作用,告诉访客,这是一个搜索框而已。

不过还是有很多童鞋希望我改一下,不过正如开头所说的,各花入各眼,至少水冷眸对搜索框很满意,不然也不会做成这样。不过还是贴出带按钮的代码,有需要的直接拿去覆盖替换吧

将以上代码,分别替换到header.php的51-53行如下代码

以及header.php的74-76行如下代码

完了吗?当然没有,还要修改一下样式,

打开css/style.css文件

找到446-451行代码

用下面的代码替换掉上面的代码

唔、接下来就是不少伸手党的最好,懒人包,直接覆盖!自己下载。(仅包括搜索框的修改而已,如果需要修改主导航,还是动手吧)

百度网盘下载

博主

一个纯自学的伪技术宅,此博客的开办,只为在折腾wordpress的路程上渐行渐高,渐行渐远。生命不息,折腾不止!!!

相关推荐