Slide ini diperuntukkan bagi para pegiat OJS yang membutuhkan info lebih mengenai bagaimana cara merubah/kustom tampilan depan OJS agar lebih menarik. Ini merupakan tahapan awal, diharapkan bagi yang akan mengikuti slide ini memiliki basic pemrograman terlebih dahulu. Semoga bermanfaat.

1. Author : Dwi Fajar Saputra (dfsptra@gmail.com)
Pada bagian ini akan dijelaskan bagaimana melakukan kustomisasi tampilan depan/theme di OJS.
Kustomisasi mencakup header, footer, navbar, dll sehingga menghasilkan theme yang lebih
menarik. Seperti kita ketahui bersama bahwa salah satu kekurangan dari bawaan OJS adalah
tampilan depan yang kurang menarik, seperti gambar dibawah ini :.
Digambar diatas terlihat kaku dan sederhana, lalu bagaimana cara membuat agar lebih menarik?
Berikut tutorialnya :
Hasil yang akan didapat adalah seperti ini (Disclaimer : semua yang ada discreen shot hanya
untuk keperluan belajar dan berbagi) : Theme ini diberi nama Macha Fluit (atas: header, main.
Bawah: footer).

2. 2
1. Merubah Block Navigasi
Tampilan awal dari OJS di bagian navigasi (tanda hitam) :

3. 3
Berubah menjadi
Pada perubahan diubah jenis font dan tata letak dari masing2 block yang ada di bagian navigasi.
Untuk mengubahnya, buat suatu file yang diberi nama block dengan ekstensi .tpl (baca : dot tpl)
tpl adalah ekstensi dari bahasa pemrograman php yang digunakan pada OJS. File diletakkan pada
path : C:xampphtdocsojs-tespluginsblocksnavigation berikut tampilan file yang telah diubah:

4. 4
2. Menambah Navbar Atas
Untuk menambah bagian navbar atas seperti gambar dibawah ini (warna kuning):
Tambahkan code di: C:xampphtdocsojstespluginsthemesmachaFluittemplatescommon
Bagian navbar.tpl (baca : navbar dot tpl) yang diberi tanda highlight :

5. 5
3. Merubah Logo Banner Gambar
Untuk merubah logo banner (warna kuning), pertama kali harus memiliki file gambar dengan
format .JPG (baca : dot JPG) dan dapat diubah pada path: C:xampphtdocsojs-
tespluginsthemesmachaFluitimg pada contoh file diberi nama
“home_universitas_tadukalo.jpg”.

6. 6
Jika ingin mengubah logo banner pada code, dapat dilakukan dengan mengubah code pada file
navbar.tpl (baca: dot tpl) yang tersedia pada baris 25, path yang dapat dicari yaitu:
C:xampphtdocsojs-tespluginsthemesmachaFluittemplatescommon

7. 7
4. Merubah Main Menu
Untuk merubah main menu pada OJS (warna kuning), dapat dilakukan dengan cara :
- Buka file navbar.tpl pada path:
C:xampphtdocsojstespluginsthemesmachaFluittemplatescommon
- Pergi menuju baris ke 44, tampilan main menu berada dalam tag “<ul class="nav navbar-nav
navbar-right">”

8. 8
5. Merubah Block Footer Menu
Untuk merubah block footer menu, dapat dikostumasi/ubah melalu file footer.tpl (baca : footer dot
tpl) yang ada di C:xampphtdocsojs-tespluginsthemesmachaFluittemplatescommon
Block footer menu dapat dikostumasi mulai dari baris 26, dalam tag “<div id="pageFooter">”.

9. 9
Block footer menu dapat dikostumasi masing - masing per block yang dipisahkan dengan tag <div
class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> pada setiap block.
Pada contoh terdapat 3 menu utama yaitu policies, submissions, dan other. Berikut letak ubahnya:
6. Merubah Share Button
Untuk ubah share button, dapat dikostumasi melalu file footer.tpl (baca: footer dot tpl) yang
terdapat pada path C:xampphtdocsojs-tespluginsthemesmachaFluittemplatescommon
Share button dapat dikostumasi pada kode baris ke 61, dengan tag div yang mempunyai class
“share-button”. Untuk menjalankan dengan baik, plugin ini pastikan kalau anda terhubung
internet.

10. 10
7. Merubah Navbar Bawah
Untuk mengkostumasi navbar bawah (bagian bawah dari theme), dapat diubah atau kostumasi
melalu file footer.tpl (baca : footer dot tpl) yang terdapat pada direktori/path:
C:xampphtdocsojs-tespluginsthemesmachaFluittemplatescommon
Footer dapat dikostumasi pada kode baris ke 78, didalam tag “<div id="pageFooter-bottom">”.