Modernisasi Tampilan OJS 3 JPMIPA: Kolaborasi Custom CSS Bersama Gemini AI

Tampilan bawaan (default) Open Journal Systems (OJS) 3 dikenal sangat fungsional untuk penerbitan ilmiah, namun visualnya sering kali terasa kaku dan generik. Sebagai pengelola Jurnal Pendidikan Matematika dan IPA (JPMIPA) Universitas Tanjungpura, saya ingin memberikan penyegaran visual yang lebih modern, rapi, dan mencerminkan identitas akademis matematika dan sains tanpa merusak struktur dasar OJS.

Proses perancangan antarmuka (interface) ini dilakukan melalui kolaborasi langsung bersama Gemini AI sebagai AI Copilot. Hasilnya, tampilan OJS 3 JPMIPA kini jauh lebih dinamis dan estetik.

Transformasi Visual Utama

Berikut adalah beberapa perubahan desain signifikan yang diterapkan pada OJS 3 JPMIPA menggunakan Custom CSS:

  • Latar Belakang Grid Kertas Grafik: Area luar situs diberi pola kertas milimeter/grafik (grid background) menggunakan linear-gradient CSS murni. Elemen ini memberikan sentuhan visual khas matematika dan IPA yang elegan tanpa mengganggu keterbacaan artikel.

  • Header Full-Width & Navigasi Bersih: Banner header dibuat memenuhi area (full box) tanpa celah putih mengganggu di pinggirnya. Dropdown menu dipoles dengan latar toska gelap dan teks putih kontras tinggi agar navigasi terasa responsif.

  • Menu Sidebar Interaktif: Tombol navigasi pada sidebar diubah menggunakan gradasi warna modern (biru-toska) lengkap dengan efek hover animation yang terangkat halus saat kursor mengarah padanya.

  • Daftar Indexer Berbentuk Kartu (Card Layout): Logo pengindeks seperti Google Scholar, DOAJ, dan Sinta disusun rapi menggunakan CSS Flexbox. Logo tampil dengan efek grayscale lembut yang akan berubah menjadi warna asli disertai glow toska saat disentuh kursor.

  • Presisi Tata Letak Sampul & Deskripsi: Gambar sampul jurnal dan kotak informasi ISSN diposisikan sejajar secara presisi (float & clearfix) sehingga tidak ada teks yang melipat secara canggung.

  • Footer Elegan & Watermark Badge: Bagian bawah situs diberi warna slate dark tegas, garis pemisah aksen toska, serta badge watermark khusus sebagai penanda desain bertema modern.


Tampilan JPMIPA Sesudah Custom CSS

Cara Memasang Custom CSS di OJS 3

Bagi Anda pengelola jurnal yang ingin mencoba merapikan tampilan OJS 3, langkah pemasangannya sangat praktis:

  1. Masuk ke Dashboard Admin OJS 3 sebagai Journal Manager.

  2. Buka menu Website Settings > Appearance.

  3. Pilih tab Advanced.

  4. Gulir ke bawah hingga menemukan seksi Custom Stylesheet.

  5. Unggah (upload) file CSS yang sudah disiapkan (baik versi biasa maupun versi minified agar loading situs lebih cepat).

  6. Klik Save dan bersihkan cache peramban (browser cache) Anda untuk melihat hasilnya.

Pengalaman Berkolaborasi dengan Gemini AI

Merancang kode CSS untuk OJS 3 sering kali memakan waktu karena struktur class selector bawaan PKP OJS lumayan kompleks. Dalam proyek ini, Gemini AI berperan penting untuk:

  • Menuliskan selector CSS OJS 3 yang presisi tanpa mengganggu modul dasar.

  • Memperbaiki bug tata letak (layout glitch) secara real-time berdasarkan deskripsi dan screenshot yang diberikan.

  • Membantu proses minification kode CSS agar performa loading jurnal tetap ringan dan cepat.

Dengan bantuan AI, proses redesign antarmuka jurnal ilmiah yang biasanya membutuhkan waktu berhari-hari dapat diselesaikan dengan presisi tinggi dalam hitungan jam.

Bagaimana menurut Anda tampilan baru JPMIPA ini? Apakah ada bagian layout OJS 3 di jurnal Anda yang juga ingin diubah? Tulis di kolom komentar ya!

Komentar

Posting Komentar

Postingan populer dari blog ini

Hello Gaess: Catatan Behind the Scene IT Support & Ops FKIP Untan Bersama AI

Gambar
Selamat datang di dwija.fkipuntan.id ! Blog ini lahir dari tumpukan tugas harian seorang operator layanan operasional di FKIP Universitas Tanjungpura. Kalau Anda membayangkan pekerjaan IT kampus hanya seputar "mematikan dan menyalakan ulang router", kenyataannya jauh lebih luas (dan tentu lebih seru) dari itu. Di balik layar, hari-hari saya diisi dengan: Memastikan presensi wajah dosen dan staf berjalan aman. Menjaga server dan jaringan fakultas tetap stabil. Menjadi troubleshooter penggunaan aplikasi dan perangkat IT di kampus. Terkadang menjadi operator Zoom atau Streaming saat seminar hybrid berlangsung. Mengolah data di Excel hingga membenahi skrip koding aplikasi fakultas tanpa eror. Menangani administrasi teknis. Kenapa Blog Ini Ada? Menangani tugas serba ada ( multitasking ) di lingkungan kampus tentu menuntut efisiensi tinggi. Di situlah AI masuk sebagai co-pilot harian saya. Blog ini bukan tempat untuk membagikan teori AI yang rumit atau artikel hasil copy-paste ...
Baca selengkapnya

Menghubungkan Subdomain fkipuntan.id ke Blogspot tanpa Mengganggu Server Utama (Studi Kasus: dwija.fkipuntan.id)

Gambar
Sebagai IT Support dan Admin Jaringan di FKIP Untan, salah satu pertanyaan teknis yang sering muncul di benak saya ketika ingin membangun blog pribadi adalah masalah konfigurasi DNS: "Bagaimana cara menghubungkan subdomain blog ( dwija.fkipuntan.id ) ke Blogspot, sementara domain utama ( fkipuntan.id ) sudah terikat ke IP publik server fisik fakultas?" Ketakutan utamanya sederhana: Jangan sampai setup blog pribadi ini justru merusak A Record domain utama kampus atau membuat website fakultas down . Setelah berdiskusi singkat dan melakukan verifikasi alur teknis bersama Gemini AI , solusinya ternyata sangat elegan dan 100% aman. Berikut panduan langkah demi langkahnya. Mengapa Konfigurasi Ini Aman? Kunci utamanya terletak pada jenis rekod DNS yang digunakan: Domain Utama ( fkipuntan.id ) : Menggunakan A Record yang mengarahkan Lalu Lintas langsung ke IP Publik Server FKIP Untan. Subdomain Blog ( dwija.fkipuntan.id ) : Menggunakan CNAME Record (Alias) yang diarahkan ke serve...
Baca selengkapnya