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).

Author : Dwi Fajar Saputra (dfsptra@gmail.com)

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

2
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:\xampp\htdocs\ojs-tes\plugins\blocks\navigation berikut tampilan file yang telah diubah:

3
2. Menambah Navbar Atas
Untuk menambah bagian navbar atas seperti gambar dibawah ini (warna kuning):

Tambahkan code di: C:\xampp\htdocs\ojstes\plugins\themes\machaFluit\templates\common

Bagian navbar.tpl (baca : navbar dot tpl) yang diberi tanda highlight :

4
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:\xampp\htdocs\ojs-
tes\plugins\themes\machaFluit\img pada contoh file diberi nama
home_universitas_tadukalo.jpg.

5
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:\xampp\htdocs\ojs-tes\plugins\themes\machaFluit\templates\common

6
4. Merubah Main Menu

Untuk merubah main menu pada OJS (warna kuning), dapat dilakukan dengan cara :
- Buka file navbar.tpl pada path:
C:\xampp\htdocs\ojstes\plugins\themes\machaFluit\templates\common
- Pergi menuju baris ke 44, tampilan main menu berada dalam tag <ul class="nav navbar-nav
navbar-right">

7
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:\xampp\htdocs\ojs-tes\plugins\themes\machaFluit\templates\common
Block footer menu dapat dikostumasi mulai dari baris 26, dalam tag <div id="pageFooter">.

8
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:\xampp\htdocs\ojs-tes\plugins\themes\machaFluit\templates\common
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.

9
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:\xampp\htdocs\ojs-tes\plugins\themes\machaFluit\templates\common
Footer dapat dikostumasi pada kode baris ke 78, didalam tag <div id="pageFooter-bottom">.

10