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 行开始。

case 'default';	
			$css_options['theme_color'] 							= '#45b0ee';
			$css_options['background_color'] 					= '#EDEDED';
			$css_options['top_banner_color'] 					= '#444444';
			$css_options['top_banner_font_color'] 		= '#FFFFFF';
			$css_options['top_banner_social_color']		= '#FFFFFF';
			$css_options['header_color'] 							= '#FFFFFF';
			$css_options['header_font_color'] 				= '#777777';
			$css_options['post_header_color'] 				= '#333333';
			$css_options['main_font_color'] 				= '#333333';
			$css_options['widget_header_color'] 			= '#FFFFFF';
			$css_options['widget_header_font_color'] 	= '#333333';
			$css_options['footer_color'] 							= '#333333';
			$css_options['footer_header_color'] 			= '#FFFFFF';
			$css_options['footer_font_color'] 				= '#FFFFFF';

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

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

  • Top Banner:#3F51B5
  • Background :#E5E5E5
  • Header: #303F9F
  • Footer:#374147
case 'default';	
			$css_options['theme_color'] 							= '#4450C0';
			$css_options['background_color'] 					= '#E5E5E5';
			$css_options['top_banner_color'] 					= '#3F51B5';
			$css_options['top_banner_font_color'] 		= '#FFFFFF';
			$css_options['top_banner_social_color']		= '#FFFFFF';
			$css_options['header_color'] 							= '#303F9F';
			$css_options['header_font_color'] 				= '#FFFFFF';
			$css_options['post_header_color'] 				= '#212121';
			$css_options['main_font_color'] 				= '#333333';
			$css_options['widget_header_color'] 			= '#FFFFFF';
			$css_options['widget_header_font_color'] 	= '#333333';
			$css_options['footer_color'] 							= '#374147';
			$css_options['footer_header_color'] 			= '#374147';
			$css_options['footer_font_color'] 				= '#EEEEEE';

 

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

/* Primary Font Style */
                body, .font1, .font-primary, .commentlist, input{
                        font-family:Microsoft YaHei,Georgia, '冬青黑体简体中文 w3', Times, serif;
                }

        /* Header Font Style */
                h1, h2, h3, h4, h5, h6, .site-title{
                        font-family:Microsoft YaHei,Georgia, '冬青黑体简体中文 w3', Times, serif;
                }

 

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

2015-Baka-House

使用 Hugo 构建
主题 StackJimmy 设计