Theme Moodle

Bagaimana caranya membuat theme moodle?

Membuat theme moodle bisa disebut gampang-gampang susah. Mengapa? Struktur moodle mempunyai id dan class yang terbilang relatif tetap atau tidak bisa diubah, sehingga pada implementasi css-nya kita tinggal menggunakan id dan class tersebut. Namun hal ini juga bisa menyulitkan karena banyaknya class-class tersebut menyebabkan kebingungan dalam mengidentifikasi id/class tersebut.

Di sini saya akan mulai dengan struktur file theme moodle terlebih dahulu. Theme moodle standar terdiri dari file-file yaitu:

• config.php
• docstyles.php
• footer.html
• header.html
• meta.php
• README.html
• styles.php
• styles_layout.css
• styles_color.css
• styles_fonts.css
• rtl.css
• styles_ie6.css
• styles_ie7.css
• styles_moz.css

File-file ini saya bagi menjadi tiga kelompok yaitu file konfigurasi (config.php, docstyles.php, styles.php); file utama (header.html, footer.html, meta.php, README.html); dan file desain css (styles_layout.css, styles_color.css, styles_fonts.css, rtl.css, styles_ie6.css, styles_ie7.css, styles_moz.css). Namun untuk membuat sebuah theme moodle kita tidak perlu membuat atau menyertakan semua file tersebut, yaitu file optional (docstyles.php, meta.php, README.html, rtl.css, styles_ie6.css, styles_ie7.css, styles_moz.css).

Langkah pertama kita buat folder di rootdirectory/theme/[nama_theme] (misal C://xampp/htdocs/moodle/theme/themeku). File pertama yang kita buat adalah config.php. File ini berisi konfigurasi dasar tentang theme moodle yang dibuat.

$THEME->sheets  =  array('style_ku');//file style_ku.css yang dijadikan style utama
$THEME->standardsheets = array('styles_layout','styles_fonts','styles_color');//file css dari theme standar yang akan disertakan dalam theme kita. Id/class yang tidak didefinisikan di user_styles.css akan menggunakan id/class standar
$THEME->parent = '';
$THEME->parentsheets = false;
$THEME->modsheets = true;
$THEME->blocksheets = true;
$THEME->langsheets = false;
$THEME->navmenuwidth = 50;
$THEME->makenavmenulist = false;
$THEME->resource_mp3player_colors =
 'bgColour=000000&btnColour=ffffff&btnBorderColour=cccccc&iconColour=000000&'.
 'iconOverColour=00cc00&trackColour=cccccc&handleColour=ffffff&loaderColour=ffffff&'.
 'font=Arial&fontColour=3333FF&buffer=10&waitForPlay=no&autoPlay=yes';
$THEME->filter_mediaplugin_colors =
 'bgColour=000000&btnColour=ffffff&btnBorderColour=cccccc&iconColour=000000&'.
 'iconOverColour=00cc00&trackColour=cccccc&handleColour=ffffff&loaderColour=ffffff&'.
 'waitForPlay=yes';
$THEME->custompix = true;//Penggunaan icon pada theme yang dibuat (simpan pada subfolder pix bila ada), bila false akan digunakan icon standar.

Kemudian kita bisa buat file footer.html dan header.html, untuk isinya bisa copy-paste yang ada di theme standar. Kebanyakan pembuat theme moodle tidak mengubah kedua file ini kecuali hanya menambahkan menu dan menempelkan logo di header.

Nah yang terakhir yaitu membuat file style_ku.css. Untuk isinya kita yang buat sendiri dengan id dan class yang sudah ada.

#page {
     background-color:#ffffff;
}
#header-home, #header, .headermain, .headermenu {
     background-color:#000099;
     color:#ffffff;
     padding:3px;
}
.navbar {
     background-color:#33FF66;
}
#content {
     background-color:#33CC33;
}
.sideblock .header {
     background-color:#FF0099;
}
.sideblock .content {
     background-color:#FF0066;
     border-color: #dddddd;
}
#footer {
     background-color:#660066;
     padding:3px;
}

Silakan belajar lebih mendalam mengenai css ini dengan mengunjungi di situs W3Schools dan CSS3 atau situs lain yang sejenis.

Untuk menandai theme ini adalah buatan sendiri, bisa tambahkan README.html. Silakan isi dengan data pribadi.

Theme-ku versi beta ini dibuat oleh:
 
<strong>Nama:</strong> Luqman Hakim
<strong>Messenger:</strong> alhakim_pik@yahoo.com
<strong>Blog:</strong> luqman.myhaley.com/blogku/

Tags: elearning, moodle, PHP

1. alikhs says:

   March 30, 2010 at 1:35 pm

   tulisan yang bagus,,
2. luq says:

   March 30, 2010 at 4:52 pm

   Terima kasih pak Dwi, masih belajar nulis nih, mohon bimbingannya.