自定义wordpress主题CSS样式的神器googel DeyTools

虫子君 2018.7. 418:09:14 评论 260

平时的时候我们使用的网站主题,大部分都是自己喜欢的样子购买的,可是时间久了以后,总是会发现很多地方不如人意,总想着要修改,可是苦于不是程序员出身的我们,只能干瞪眼。

那么到底有没有办法通过别的工具实现自己想要的功能,或者说是自定义CSS样式。当然如果让我们自己去修改style.css文件,那还是算了吧,这个我自己看着都累,别说是多数站长了。

那么就往下看,再不需要修改style.css文件的前提下,如何做到自定义自己wordpress网站主题的自定义的。

其实是可以的,对于不知道什么时候开始的,wordpress 已经添加了一项新的功能,那就是自定义css样式,一般我们都会忽略这样的,毕竟我们不是专业的。那就听我来说道说道;

在wordpress的外观——主题自定义里面有这么一项功能。自定义wordpress主题CSS样式的神器googel DeyTools

有一个额外的CSS选项,在这里我们是可以实时预览我们自己修改的样式。自定义wordpress主题CSS样式的神器googel DeyTools

然后再结合我们的浏览器,这里我推荐使用googel浏览器,因为它才是我们今天的主人公。自定义wordpress主题CSS样式的神器googel DeyTools

由于是国外的软件,所以这样的高级功能肯定英文的,不过这些都不重要,如果你确实一定要知道每一个按钮的中文名称,可以一个一个去翻译,这里推荐你使用一个软件“OCR”图像识别技术的一个总称。

好了,具体OCR就不多说了,不过有需要的可以给我留言我这里在已经为你准备妥当;

下面说一下,一些具体的使用技巧;

由于我们的网页都是又HTML组成的,所以每一个单元又名元素,都是绝对的,不会相同,不然css就会出现不能控制的现象,这里可以自行脑补一下css的具体命令的实现原理。

所以我们需要借助googel的DevTools,用来查看我们的当前需要修改的这个样式的绝对名称,比如说;你需要找到“.picture-box”这个class,那么直接右键单击你选区的部分,检查就可以找到该“class”的绝对值。(有些拗口,下次再出一个,某一个项目修改的视频吧!)

如下图:

内容1;指的是你当前选择的HTML网页的元素

内容2;指的是当前这个“class/类属性”下面使用的所有CSS样式。

内容3;指的是该区域的所有矩形边框,也就是该区域的内容大小。(这里有点不好解释,具体看个人理解)自定义wordpress主题CSS样式的神器googel DeyTools

当然googel浏览器很智能,每一个都会用CSS 3的属性明确的表达出来,并且你修改后,基本上能够兼容目前的所有浏览器。

比如说某一个区域的div容器是“search-main”那么他将包含四个外部边框,这个如果wordpress主题没有定义,也可以自定义添加相关属性。

比如:position、margin、border、padding这四个外部边框都是由我们自行定义。

这里我举一个例子;仔细看图片;自定义wordpress主题CSS样式的神器googel DeyTools

我在margin这个元素添加了一个参数值:1999(随意写的)那么你当前的点选的这个div容器,就会有相应的变化,然后我们看第二个margin-top:1999px;意味着顶部我们增加了1999个像素的高度。(基本上这个元素,如果外部没有被另一个div绝对控制的话,就一定会法神巨大的变化。)

好了这些事内容块的修改,当然还可以做别的。比如说控制板一个图像的透明度,给图像添加一层阴影,这些都是可以。

我就说说“DevTools”自带的一些样式。

如:文本阴影、矩形阴影、文字底色、填充颜色等等,还有其他的一些命令这个就需要自己添加对应的css样式到里面了。自定义wordpress主题CSS样式的神器googel DeyTools

文章写到这里算是结束了,如果还有不会给我留言,我会一一解答。并为你展示具体的效果。

当然这些需要一定的代码理解能力,其实没那么复杂,wordpress主题网站的自定义可行性还是非常高的,一般除了直接修改“style.css”样式文件之外,部分wordpress主题还自带添加自定义的css的填选框。比如说在目前小站长圈子里面最火的“bridge”主题,我目前使用的;就包含了这样的功能,其他大部分比较有名气的主题都自带这样的功能。

虫子君

发表评论

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