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

评论

  1. 7年前
    2015-6-27 18:23:38

    你个渣渣。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