Pada tulisan sebelumnya, kita telah membahas bagaimana membuat presentasi berbasis HTML5 dengan memanfaatkan reveal.js. Tetapi presentasi yang dihasilkan oleh reveal.js selalu terlihat standar dan tidak unik. Keunikan dari sebuah presentasi tentunya penting agar pendengar dapat dengan mudah mengingat diskusi yang dilakukan. Salah satu cara untuk membuat presentasi kita menjadi unik ialah dengan membuat tema presentasi, dengan mengubah latar belakang, warna, jenis teks, dan berbagai elemen lain dari sebuah presentasi. Paket presentasi tradisional seperti PowerPoint memberikan fasilitas untuk pembuatan tema, dan tentunya reveal.js juga memiliki kemampuan serupa. Bagaimana membuat tema pada reveval.js? Kita akan membahasnya pada tulisan ini.

Persiapan

Sebelum mulai membuat tema untuk reveal.js, terlebih dahulu kita harus memiliki beberapa perangkat lunak terlebih dahulu:

  1. Reveal.js - Karena kita membuat tema untuk reveal.js, tentunya kita harus memiliki reveal.js terlebih dahulu (duh :p). Silahkan baca artikel sebelumnya untuk referensi instalasi dan pengunaan reveal.js.
  2. SASS - Pembuatan tema reveal.js dilakukan memanfaatkan preprosesor CSS yang bernama SASS. Panduan instalasi dan pengunaan SASS dapat dibaca pada post berikut.

Setelah selesai melengkapi persiapan, kita dapat langsung bekerja untuk membuat tema reveal.js.

Tema Standar pada Reveal.js

Reveal.js memiliki beberapa tema standar yang telah diikutkan di dalam paket reveal.js ketika kita mengambil kode awal. Seluruh tema yang ada dapat dilihat pada direktori css/theme, seperti yang nampak pada gambar di bawah.

Theme Standar reveal.js

Untuk menggunakan theme standar, kita dapat mengganti kode referensi (href) CSS yang memiliki atribut id="theme":

<link rel="stylesheet" href="css/theme/default.css" id="theme">

Catatan: Jika tidak dapat menemukan kode yang bersangkutan, lakukan pencarian terhadap kode di atas pada editor anda, karena kode tersebut merupakan kode standar dari reveal.js.

agar merujuk ke referensi tema yang kita ingin gunakan. Misalkan, jika ingin menggunakan tema “night”, kita dapat mengganti kode di atas menjadi:

<link rel="stylesheet" href="css/theme/night.css" id="theme">

dan presentasi yang dibuat akan memiliki tampilan yang berbeda. Gambar di bawah memperlihatkan contoh beberapa theme standar yang disediakan oleh reveal.js.

Beberapa theme standar reveal.js

Bagaimana jika ingin membuat theme standar? Kita akan melihat caranya pada bagian berikutnya.

File Pendukung Pembuatan Tema

Untuk membuat tema, terlebih dahulu kita harus berbagai file standar yang digunakan oleh reveal.js untuk membuat tema. Terdapat tiga file utama yang digunakan oleh reveal.js, yang ketiganya terdapat di dalam direktori css/theme/template. Buka direktori tersebut, dan lihat tiga berkas yang di dalamnya:

  1. mixins.scss - berisi fungsi-fungsi yang dapat digunakan untuk membuat warna latar, misalnya: gradien horizontal, vertikal, dan radial.
  2. settings.scss - berisi variabel yang digunakan oleh tema. Variabel yang ada dalam file ini merupakan variabel yang harus ditimpakan ketika pembuatan tema.
  3. theme.scss - berisi seluruh selector yang dapat ditimpakan untuk pembuatan tema.

Dalam pembuatan tema, kita perlu menambahkan ketiga file di atas dan menambahkan kustomasi yang diinginkan. Berikut adalah kode dasar untuk pembuatan tema:

@import "../template/mixins";
@import "../template/settings";

// kustomasi ditambahkan di sini

@import "../template/theme";

Buat kode di atas dan simpan ke dalam sebuah file bernama tema.scss di dalam direktori source, dan kemudian jalankan perintah berikut (diasumsikan anda sedang berada pada direktori css/tema dalam CLI):

sass --watch source:.

Setelah menjalankan perintah tersebut, setiap kali perubahan dilakukan pada tema.scss akan secara otomatis dikompilasi menjadi tema.css, dan kita dapat langsung menggunakan tema.css dalam referensi yang digunakan, seperti berikut:

