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

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

?

Theme 基礎(chǔ)（一）

?
Moodle 中 Theme 表示主題風(fēng)格，就是利用 Theme ，管理員可以定義站點的主題風(fēng)格，課程創(chuàng)建者可以定義課程的主題風(fēng)格，學(xué)習(xí)者可以定義自己所看到課程的主題風(fēng)格。

1 、 Moodle 中的主題風(fēng)格目錄中有哪些文件？

?

pix 文件夾

?

• 包括在 moodle 主題中要用到的所有圖片和圖標(biāo)。

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

• docstyle.php （可選）

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

?

• favicon.ico 這個圖標(biāo)是會出現(xiàn)瀏覽器的地址之前的小圖片。

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

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

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

?

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

Theme 基礎(chǔ)（二）

?

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

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

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

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

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

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

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

基于 standmoodle-2.JPGard theme( 標(biāo)準(zhǔn)主題風(fēng)格 ) 的修改??



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

圖二

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

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

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

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

      $THEME->standardsheets = true; 
    

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

?

圖三

?

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

圖四

?

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

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

圖五

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

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

?

?

Theme 基礎(chǔ)（三）

?

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

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

圖一

?

?

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

?

Theme 基礎(chǔ)（四）

?

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

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

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


圖一

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

?