怎样修改WordPress的style.css文件?

为什么要修改wordpress的style.css文件呢?

比如我使用的wordpress 2017官方的主题,有很多地方很不合理,之前对site-content的宽度进行了调整,因为原有的宽度非常窄,阅读的体验很差。
这里我们将要调整的是导航栏与site-content之间的间隔,即菜单与正文的间隔,非常大,很不美观。

style.css的文件有4000多行,怎么快速的定位到那个padding是我们需要修改的呢?

我们可以借助firefox浏览器的默认工具,右键选择“inspect element”即可,inspect是检查视察的意思,不知道中文版firefox具体翻译是什么。

进入inspect element试图之后,我们可以看到三块区域,一块是页面视图,在顶部,下面分为两块,左边是html的代码视图,右边是css的代码视图,在html中点击元素标签会在页面视图中显示对应的地方,所以能很方便的找出我们要调整的地方,例如,这里我们找到对应的padding(间隔)区域,然后定位到它的css代码。

从图中我们可以看到padding居然设置了5.5em的宽度,所以显示那么一大块不协调的间隔区域(图中紫色区域),我们将其改成1.75em后则显得紧凑美观了很多。

如果需要调整style.css的其代码,同样可以参照这个方法,但是据要在修改前对原来的css文件进行备份,如果需要我们随时可以回退到之前的版本。

Code问答 | CodeWenda.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

55 + = 63