<link rel="stylesheet" href="css/theme/tema.css" id="theme">

Jika telah selesai, coba jalankan kembali dan lihat hasilnya.

Hasil Eksekusi Awal tema.css

Perubahan Variabel Dasar

Salah satu cara untuk membangun tema ialah dengan menggantikan nilai-nilai dasar yang diberikan oleh reveal.js menjadi nilai yang sesuai dengan tema kita. Misalnya, kita dapat mengubah warna teks menjadi merah (hanya untuk ilustrasi, ini bukan ide bagus). Edit tema.scss menjadi seperti berikut:

@import "../template/mixins";
@import "../template/settings";

// kustomasi ditambahkan di sini
$mainColor: #F00;

@import "../template/theme";

Kemudian simpan dan refresh browser. Anda akan dapat melihat teks “Created by” telah berwarna merah, dan jika bergerak ke paragraf selanjutnya maka teks standar dapat juga menjadi berwarna merah.

Warna Teks Menjadi Merah

Dari mana kita mengetahui variabel $mainColor? Buka file settings.scss untuk melihat seluruh variabel dasar yang dapat diubah. Misalnya, kita juga dapat mengubah warna elemen header dengan mengubah nilai variabel $headingColor seperti berikut:

@import "../template/mixins";
@import "../template/settings";

// kustomasi ditambahkan di sini
$mainColor: #F00;
$headingColor: #0F0;

@import "../template/theme";

Dan hasilnya ialah sebagai berikut:

Perubahan warna pada heading dan main

Setiap nilai variabel yang ada pada settings.scss dapat diubah dengan mudah, dan nama dari setiap variabel sudah cukup menjelaskan kegunaan masing-masing variabel. Anda dapat langsung mencoba mengubah setiap variabel dan melihat perubahannya dengan mudah. Silahkan lakukan eksperimen dan coba ubah nilai-nilai standar yang diberikan untuk mendapatkan efek maksimal perubahan tema.

Perubahan Desain Elemen-Elemen Lain

Perubahan desain dapat dilakukan dengan menimpakan sebagin atau seluruh selector yang terdapat pada theme.scss. Hal yang perlu diperhatikan ialah bahwa seluruh elemen yang dapat diubah memiliki satu syarat utama: harus berada di bawah elemen .reveal. Jadi, misalnya jika kita ingin mengubah warna progress bar (yang tidak dapat diubah dengan variabel), kita dapat melakukan perubahan dengan memilih selector berikut:

@import "../template/mixins";
@import "../template/settings";

// kustomasi ditambahkan di sini
$mainColor: #F00;
$headingColor: #0F0;

@import "../template/theme";

.reveal .progress span {
    background: #00F;
}

Perhatikan bahwa perubahan variabel dilakukan sebelum melakukan impor terhadap theme.scss, sementara perubahan nilai selector dilakukan setelah impor theme.scss. Hal ini dikarenakan perubahan variabel melakukan penimpaan terhadap data yang ada di dalam settings.scss, yang kemudian digunakan oleh theme.scss. Setelah variabel diaplikasikan, kita kemudian dapat menimpakan kembali selector yang diimplementasikan pada theme.scss, sesuai dengan aturan penimpaan pada CSS (yang terakhir muncul yang digunakan).

Silahkan coba jalankan kode di atas, dan lihat perubahannya pada progress bar di sebelah bawah.

Progress Bar Biru

Variabel dan Selector yang Diubah

Oke, jadi bagaimana kita mengetahui fungsi dari setiap variabel dan selector yang digunakan pada theme.scss maupun settings.scss? Tidak terdapat dokumentasi untuk hal ini, namun kita dapat mencoba mengintepretasikan nilai variabel-variabel yang ada dari nama variabel yang sangat deskriptif.

Untuk melakukan perubahan pada selector, kita dapat mencoba menggunakan developer tools seperti Firebug atau Chrome Developer Tools untuk mendeteksi selector. Perhatikan gambar berikut:

Debugger untuk deteksi selector

Dari gambar, kita dapat melihat selector yang digunakan untuk komponen navigasi, di sebelah kanan bawah (.reveal .controls). Melalui informasi ini kita kemudian dapat melakukan penimpaan selector pada tema.scss.

Penutup

Akhir kata, selamat bekerja membuat tema untuk reveal.js! Jika memiliki pertanyaan seputar hal ini, atau kritik dan saran artikel silahkan tinggalkan komentar. Terima kasih :D

comments powered by Disqus

Daftar Isi