Open Journal Systems (OJS) adalah platform manajemen jurnal yang populer digunakan oleh penerbit jurnal ilmiah. Dengan OJS3 (versi terbaru), pengguna dapat dengan mudah mengelola jurnal, artikel, pengiriman, serta proses editorial secara digital. Namun, meskipun OJS3 menyediakan berbagai templat dan antarmuka pengguna yang ramah, sering kali jurnal ingin menyesuaikan tampilan visualnya agar sesuai dengan kebutuhan dan branding mereka.

Salah satu cara untuk menyesuaikan tampilan adalah dengan mengedit CSS (Cascading Style Sheets). CSS memungkinkan pengelola jurnal untuk mengubah elemen-elemen tampilan di halaman jurnal seperti warna, font, ukuran teks, margin, dan tata letak. Pada OJS3, pengaturan CSS dapat dilakukan untuk menyesuaikan tema dan meningkatkan pengalaman pengguna di jurnal yang diterbitkan.

Pada artikel ini, kita akan membahas cara mengatur CSS pada OJS3 untuk menyesuaikan tampilan jurnal, mulai dari pengenalan dasar CSS hingga pengaturan lanjutan.

1. Pengenalan Dasar CSS

CSS adalah bahasa pemrograman yang digunakan untuk mendesain dan mengatur layout halaman web. CSS digunakan untuk mendefinisikan elemen-elemen visual di halaman web, seperti warna, ukuran font, margin, padding, dan banyak lagi.

Berikut adalah beberapa contoh aturan dasar CSS yang bisa digunakan untuk merancang tampilan web:

• Pengaturan warna: color: #000000; (untuk teks berwarna hitam).
• Pengaturan ukuran font: font-size: 16px; (untuk ukuran font 16px).
• Pengaturan margin dan padding: margin: 20px; padding: 10px; (untuk memberikan ruang di sekitar elemen).

Di OJS3, CSS digunakan untuk menyesuaikan antarmuka jurnal, termasuk elemen-elemen seperti header, footer, sidebar, artikel, dan halaman utama jurnal.

2. Mengakses dan Menambahkan CSS di OJS3

OJS3 menyediakan beberapa cara untuk menambahkan atau mengedit file CSS yang memengaruhi tampilan jurnal. Ada dua metode utama yang dapat Anda gunakan untuk mengonfigurasi CSS di OJS3:

Metode 1: Menggunakan Tema Kustom di OJS3

OJS3 memungkinkan Anda untuk membuat dan mengonfigurasi tema kustom, yang dapat mencakup pengaturan CSS. Tema kustom memberi kebebasan penuh untuk mengubah tampilan halaman jurnal tanpa mengubah templat atau sistem inti OJS.

1. Login ke OJS
   Sebagai pengelola jurnal (Journal Manager), login ke panel admin OJS3 dan navigasikan ke menu Settings.

2. Pilih ‘Website’ dan Pilih Tema
   Di bagian Website, pilih Themes. Di sini Anda dapat memilih tema yang ingin digunakan atau membuat tema kustom Anda sendiri. Tema default OJS3 akan muncul di sini.

3. Edit Tema Kustom
   Jika Anda ingin menyesuaikan tema, pilih opsi Custom Theme dan klik pada tombol untuk mengedit tema tersebut. Anda dapat meng-upload file CSS kustom atau mengeditnya secara langsung di dalam editor tema.

4. Upload dan Masukkan File CSS
   Untuk menambahkan file CSS, buka direktori tema kustom di server Anda dan tambahkan file .css baru ke dalam folder tema. Setelah file CSS di-upload, Anda dapat menambahkan kode CSS di dalam file tersebut untuk menyesuaikan elemen-elemen tampilan pada halaman jurnal.

5. Aktifkan Tema Kustom
   Setelah mengedit dan meng-upload file CSS, aktifkan tema kustom agar perubahan diterapkan pada tampilan jurnal.

Metode 2: Menambahkan CSS Melalui OJS Plugin

OJS3 memiliki plugin bawaan yang memungkinkan pengelola jurnal untuk menyematkan kode CSS kustom langsung ke dalam situs. Ini adalah cara yang lebih sederhana dan lebih cepat tanpa memerlukan pembuatan tema kustom.

1. Masuk ke Menu Plugin
   Masuk ke panel admin OJS3 dan pilih Settings > Plugin.

2. Pilih Plugin ‘Custom CSS’
   Di daftar plugin yang tersedia, cari plugin yang bernama Custom CSS. Plugin ini memungkinkan Anda untuk menambahkan aturan CSS tanpa mengubah tema.

