一 什么是 Theme ？
Moodle 中 Theme 表示主題風格（頁面皮膚），就是利用 Theme ，管理員可以定義站點的主題風格，課程創建者可以定義課程的主題風格，學習者可以定義自己喜歡的主題風格。

特點
每個頁面都是可以通過 CSS 進行控制，允許你做非常微小的改動；
CSS 中使用了簡單、易懂的英文類命名；
新的模塊會自動判斷 Moodle 需要什么樣的風格，并且會將其包括在主題風格中；
主題皮膚是基于 Moodle 中標準的 theme 來開發，標準的 theme 非常簡單但是非常實用。你可以通過在自己開發的主題風格中添加 stylesheet 來覆蓋標準的 theme 中樣式。這就意味著如果升級 Moodle 后，你的自定義風格仍然可以使用，而不需要做任何改變，因為最新的一些 classes 將在定義在標準的 theme 中；
Themes 也可以基于其他的一些主題風格進行修改。

?

Theme 基礎（一）

?
Moodle 中 Theme 表示主題風格，就是利用 Theme ，管理員可以定義站點的主題風格，課程創建者可以定義課程的主題風格，學習者可以定義自己所看到課程的主題風格。

1 、 Moodle 中的主題風格目錄中有哪些文件？

?

pix 文件夾

?

• 包括在 moodle 主題中要用到的所有圖片和圖標。

• config.php 這個文件用于控制 CSS 如何運行，你可以將自己的 Theme 整合到標準的 Theme 中，也可以從其他的父 theme 中繼承那些 CSS 文件。

• docstyle.php （可選）

這個文件主要用于設置強制使用一些樣式。

?

• favicon.ico 這個圖標是會出現瀏覽器的地址之前的小圖片。

• header.html 和 footer.html 這是用于控制 moodle 頂部和底部的頁面文件，其中包括頂部的 logo 、登錄、跳轉菜單和底部的 moodle logo 等。通過修改這兩個頁面，可以自己定義 logo 圖片的鏈接地址和文字。
  以下是在這兩個文件中用到的主要變量：
  $CFG ( 所有系統變量對象 )$THEME ( 所有從 config.php 中獲得的當前 theme 對象 )$course ( 當前課程對象 )$meta ( 所有元標簽，包括 stylesheets)$home (boolean)$title ( 頁面標題 )$heading (heading for the page)$navigation ( 導航 )$navmenulist (xhtml)$menu ( 彈出菜單或按鈕 )
  styles.php 該文件主要被 header.html 調用，一般不要修改。

• styles_layout.css
  styles_fonts.css
  styles_color.css
  styles_moz.css

其中 styles_layout.css 用于設置頁面布局， styles_fonts.css 用于設置字體大小， styles_color.css 用于設置顏色， styles_moz.css 主要用于設置在 Firefox 或者 Mozilla 中瀏覽的格式。

?

• 其他文件
  其他文件包括圖片文件，比如主題截圖，幫助頁面等。

Theme 基礎（二）

?

• Moodle 主題使用 CSS 來控制 Moodle 的布局、字體和顏色。這些都是建構在每個 theme 目錄中的 styles.php 文件基礎之上，并且由 theme 中的 config.php 控制。

• Moodle 的 theme 文件夾中有一個名為 "standard" 主題風格，它是一個最為簡單的主題風格，僅為其他的幾個自帶的主題提供基本的布局，而其他的幾個主題都是從這個 “ standard” 中繼承過來。

• 主要取決于你的目的，是想從 standard 中繼承，還是從 parent 主題中直接修改。因此你可能會遇到下面的幾個風格：

1. "standard" theme - theme/standard/styles.php

2. "parent" theme - theme/parenttheme/styles.php

3. "main" theme - theme/yourtheme/styles.php

由于 CSS 有這樣一個特性：后面定義的頁面風格會覆蓋掉以前頁面風格，這樣使得 Moodle 主題開發變得更加容易。

基于 standmoodle-2.JPGard theme( 標準主題風格 ) 的修改??



