Hodajuku Distribution 1.0.2 for XOOPS Cube Legacy 2.1.5 のテーマをカスタマイズ

現在いくつかのサイトをXOOPSを使って作っているのですが、テーマは専らhd_defaultを使わせていただいています。かなり無駄が省かれているのですが、まだwrapperを削れそうだとかメニューの見出しにh2はもったいないなど思う部分があるので、それらを自分のサイトに合った形に変えてみたいと思います。

Sponsored Link

ファイル構成と変更したい箇所

※[]はフォルダを表しています

• [hd_default]
  • css_contrast.css - 弱視の方ためにコントラストを強くしてあるCSS。css_style.cssに合わせて修正。
  • css_layout.php - レイアウトが定義されているファイル。theme_config.phpとあわせて使用。使わない部分は削る。
  • css_modules.php - モジュールの上書き用CSSファイル。!importantがいっぱい。今のところ良く分からない。
  • css_print.css - 印刷用CSS。こちらもcss_style.cssの変更に合わせて修正。
  • css_style.css - 基本のCSS。theme_config.phpとあわせて使用。使わない部分は削ってわかりやすいように分割。
  • hd_assign.php - Smarty変数の設定ファイル。今のところ良く分からない。
  • manifesto.ini.php - 管理メニューで表示されるテーマの情報。変更した箇所を修正。
  • screenshot.png - テーマ選択画面で表示されるテーマのスクリーンショット画像。テーマに合わせて差し替え。
  • theme.html - ベースとなるhtml。無駄なブロックを極力削る。
  • theme_config.dist.php - 色や幅などを調整するファイル。CSSを直接いじれるのであればいらないかも。
  • [images] - サイトのロゴが格納されている。オリジナルのものに差し替え。
    • [_common] - 矢印などの細々したアイコン。好みのものに差し替え。以下のファイルタイプのアイコンは使わないなら要らない。
      • [audio_files]
      • [compression_files]
      • [graphic_files]
      • [system_files]
      • [text_files]
      • [video_files]
  • [js]
    • [jgrowl] - Growl風にメッセージを表示するプラグイン。サイトに合わせて色を変える。IE5.5では表示されない/IE6では角丸がなくなるなどの問題も。
  • [language] - メッセージの設定ファイル。好みの文章に変更。
  • [templates] - legacyモジュールのテンプレート。使うものだけ修正。
    • cubeUtils_block_login.html - オートログインのチェックボックスのついたログイン用ブロック
    • cubeUtils_userform.html - /user.php にアクセスしたときに現れるオーバライド用のログイン画面
    • hd_admin_theme_ctrl.html - 管理者用のメニューらしいけどどこで使われているのか謎。
    • hdlegacy_site_closed.html - 「このエリアへのアクセスは許可されていません～」の画面
    • index.html - <script>history.go(-1);</script>とだけ書かれている。
    • legacy_block_comments.html - ブロック「最近のコメント」のテンプレート
    • legacy_block_mainmenu.html - ブロック「メインメニュー」のテンプレート
    • legacy_block_search.html - ブロック「検索」のテンプレート
    • legacy_block_siteinfo.html - ブロック「サイト情報」のテンプレート
    • legacy_block_themes.html - ブロック「テーマ選択」のテンプレート
    • legacy_block_usermenu.html - ブロック「ユーザメニュー」のテンプレート
    • legacy_block_waiting.html - ブロック「承認待ちコンテンツ」のテンプレート
    • legacy_comment.html - コメント本体部分のテンプレート
    • legacy_comment_edit.html - コメント編集画面のテンプレート
    • legacy_comment_navi.html - コメント操作部位のテンプレート
    • legacy_comments_flat.html - コメント表示フラット形式用のテンプレート
    • legacy_comments_nest.html - コメント表示ネスト形式用のテンプレート
    • legacy_comments_thread.html - コメント表示スレッド形式用のテンプレート
    • legacy_image_list.html - イメージマネージャの投稿フォーム本体部分のテンプレート
    • legacy_image_upload.html - イメージマネージャのアップロード本体部分のテンプレート
    • legacy_misc_friend.html - ページ「当サイトを友達に薦める」本体部分のテンプレート
    • legacy_misc_friend_success.html - ページ「当サイトを友達に薦める」のサクセスメッセージ
    • legacy_misc_smilies.html - 顔アイコン一覧ページのテンプレート
    • legacy_notification_delete.html - イベント通知選択解除確認フォームのテンプレート
    • legacy_notification_list.html - イベント通知一覧のテンプレート
    • legacy_notification_select.html - イベント通知設定部位のテンプレート
    • legacy_notification_select_form.html - テンプレート関数「legacy_notifications_select」のテンプレート
    • legacy_redirect.html - リダイレクト画面のテンプレート
    • legacy_render_dialog.html - 別ブラウザを起動して表示する(ポップアップ)ページなどで使用されるテンプレート
    • legacy_search_form.html - ページ「検索」のテンプレート
    • legacy_search_results.html - ページ「検索結果」のテンプレート
    • legacy_search_showall.html - ページ「検索結果」(すべて)のテンプレート
    • legacy_search_showallbyuser.html - 検索結果表示ページ(すべて)のテンプレート
    • legacy_xoops_confirm.html - ページ「確認」のテンプレート
    • legacy_xoopsform_dhtmltextarea.html - クラス XoopsFormDhtmlTextArea のテンプレート
    • legacy_xoopsform_opt_smileys.html - クラス XoopsFormDhtmlTextArea 顔アイコン部位のテンプレート
    • pm_delete_one.html - プライベートメッセージ削除を確認する画面のテンプレート
    • pm_pmlite_success.html - プライベートメッセージ送信完了画面のテンプレート
    • pmlite.html - プライベートメッセージ送信画面のテンプレート
    • readpmsg.html - メッセージの詳細画面のテンプレート
    • user_avatar_edit.html - アバターを編集する画面のテンプレート
    • user_block_login.html - ログイン/ログアウト中画面のテンプレート
    • user_block_newusers.html - 新しいユーザーを表示するブロックのテンプレート
    • user_block_online.html - オンライン状況表示ブロックのテンプレート
    • user_block_topusers.html - 投稿ランキングのテンプレート
    • user_default.html - /user.phpのログイン画面テンプレート
    • user_edituser.html - ユーザープロフィール編集画面のテンプレート
    • user_lostpass.html - パスワード再発行画面のテンプレート
    • user_misc_online.html - 詳しいオンライン状況（ポップアップ画面）のテンプレート
    • user_register_confirm.html - ユーザー登録画面のテンプレート
    • user_register_finish.html - ユーザー登録完了画面のテンプレート
    • user_register_form.html - ユーザー登録画面のテンプレート
    • user_userinfo.html - ユーザーモジュールのテンプレート
    • viewpmsg.html - プライベートメッセージを受信箱のテンプレート
    • [pico]
      • inc_breadcrumbs.html - パンくずナビのテンプレート

