1. 首页
  2. 互联网运营
  3. 建站技术

WordPress主题如何简单修改CSS文件中的样式(上)

GD最近一直坚持的在做一件事情,那就是添加各种wordprss的群或者贴吧。为什么要这样做了,因为我想去了解下有哪些问题可以写成文章。GD一直在坚持原创文章,宁缺毋滥,写不出文章的时候就不写。也不会去粘贴别人的文章,今天给大家写一篇关于如何修改主题中的css样式,从而达到自己想要的效果,这也是大部分小伙伴所遇到并想解决的问题。此问题说难也难,说简单也很简单,至少你去群里问别人,别人只会告诉你,前端审查元素找到对应的文件,去后台css文件中更改就行。对大神或有点基础的小伙伴来说是件很容易的事情,但对刚刚接触这一块的小伙伴来说确实有点难度。

1.如何在前端找到需要修改的css

我们查看网站的源文件或者审查元素的时候都要通过一些工具来实现,比如一个实用的浏览器,这里GD推荐使用火狐浏览器。这款浏览器是GD最喜欢的,功能全面,布局看着也很舒服。那么,我们要修改网站的一个部位的样式怎么来查看了,下面我们通过实例来详细说明。

最近一个客户需要把侧边的悬浮框改成自动展开的样式,但是他自己又不知道在哪里更改。像GD这么有爱心的人,就免费为他更改了。首先再看对照图:

Wordpress主题如何简单修改CSS文件中的样式(上)

这是没修改前的样式

Wordpress主题如何简单修改CSS文件中的样式(上)

这是修改后的样式(修改后打开网站就自动展开)

2.我们通过火狐浏览器右键点击需要修改的地方,选择审查元素。此时在你的底部或者你的右侧显示的便是这个部位所对应的代码。

Wordpress主题如何简单修改CSS文件中的样式(上)

1.鼠标移到需要修改的部位右键查看元素

Wordpress主题如何简单修改CSS文件中的样式(上)

看图红框所标注的就是左侧需修改部位,以及右侧相对于的代码,通过代码可以看出此部分的Style样式是默认关闭的,这时候我们便在前台找到所需修改的代码。接下来我们便开始找此代码对应的css文件在哪个文件夹中。

Wordpress主题如何简单修改CSS文件中的样式(上)

控制这个部位的代码默认none关闭的,我们在这里更改成Block测试下是不是打开了,ok,此时已经出现你想要的结果。但是这里是无法保存样式的,我们需要在css样式表中更改。

Wordpress主题如何简单修改CSS文件中的样式(上)

图中所标注的地址便是控制此部分样式的文件,然后图中其他css可看出,控制的颜色、宽度等。这些也是可以更改的,根据你自己的需求更改。但是一定要记得保存备份,不然你下次在升级主题的时候这些修改文件是会被覆盖的。

这篇文章就写到这里了,主要讲的是如何找到对应的css文件夹,下一篇文章我们接着讲如何去修改css文件从而达到自己想要的效果。学习更多wordpress知识,请关注GD博客,我们一起边学边交流。毕竟GD也是一个渣渣,懂的越多,才会发现不懂的越多。

本站的文章和资源来自互联网或者站长的原创·侵删,发布者:在意-转载请注明出处:WordPress主题如何简单修改CSS文件中的样式(上)https://www.seozcw.com/1111.html

发表评论

登录后才能评论

评论列表(1条)

  • 在意 2019年5月25日 下午2:36

    每一篇文章都坚持自己写作,相信几年后,GD博客在wordpress网站中也会有自己的一席地位。

联系我们

技术交流请加QQ:519565930

邮件:519565930@qq.com

工作时间:24小时无状态

QR code