PEAK XOOPS - テンプレート化したCSSを持つテーマ in englishin japanese

Archive | RSS |
XOOPS
XOOPS : テンプレート化したCSSを持つテーマ
Poster : GIJOE on 2007-04-03 06:52:19 (12061 reads)

in englishin japanese
テーマのCSSをいじるときにいつも違和感を覚えるのが、あまりにも重複した即値が多い、ってことです。
CSSベースのテーマだと特にそうで、同じ意味を持つ同じ数値(width等)が何度も出てきます。同じ数値なら検索できるだけまだマシですが、その数値+1とか、数値の半分なんて指定をしないと崩れることも多く、悩みのタネです。

色も同様で、いろんな箇所で色指定がされている割に、それをまとめて指定する方法がありません。

さらに、ブラウザ間の互換性を解消するためのバグっぽいスタイル指定なんかも、まともなブラウザには送りたくありません。

そのイライラを解消するために、テンプレート化したCSSを持つテーマ、なんてのを作ってみました。

http://xoops.peak.ne.jp/md/mydownloads/singlefile.php?lid=98

ベースは、CSSテーマとしてはかなり完成度の高い、hodakaさん作 full_flex_1 です。
http://www.hodajuku.org/modules/mydownloads/singlefile.php?cid=1&lid=1
CSSテーマとして完成度が高いということは、すなわち、CSSがとてもいじりづらい構造になっています(=多くの即値が複雑な関連性を持っている)。CSSテンプレートの実力を見せるためには、まさにうってつけのベーステーマと言えるでしょう。

このテーマのCSSカスタマイズは、screen_css.php の以下の部分をいじります。
このようにカラーを抽出してみると、実際にサイトのイメージを決めるのはおよそ8色程度であることが判ります。

「8色?」

ええ、そうです。エイプリルフールネタでは、この$colorsに、pic2colorから得られた色を割り当てていたわけです!

screen_css.php


// CONFIGURATIONS

$colors = array(
	'bg' => '#cccccc' ,
	'main' => '#ffffff' ,
	'main_rev' => '#666666' ,
	'header' => '#2f5376' ,
	'header_rev' => '#ffffff' ,
	'link' => '#666666' ,
	'link_hover' => '#ff6600' ,
	'impact' => '#2f5376' ,
	'impact_rev' => '#ffffff' ,
	'title' => '#dddddd' ,
	'title_rev' => '#639ace' ,
	'head' => '#c2cdd6' ,
	'even' => '#dee3e7' ,
	'odd' => '#e9e9e9' ,
	'error' => '#ffcccc' ,
	'confirm' => '#ddffdd' ,
	'result' => '#dddddd' ,
	'border' => '#999999' ,
) ;
$fonts = array(
	'main' => '"Verdana","Arial","Helvetica","sans-serif"' ,
	'monospace' => '"Courier New","Courier","monospace"' ,
) ;
$sizes = array(
	'body_min_width' => 750 ,
	'body_max_width' => 1024 ,
	'block_left_width' => 170 ,
	'block_right_width' => 170 ,
	'header_height' => 80 ,
	'footer_height' => 23 ,
) ;
$cache_limit = 3600 ; // 1 hour

// END OF CONFIGURATIONS


Related articles
Printer friendly page Send this story to a friend

Comments list

gigamaster  Posted on 2007/4/10 2:32
This just send me back to my old phpnuke and postnuke themes. By that time, a C+ programmer friend, show me how to replace the interface french graphics by english according to O.S. or user language choice.

Omachi kudasai, Gijoe-sama.
Motto yukkuri hanashite-kure-masuka?
Motto yasashii kotoba de itte-kure-masuka?
Watashi no nihongo wa wakarimasen-ka?
Nihongo wa watashi ni muzukashii desu.

I'm not sure ...Donna imi desu-ka?
Eigo-de itte-kudasai.

At last, i don't fear to read somewhere that gigamaster is kure-kun, because i fight for honor alike the last samourai and i share what i get. So should i say that I'm really interested by "theme editor"

"Egao ga areba jibun ga kaeru
tanin ga kaeru unmei ga kaeru"

=)
Login
Username or e-mail:

Password:

Remember Me

Lost Password?

Register now!