何のファイルかわからなかったものもありますが今回はこの辺で。

その他気づいたこと

• アバター画像,ランクの星画像,スマイリーアイコン等画像全般を好みのものに
• PMとだけ書かれても何のことかわからない？
• PMのメッセージが着ている時の強調表示が好みでない

参考にさせていただいてるサイト

• デザイナーの為のXOOPSマニュアル - ホダ塾 - まずはここで基本を勉強
• XOOPS Cubeサイト構築一代記 34.テーマのカスタマイズ - ArtSoftwareWorks.Net - hd_defaultのテーマについて具体的な解説があります。
• 第 12 章 XOOPS Cube テンプレート一覧 - XOOPS Cube 怪変 覚え書き - legacyのテンプレートの説明はこちらから引用させていただきました。
• ModuleManuals/CubeUtils [cubeUtils モジュール] - XUGJ Wiki - Xoops Users Group Japan - cubeUtilsのテンプレートの説明はこちらから引用させていただきました。
• XOOPS デザインテーマ - BCOOL THEME - XHTML(1.0 Transitional) + CSSで構築されている
• XOOPS Theme配布*Mystic-pink-beta - Lovelog+* - テーブルレスにこだわったテーマ

次回からは1つ1つのテンプレートについてスクリーンショットを撮って1記事ずつカスタム記録を書いていきます。