Embed Size (px)
Citation preview
Sugar 5.5 新テーマシステムを読み解くCogniTom Academic Design
2009年11月25日水曜日
GUIで出来ること
ロゴの設定 (以前のバージョンから可) 使用可能なテーマを限定
NEW!
2009年11月25日水曜日
What’s new?
• まっとうなHTMLに近づいた!• テンプレートエンジンXTemplate → Smarty
• 継承可能なテーマシステム(SugarThemeクラス)
0
50
100
150
200
250
300
Sugar 5.2
Sugar 5.5
HTMLエラー
2009年11月25日水曜日
5.2 5.5
2009年11月25日水曜日
テーマファイルの構成Sugar 5.2 Sugar 5.5 備考
config.php themedef.php テーマの定義 (名称・機能対応など)
header.html tpls/ Smartyテンプレート
images/ images/ アイコンなどの画像
各種CSSファイル css/ スタイルをcssディレクトリに集約
style.js js/style.js YUIベースに
header.php 廃止へ SugarView::displayHeader()
footer.php 廃止へ SugarView::displayFooter()
layout_utils.php 廃止へ
2009年11月25日水曜日
5.2 5.5
2009年11月25日水曜日
テンプレートの継承• テーマ「SugarIE6」の場合• custom/themes/SugarIE6/tpls/ ← 子テーマのカスタマイズ
• themes/SugarIE6/tpls/ ← 子テーマ
• custom/themes/Sugar/tpls/ ← 親テーマのカスタマイズ
• themes/Sugar/tpls/ ← 親テーマ
• custom/themes/default/tpls/ ← デフォルトテーマのカスタマイズ
• themes/default/tpls/ ← デフォルトテーマ
2009年11月25日水曜日
テンプレートの継承
default
Sugar
SugarIE6 子テーマcustom
custom
custom
孫テーマも可
親テーマ
デフォルトテーマ
優先度
2009年11月25日水曜日
JavaScriptの継承
default
Sugar
SugarIE6
custom+
+
+
custom+
custom+
cache/theme/SugarIE6/js/style.js
minified
※ただし開発者モードではミニファイされない
2009年11月25日水曜日
CSSの継承
default
Sugar
SugarIE6
custom+
+
+
custom+
custom+
cache/theme/SugarIE6/css/style.css
minified
※ただし開発者モードではミニファイされない
2009年11月25日水曜日
CSS (スタイルと色とフォント)
•style.css• print.css• chart.css• yui.css• color.<色>.css ←色に関する記述はここに
• font.<フォント>.css ←フォントサイズに関する記述はここに
$themedef = array( 'name' => "Sugar", 'description' => "Sugar", 'colors' => array("sugar","red","green","blue","purple","gray"), 'fonts' => array("normal", "larger", "largest"), 'group_tabs' => true, );
2009年11月25日水曜日
画像の呼出しCSSの場合div.sample { background-image: url(../../../../index.php entryPoint=getImage&imageName=sampleImage.gif);}
HTMLの場合<img src=”index.php? entryPoint=getImage&imageName=sampleImage.gif” />
PNGもOK!
2009年11月25日水曜日
テーマ作成にチャレンジ1. 下準備a. 既存のテーマをコピーして配置b. 名称などを設定 → themedef.phpc. 不要なファイルを削除2. テーマ作成a. 新規テーマを選んでログインb. 開発者モードをONにc. CSSとSmartyテンプレートを書き換え(書き換えと、ブラウザの再読込を繰り返す...)
3. パッケージ化2009年11月25日水曜日
デフォルトテーマのみ適用した状態
2009年11月25日水曜日
サンプルとして作成したテーマ
2009年11月25日水曜日