standard theme 中包括了四個 CSS 主題文件， styles_fonts.css ,styles_color.css,styles_layout.css,styles_moz.css 。另外有還有其他文件，如圖：

圖二

?
1 、 微調一 ( 使用 "gradients.css" +"standardwhite" 的四個 CSS 文件 )
如果只是想對一個主題風格進行很小的改動，例如使用不同的顏色或者添加一個 logo ，在新建立的主題風格 "standardwhite" 中將包含 "standard" 主題，然后在一個主題文件夾中定義一個新的 CSS 文件。
看看這個例子，名字為 "standardwhite" 的主題風格是如何建立的。

"standardwhite" 使用 "config.php" 來設置合適的選項。其中第一個條目

      $THEME->sheets = array('gradients'); 
    

?
定義了一個名為 "gradients" 的名稱，這個 "gradients.css" 文件是額外定義的 CSS 文件。同時指定了

      $THEME->standardsheets = true; 
    

?
這表明包含了 standard 主題風格中的所有風格，而不是基于 "standard" 主題風格。
下面是已經完成的 "standardwhite" 風格的文件夾。

?

圖三

?

相比之下這個主題風格文件夾中就少了很多文件，包括少了幾個 css 文件。

圖四

?

從圖四可以看出， "standardwhite" 不僅使用 “ standard” 中的所有 CSS 風格，而且使用自己定義的 "gradients.css" 文件。

2 、微調二（使用 “ standard” 的 layout+ 自定義的 fw_layout.css 、 fw_fonts.css 、 fw_color.css ） 前面一個例子中講到的從 “ standard” 中繼承了四個 CSS 風格，同時引入了新的 “ gradients.css” 風格。這個例子中我們要新建一個主題風格 “ formal_white” ，該主題風格要求不僅從 “ standard” 繼承它的 layout 風格，同時自己定義了 fw_layout 、 fw_fonts 、 fw_color 三個 CSS 文件。如圖五所示：

圖五

?
這樣就可以通過修改主題風格中 config.php 文件來指定對應的條目

      $THEME->sheets = array('fw_layout','fw_color','fw_fonts');
$THEME->standardsheets = array('styles_layout');
    

?

?

Theme 基礎（三）

?

使用 parent theme （父主題風格）修改 修改 theme 的時候，有一個特性就是可以將任何一個已經存在的主題風格作為 “ parent”theme ，依據這個 “ parent”theme 做出不同的主題。在 “ parent” theme 中可能會將所有的 CSS 定義在這個主題風格中。然后用戶在 “ child” themes 中只是通過顏色參數引用顏色變量。這些 “ child” theme 僅需要一個 CSS 文件控制顏色的不同定義即可，或者這些 “ child” theme 中只是在 header.html 中控制 logo ，在 “ child” theme 中不需要自己建立 CSS 文件。
"child" theme 的基本設置為

      $THEME->sheets = array('my_layout'); //建立一個my_layout.css文件
$THEME->parent = 'formal_white'; //父主題名稱
$THEME->parentsheets=array('fw_layout','fw_color','fw_fonts'); //從父主題繼承的三個CSS 
    

圖一

?

?

從圖中可以看出，該主題風格（ child theme ）不僅使用了 "standard" 的 layout ，而且使用了 "formal_white"(parent) 的 fonts 和 color ，結合在一起才形成了 "child"(formal_white_plus) 。

?

Theme 基礎（四）

?

不使用 “ standard” 的主題風格 這個主題風格將不使用 "standard" 主題風中的樣式，而是使用自己定義的 CSS 。主要通過以下設置：

      $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); 
$THEME->standardsheets = false; 
    

?
該主題風格不依賴于 moodle 中任何的其他 theme 的 CSS 樣式，而是完全獨立，這就意味著即使在 “ standard” 中修改了樣式，該主題風格照樣不會受到影響。如圖一所示：


圖一

?
從圖中可以看出，該獨立主題風格使用的樣式 fonts 、 color 、 layout 都是獨立的。

?