デザインガイド

対象バージョン

当ドキュメントはRubricks-0.2.x向けです。

◇テーマのフォルダ構成◇

Rubricksは、基本的にテーマ(theme)によってデザインを構成しています。
このテーマを編集することにより、オリジナルのテーマを作成することができます。
テーマフォルダには、index.rhtml、CSS、JavaScript?、画像が含まれています。
現在のテーマは"default"となっています。

▼themeのフォルダ構成

◇新規テーマを作成する場合◇

新規テーマを作成する場合は、"default"フォルダを同じ階層にコピーし好きな名前にリネーム後、中身を変更してください。
作成作業時はthemeフォルダ配下では変更が反映されない為、index.rhtml以外はpublicフォルダ配下で作業し、完成後にthemes配下にコピーしてください。
格納フォルダは以下のとおりです。

作業時

以下のファイルを変更してください。

index.rhtml:
　 rubricks/themes/新規フォルダ/index.rhtml

stylesheet:
　rubricks/public/stylesheets/themes/新規フォルダ/style.css

JavaScript：
　rubricks/public/javascripts/themes/新規フォルダ(配下)

画像:
　rubricks/public/images/themes/新規フォルダ(配下)

注意)
themesフォルダ配下にもstylesheet,images,javascriptsフォルダがありますので混同しないようにしてください。




完了時

以下の作業を行ってください。
publicフォルダ配下のCSS,javascript,画像をthemes配下のテーマ名フォルダにコピーする。

移動前：
stylesheet:
　rubricks/public/stylesheets/themes/新規フォルダ/style.css
JavaScript：
　rubricks/public/javascripts/themes/新規フォルダ(配下)
画像:
　 rubricks/public/images/themes/新規フォルダ(配下)

移動後：
stylesheet:
　rubricks/themes/新規フォルダ/stylesheets/style.css
JavaScript：
　rubricks/themes/新規フォルダ/javascripts(配下)
画像:
　rubricks/themes/新規フォルダ/images/(配下)

◇index.rhtmlの構成◇

1.JavaScript?とstylesheet

index.rhtmlの<head></head>の中にJavascriptとstlesheetを読み込むように、以下を記述してください。
記述がない場合には正常に動作しない恐れがあります。

  <%= javascript_include_tag "/javascripts/prototype" %>
  <%= javascript_include_tag "/javascripts/validate" %>
  <%= javascript_include_tag "/javascripts/spinelz_lib/scriptaculous" %>
  <%= javascript_include_tag "/javascripts/spinelz_lib/spinelz_util" %>
  <%= javascript_include_tag "/javascripts/spinelz_lib/resize" %>
  <%= javascript_include_tag "/javascripts/spinelz/navPanel" %>
  <%= javascript_include_tag "/javascripts/spinelz/tabBox" %>
  <%= javascript_include_tag "/javascripts/spinelz/window_resizeEx" %>
  <%= javascript_include_tag "/javascripts/spinelz/window" %>
  <%= stylesheet_link_tag "/stylesheets/spinelz/navPanel" %>
  <%= stylesheet_link_tag "/stylesheets/spinelz/tabBox" %>
  <%= stylesheet_link_tag "/stylesheets/spinelz/window" %>
  <%= stylesheet_link_tag "/stylesheets/themes/新規フォルダ/スタイルシート名" %>
  <script>
    /* var & function box for ajax */
    var _box = new Array();
  </script>

2.indicatior

index.rhtmlの<body></body>の中に以下の記述を入れてください。
記述がない場合には、正常に動作しない恐れがあります。

  <!-- Info Message Partition Begin -->
  <div id="rubricks_wait_message" style="position: fixed!important; position: absolute; top: 220px; left: 0px;">
    <div class="rubricks_general_window_title" style="text-align: left;"><%= hl('[_Common_Wait]') %></div>
    <div class="rubricks_general_window_content" style="text-align: left;">
      <%= image_tag('/images/themes/[新規フォルダ]/indicator.gif', {:size => '16x16', :alt => 'Indicator'}) %>
      <div style="text-align:center;"><%= hl('[_Common_Processing]') %></div>
    </div>
  </div>
  <script type="text/javascript">
    var rubricks_wait_message = new Window('rubricks_wait_message',{width:150, height: 80, closeButton:false, maxButton:false, minButton:false, resize:false});

    function rubricks_wait_message_open(){
      wait_left = document.body.clientWidth / 2 - 75;
      $('rubricks_wait_message').style.left = wait_left + 'px';
      rubricks_wait_message.open();
    }
  </script>
  <!-- Info Message Partition End -->

◇スタイルシートの構成◇

1.全体構成

