「テーマの基本」の版間の差分
Mitsuhiro Yoshida (トーク | 投稿記録) |
Mitsuhiro Yoshida (トーク | 投稿記録) |
||
62行目: | 62行目: | ||
==== スタイルシート ==== | ==== スタイルシート ==== | ||
柔軟性、アクセシビリティ、自由なページデザインのため、Moodle 1.5から明確に[[#プレゼンテーション層からコンテンツを分離する|プレゼンテーション層からコンテンツを分離する]] | 柔軟性、アクセシビリティ、自由なページデザインのため、Moodle 1.5から明確に[[#プレゼンテーション層からコンテンツを分離する|プレゼンテーション層からコンテンツを分離する]]ことになりました。比較的簡単に少しの色とフォントの変更でテーマを変えるチャンスをあなたに与えるため、CSSは以下の3つのファイルに分けられました: | ||
styles_layout.css | styles_layout.css |
2008年6月1日 (日) 15:26時点における版
作成中です - Mitsuhiro Yoshida 2008年5月28日 (水) 11:31 (CDT)
テーマフォルダの中には何が入っていますか?
それぞれのテーマフォルダには、以下のファイルおよびフォルダが入っています。
pix/ config.php favicon.ico footer.html header.html styles.php styles_color.css styles_fonts.css styles_layout.css styles_moz.css
pixフォルダ
このフォルダには、テーマで使用する、すべての画像およびアイコンが含まれています。
favicon.ico
これは、ブラウザのアドレス入力欄のURIの前に表示される小さなアイコンです。
これらのhtmlファイルには、あなたのロゴ、ログイン、ジャンプメニュー、ナビゲーションバー、Moodleロゴ等が含まれています。これらのファイルを使用することで、すべてのMoodleページに対して、独自のトップおよびボトムを作成することができます。
header.htmlおよびfooter.htmlでは、$CFG->wwwroot の代わりに $CFG->httpswwwroot を使用すべきです。この理由は、loginhttpsが有効にされている場合、適切なログインページ (および他のhttpsで保護されたページ) の処理を実行するためです。
以下、これらのファイルで使用できる主な変数です:
$CFG (すべてのシステム変数のオブジェクト) $THEME (config.phpから取得した、現在のすべてのテーマ変数のオブジェクト) $COURSE (現在のコースのオブジェクト) $meta (stylesheetsを含んだ、すべてのメタタグ) $home (論理型) $title (ページタイトル) $heading (ページのヘッディング) $navigation (「ナビゲーションバー」ではなく、実ナビゲーション) $navmenulist (xhtml) $menu (ポップアップメニューまたはボタン)
ヘッダのみ:
$direction (ltr または rtl) $bodytags (bodyに追加する必要のあるタグ)
フッタのみ:
$homelink (現在のコースまたはサイトページから、「ホーム」へのリンクバック) $loggedinas (ユーザ名をリンクとした文字列) $performanceinfo (パフォーマンス情報の文字列)
最後に、ヘッダおよびフッタには、すべてのMoodle PHPコードを含むことができます。つまり、必要に応じてデータベースまたは環境変数から各種データを抽出することができます。
styles.php
このファイルは、1.4でも同じファイル名で使用されていますが、1.5では別の役割を持っています。このファイルは、header.htmlより呼ばれ、CSSファイルへのブリッジとなります。あなたは、このファイルを編集する必要はありません。
config.php
このファイルは、1.4でも同じファイル名で使用されていますが、1.5では別の役割を持っています。このファイルでは、CSSファイルがどのように共同して動作するか設定します。あなたは、スタンダードテーマまたは他の親テーマの上に独自のテーマを作成することができ、CSSファイルを含んだり、含まなかったりすることができます。
スタイルシート
柔軟性、アクセシビリティ、自由なページデザインのため、Moodle 1.5から明確にプレゼンテーション層からコンテンツを分離することになりました。比較的簡単に少しの色とフォントの変更でテーマを変えるチャンスをあなたに与えるため、CSSは以下の3つのファイルに分けられました:
styles_layout.css styles_fonts.css styles_color.css
In addition, styles_moz.css
contains Firefox and Mozilla specific formatting, especially the rounded corners.
付加的なファイル
Lastly, theme designers may provide information about the theme, plus a picture preview. The picture preview is shown on the themes page, the info in the README file after the theme has been selected.
README.html screenshot.jpg
プレゼンテーション層からコンテンツを分離する
The content layer of the page is represented via XHTML, the presentation layer via CSS. To connect the belonging information in both layers XHTML tags and named hooks within page are used. You need quite a lot of them to style complex web applications like Moodle.
カスケードCSS
Moodle themes use style sheets to describe the Moodle "look" by controlling the layout, fonts and colors. These are constructed by a PHP script called "styles.php" in each theme directory, and controlled by a file called "config.php" in the same place.
Moodle has a "standard" theme which is very plain and provides a basic layout for other themes to build on. Each theme may also have a "parent" theme, which will be included before the current theme.
So, depending on your settings, you may have up to three stylesheets for a theme:
- "standard" theme - theme/standard/styles.php
- "parent" theme - theme/parenttheme/styles.php
- "main" theme - theme/yourtheme/styles.php
Due to the cascading character of CSS the definitions in later files can overwrite the definitions in the earlier CSS files. Moodle makes extensive use of the cascading character of CSS and gives the theme designer many opportunities. They range from easy development of themes based on the existing ones with few changes up to the design of a completely individual Moodle appearance with new CSS files.
Theme designers can define and add any CSS stylesheets and name them any way as needed for this theme.
スタンダードテーマ
Figure 1: The theme "standard" with the CSS files "styles_layout.css", "styles_fonts.css", "styles_color.css" and "styles_moz.css".
Small changes
If you just want to make small changes to a theme like using different colors or adding a logo then your new theme will include the "standard" theme and you define a few extra CSS styles in a new CSS file.
As an example, see the "standardwhite" theme.
It uses the file "config.php" to set the appropriate options. The first entry $THEME->sheets = array('gradients');
defines the CSS file "gradients.css" as the file with additional CSS definitions. It also specifies $THEME->standardsheets = true;
which says to include all the styles from the standard theme too.
Instead of basing the theme on "standard", you could base it on another theme by specifying $THEME->parent = 'cooltheme';
Mixed CSS - standard layout plus your own fonts and colours
The theme "formal_white" mixes the page layout from the theme "standard" with its own layout, fonts and colours. This way all layout changes in the standard Moodle layout are kept. This is done by setting $THEME->sheets = array('fw_layout','fw_color','fw_fonts');
and $THEME->standardsheets = array('styles_layout');
in the config file.
Figure 3: The theme "formal_white" with the CSS file "styles_layout.css" from the theme "standard" and the individual files "fw_layout.css", "fw_fonts.css", "fw_color.css".
A theme using a parent theme (faked)
An advanced feature is to set any existing theme as the "parent" theme and offer variant themes to this. Two possible uses can be to design one "parent" theme with all CSS definitions. Then offer "child" themes with color variants to be chosen by the users according to their color preferences. These "child" themes need only one CSS file holding the different color definitions. Or create "child" themes which only vary in the logo/banner placed in the "header.html". These "child" themes do not need their own CSS files.
The configuration for the "child" themes could look like $THEME->sheets = array('my_layout');
, $THEME->parent = 'formal_white'
; and $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');
A theme without standard dependencies (faked)
This theme would use its own CSS. The settings $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color');
and $THEME->standardsheets = false;
deactivate all other Moodle CSS and make a completely independent theme. All changes in the standard Moodle theme do not change this theme at all.
Figure 5: The theme with it's own CSS files "styles_layout.css", "styles_fonts.css" and "styles_color.css".
Some more basic CSS files
In addition to theme CSS files, Moodle features a basic CSS file for every module, block and for every language. Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.
These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.
外部リンク
- Standard theme 1.7 CSS
- Moodle demo course page - this enables you see how the different CSS files form the look of the page. On the top right you see four links on a green bar. With the buttons you can switch stylesheets off (font-style italic) and on (font-style normal). When you switch all stylesheets off you see the content level of Moodle.
- Database of all available Moodle Themes (in preparation, please contribute)
- Moodle Theme Gallery
- CSS Inspector
- Firefox Web Developer Extension
- Firebug Extension