WordPress 主题 Bliss 修改 Material Design 配色

我现在使用的博客主题是 Bluthemes 开发的 Bliss 主题,极简卡片式的风格,用主题自带的蓝色主题。

Bliss | Personal Minimalist Wordpress Blog Theme

old-Bliss-wordpress-theme

最近,在物色  WordPress  主题的时候发现一个 Material Design 的主题的网站 MaterialWP.com ,很喜欢这网站首页配色。

materialwp-com

开始研究怎么把 Bliss 主题改成那种配色,首先得知道人家网站的颜色的 Hex 颜色代码,用 QQ 截图把光标移动到需要的颜色上能得到 RGB 颜色代码( 48,63,159 )。

QQ-RGB-HEX

用在线工具把 RGB 代码转换成为 Hex 代码( #303F9F )。

RGB-TO-HEX

然后修改 Style.css ,技术太渣,怎么改都没用。

用最笨的方法,我找到了 Bliss 主题自定义 CSS 的文件,在主题目录下的 inc 目录的 custom-css.php ,在此文件的第 44 行开始。

需要修改的是 theme_color (主题)、 background_color (背景)、 top_banner_color (顶部)、header_color (导航栏)和 footer_color (低部)的颜色。

参照 MaterialWP.com 的颜色,我的改成了这样:

  • Top Banner:#3F51B5
  • Background :#E5E5E5
  • Header: #303F9F
  • Footer:#374147
 

改完颜色顺眼了很多,但是 Chrome 下字体都是宋体,在主题设置页自定义 CSS 里面添加这样一段就能把全部字体变成微软雅黑。

 

装修好后特意上 OS X 上截个图,黑苹果的妙用…

2015-Baka-House