怎样修改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

怎样为你的网站制作icon图标?

什么是网页的icon?

什么是网页的icon呢?就是当你在浏览器中打开一个网页时,网页标签(tab)最左部位的那个小图标。例如百度的网页icon为百度独特的熊掌标识:

网页icon有什么作用?

网页的icon不仅能让你的网站显的更为专业,还能突出你的品牌和特色,一个有意思的或者美观的或者独特的网页icon能给你的读者留下比较深的印象。
而且在用户使用的过程中,如果浏览器打开了众多的标签,一个好的icon能让用户方便的点回你网站的页面。

用画图工具制作icon图标

如果你在搜索引擎中搜索 “网页icon制作”,能找到很多网站为你提供免费的icon制作或者生成的工具,杂七杂八,好坏都有,不多评价了。这篇文章主要写给那些不想在第三方网站上生成,并且也不熟练PS技术的同学。

因为这里讲的是用Windows系统默认的画图工具制作一个简单的网页icon,最后并在多个浏览器中测试显示的效果。

1. 在windows中打开画图工具(例如我的英文系统为paint),将图片尺寸设置为32×32像素,或者16×16,建议选32,因为太小了不太好画,清晰度也不够。
32×32,还是太小了,没有办法画,用放大镜(view ->放大镜)将图片放到最大然后进行编辑。

设计的部分就不多讲了,你的icon需要突出你网站的主题,就像公司的商标一样,例如CodeWenda.com,我的设计是以Code首字母C加上问号演变而来的一个图标,比较简洁清晰,将图片放大效果如下,看大图有点粗糙,不过效果还不错。

将图片保存为favicon.ico,注意扩展名为ico

2. 图片制作完成之后,将图片ftp(或使用别的工具)保存在你网站的根目录下,例如Linux下为/var/www/html/,默认情况下,重新打开你的网站应该能在页面中显示你的icon图标了。
如果没有显示有可能因为缓存的原因,可以清空本地缓存重新尝试。

以上的图标在Code网站显示的效果如下(分别为Chrome,Firefox和Edge浏览器):

Code问答 | CodeWenda.com