3. Aktifkan dan Edit Plugin
   Klik tombol Enable untuk mengaktifkan plugin ini. Setelah itu, klik Settings untuk membuka halaman pengaturan plugin.

4. Tambahkan CSS
   Di dalam halaman pengaturan, Anda akan melihat kolom untuk memasukkan CSS kustom. Anda bisa langsung menulis kode CSS di sini untuk menyesuaikan tampilan jurnal. Setelah menambahkan CSS, klik Save untuk menyimpan perubahan.

5. Terapkan Perubahan
   Setelah menambahkan dan menyimpan CSS, perubahan tersebut akan langsung diterapkan pada tampilan jurnal tanpa perlu melakukan refresh manual.

3. Menyesuaikan Tampilan dengan CSS di OJS3

Setelah Anda berhasil mengonfigurasi file CSS, langkah selanjutnya adalah menyesuaikan tampilan jurnal sesuai kebutuhan Anda. Berikut adalah beberapa elemen yang umum disesuaikan menggunakan CSS di OJS3:

1. Menyesuaikan Header dan Navigasi

Header adalah elemen penting dalam tampilan jurnal karena biasanya menampilkan judul jurnal, logo, dan menu navigasi. Berikut adalah beberapa contoh kode CSS untuk menyesuaikan header:

/* Mengubah warna latar belakang header */
.header {
    background-color: #4CAF50;
}

/* Mengubah warna teks di header */
.header .site-title {
    color: white;
    font-size: 24px;
}

/* Menyesuaikan menu navigasi */
.navbar {
    background-color: #333;
}

.navbar a {
    color: white;
    font-size: 18px;
}

2. Menyesuaikan Tampilan Halaman Artikel

Halaman artikel adalah tempat pembaca mengakses konten utama jurnal. Anda dapat menyesuaikan font, margin, dan pengaturan tampilan artikel dengan CSS. Berikut contoh kode untuk menyesuaikan tampilan artikel:

/* Mengubah ukuran font dan warna teks artikel */
.article-content {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

/* Mengatur margin artikel */
.article {
    margin-top: 30px;
    margin-bottom: 30px;
}

3. Mengubah Tampilan Sidebar dan Footer

Sidebar dan footer adalah elemen penting lainnya dalam tampilan jurnal. Anda dapat menyesuaikan elemen ini untuk memberikan tampilan yang lebih baik dan terstruktur.

/* Mengubah tampilan sidebar */
.sidebar {
    width: 25%;
    background-color: #f4f4f4;
    padding: 15px;
}

/* Mengubah tampilan footer */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

4. Menyesuaikan Tampilan Tabel dan Daftar Artikel

Jika jurnal Anda menampilkan artikel atau daftar dalam bentuk tabel, Anda bisa menyesuaikan tampilan tabel agar lebih estetis.

/* Menyesuaikan tampilan tabel artikel */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

4. Tips dan Best Practices dalam Menambahkan CSS

• Jaga Konsistensi Desain: Pastikan bahwa perubahan yang Anda buat pada CSS tidak mengubah desain secara drastis. Gunakan warna dan gaya yang konsisten dengan branding jurnal Anda.
• Responsif: Pastikan bahwa tema yang Anda buat responsif, artinya dapat menyesuaikan dengan baik pada perangkat mobile dan desktop.
• Uji Tampilan di Berbagai Browser: Pastikan bahwa CSS yang Anda terapkan bekerja dengan baik di berbagai browser seperti Chrome, Firefox, Safari, dan Internet Explorer.
• Gunakan Developer Tools untuk Debugging: Jika Anda mengalami masalah dalam penyesuaian tampilan, gunakan Developer Tools di browser untuk menginspeksi elemen dan melihat gaya CSS yang diterapkan.

5. Kesimpulan

Mengonfigurasi CSS pada OJS3 memberikan fleksibilitas besar untuk menyesuaikan tampilan jurnal sesuai dengan kebutuhan dan preferensi visual. Dengan menggunakan tema kustom atau plugin Custom CSS, Anda dapat dengan mudah menambahkan kode CSS untuk menyesuaikan elemen-elemen tampilan seperti header, artikel, sidebar, dan footer.

Penting untuk memastikan bahwa desain yang Anda buat tidak hanya estetis, tetapi juga responsif dan mudah diakses oleh pengguna di berbagai perangkat. Dengan melakukan pengaturan CSS yang tepat, Anda dapat meningkatkan pengalaman pengguna dan memberikan kesan profesional pada jurnal ilmiah yang Anda kelola.