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

1. Merubah Block Navigasi

Tampilan awal dari OJS di bagian navigasi (tanda hitam) :

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

4

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 :

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:\xampp\htdocs\ojs-

tes\plugins\themes\machaFluit\img pada contoh file diberi nama

“home_universitas_tadukalo.jpg”.

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

7

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">”

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

Block footer menu dapat dikostumasi mulai dari baris 26, dalam tag “<div id="pageFooter">”.

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:\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.

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

Footer dapat dikostumasi pada kode baris ke 78, didalam tag “<div id="pageFooter-bottom">”.