下図のようにパーティションで区切っています。
各要素を構成するスタイルの定義は次のとおりです。
※詳細はindex.rhtmlを参照してください。

クラス名
①div.rubricks_partition_header
②table.rubricks_partition_header
③div.rubricks_partition_body
④table.rubricks_partition_body
⑤tr.rubricks_partition_body
⑥table.ruburicks_partition_c
⑦div.rubricks_partition_footer
Header Partitiontable.rubricks_partition_header
Left Partitiontd.rubricks_partition_l
Center-Center Partitiontd.rubricks_partition_c_c
Center-Left Partitiontd.rubricks_partition_c_l
Center-Right Partitiontd.rubricks_partition_c_r
Main Contenttd.rubricks_partition_m
Right Partitiontd.rubricks_partition_r
Footer Partitiontd.rubricks_partition_footer

2.各クラスの名称と定義

［表１］

：rubricks_general_table1


　★タイトルの背景画像："table1_header.gif"　widh:10px　height:30px
※table1の枠線の定義は、実線以外にも点線、線無し、浮き上がって見える線などが定義されています。
詳しくはstyle.cssの「rubricks_general_table1」部分を参照してください。

［表２］

：rubricks_general_table2


　★タイトルの背景画像："table2_header.gif"　widh:10px　height:30px
※table2の枠線の定義は、実線以外にも点線、線無し、浮き上がって見える線などが定義されています。
詳しくはstyle.cssの「rubricks_general_table2」部分を参照してください。

［tabBox］

：custom_tabBox




　★Active時の画像：

①"tabBox_tabLeftActive.gif"widh:5px　height:28px
②"tabBox_tabMiddleActive.gif"widh:4px　height:28px
③"tabBox_tabRightActive.gif"widh:5px　height:28px

　★Inactive時の画像：

①"tabBox_tabLeftInactive.gif"widh:5px　height:28px
②"tabBox_tabMiddleInactive.gif"widh:4px　height:28px
③"tabBox_tabRightInactive.gif"widh:5px　height:28px

※tabBoxは"spinelz(http://script.spinelz.org/)"のコンポーネントを使用して作成されています。
スタイルシートで、spinelzのスタイルを上書きしています。
　(spinelzのクラス名に"custom_"をつけて使用します)
詳しくはstyle.cssの「custom_tabBox」部分を参照してください。

［window］

：custom_window




　★windowの画像：

①"box_top_left.gif"widh:5px　height:20px
②"box_top_middle.gif"widh:5px　height:20px
③"box_top_right.gif"widh:5px　height:20px
④"box_middle_left.gif"widh:5px　height:5px
⑤"box_middle_right.gif"widh:5px　height:5px
⑥"box_bottom_left.gif"widh:5px　height:5px
⑦"box_bottom_middle.gif"widh:5px　height:5px
⑧"box_bottom_right.gif"widh:5px height:5px

※windowは" spinelz (http://script.spinelz.org/)"のコンポーネントを使用して作成されています。
†window部分に関しては、スタイルシートで、spinelzのスタイルを上書きしています。
　(spinelzのクラス名に"custom_"をつけて使用します)
　詳しくはstyle.cssの「custom_window」部分を参照してください。
†windowのタイトルや中のボックスなどは、style.cssの「rubricks_general_window」部分を参照してください。

：custom_navPanel




　★Active時の画像：

①"menubar_l.gif"widh:5px　height:20px
②"menubar_c.gif"widh:4px　height:20px
③"menubar_r.gif"widh:5px　height:20px

　★Inactive時の画像：

④"menubar_inactive_l.gif"widh:5px　height:20px
⑤"menubar_inactive_c.gif"widh:4px　height:20px
⑥"menubar_inactive_r.gif"widh:5px　height:20px

※navPanelは"spinelz(http://script.spinelz.org/)"のコンポーネントを使用して作成されています。
スタイルシートで、spinelzのスタイルを上書きしています。
　(spinelzのクラス名に"custom_"をつけて使用します)
詳しくはstyle.cssの「custom_navPanel」部分を参照してください。

[コンテンツボックス]

：rubricks_cb




　★rubricks_cbの画像：

①"cb_title_c.gif"widh:12px　height:23px
②"cb_title_l.gif"widh:12px　height:23px　

※詳しくはstyle.cssの「rubricks_cb」部分を参照してください。
　

［タイトル］

：rubricks_general_title_borderless


　★titleの画像：："arrow_icon.gif"　widh:18px　height:18px

※タイトルのクラスは"rubricks_general_title_borderless"以外にも定義されています。
詳しくはstyle.cssの「rubricks_general_title」部分を参照してください。

Attachments