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/
Loading tweets...
12 comments
alikhs says:
March 30, 2010 at 1:35 pm (UTC 7 )
tulisan yang bagus,,
luq says:
March 30, 2010 at 4:52 pm (UTC 7 )
Terima kasih pak Dwi, masih belajar nulis nih, mohon bimbingannya.
Asep Sufyan Tsauri says:
November 10, 2010 at 9:18 am (UTC 7 )
Weiss, lebih sedap nih kalau dibuat tutorial berupa slideshow trus upload di slideshare
luq says:
November 10, 2010 at 10:59 am (UTC 7 )
Iya nih, coba buat ahh
rizky says:
April 6, 2011 at 12:14 am (UTC 7 )
terima kasih untuk informasinya..
saya mau tanya pak, jika saya ingin merubah design header dari themes yang sudah ada, kira2 file apa saja yang harus saya edit pak?
terima kasih sebelumnya
luq says:
April 24, 2011 at 11:12 pm (UTC 7 )
Cukup file header.html dan style.css -nya saja
maii mey says:
June 29, 2011 at 7:48 pm (UTC 7 )
mantaphh .. thanks infonya ,,
luq says:
July 10, 2011 at 3:11 pm (UTC 7 )
Sama-sama
putra says:
July 21, 2011 at 1:55 pm (UTC 7 )
waah blognya bagus mas
mas mau tanya, kalau theme moodle kita pakai flash seperti web ini http://www.gautamsaha.com/ bagaimana??mohon pencerahannya
terimakasih banyak
luq says:
July 24, 2011 at 6:42 pm (UTC 7 )
Klo saya lihat itu bukan di theme, tapi di-embed memakai tag html
objectdi section topic. Untuk mengaktifkan section topic ini ada di front page setting.Andri says:
November 7, 2011 at 9:52 am (UTC 7 )
Gimana klo moodlenya udah di upload ke Internet ? Cara edit themenya gimana mas ? thanks.
Luqman says:
November 7, 2011 at 4:51 pm (UTC 7 )
Gak gimana2 mas, tinggal akses ke server, cari file themenya, bisa pake filezilla atau klo lewat cpanel juga ada editornya.