/* ============================================================ OJS 3 - SAFE CUSTOM STYLE ============================================================ Custom CSS by: Papung_Crafty Tujuan: - Menjaga layout asli OJS - Memperbaiki spacing - Membuat sidebar/custom block lebih rapi - Tidak mengubah ukuran logo/header/navigation OJS - Tidak mengubah struktur utama halaman OJS ============================================================ */ /* ============================================================ 1. BASIC ============================================================ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { line-height: 1.5; } /* ============================================================ 2. IMAGE SAFETY Tidak menentukan ukuran logo/home image. Hanya mencegah gambar keluar dari container. ============================================================ */ img { max-width: 100%; height: auto; } /* ============================================================ 3. SIDEBAR BLOCK SPACING - ALL OJS BLOCKS ============================================================ */ /* Semua blok sidebar OJS */ .pkp_structure_sidebar .pkp_block { margin-top: 0 !important; margin-bottom: 8px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Blok setelah blok sebelumnya */ .pkp_structure_sidebar .pkp_block + .pkp_block { margin-top: 0 !important; } /* ------------------------------------------------------------ Normalize content inside every sidebar block ------------------------------------------------------------ */ .pkp_structure_sidebar .pkp_block .content { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Blok terakhir */ .pkp_structure_sidebar .pkp_block:last-child { margin-bottom: 0 !important; } /* ============================================================ 3A. JOURNAL LOGO AS HEADER - NO CROP ------------------------------------------------------------ Menggunakan logo jurnal OJS sebagai header/banner. Tidak mengubah struktur utama halaman OJS. Tidak mengatur width sidebar, main content, atau navigation. ============================================================ */ .pkp_head_wrapper { padding-top: 0 !important; } .pkp_site_name, .pkp_site_name_wrapper { margin: 0 !important; padding: 0 !important; } .pkp_site_name a { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pkp_site_name .is_img { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pkp_site_name .is_img img { display: block; width: 100% !important; max-width: 100% !important; /* Pertahankan seluruh gambar dan rasio asli logo */ aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; object-position: center center; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Pastikan area logo tidak memiliki jarak bawaan */ .has_site_logo .pkp_site_name, .has_site_logo .pkp_site_name_wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================ 3B. HEADER MOBILE ============================================================ */ @media (max-width: 768px) { .pkp_site_name .is_img img { width: 100% !important; max-width: 100% !important; aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; object-position: center center; min-height: 0 !important; } } /* ============================================================ 3C. OVERRIDE DEFAULT THEME HEADER SIZE ------------------------------------------------------------ Default Theme OJS memiliki pembatas logo: - .pkp_site_name_wrapper { height: ... } - .pkp_site_name { position/overflow bawaan } - .is_img img { max-height: 80px; width: auto; } Override berikut membuat logo mengikuti lebar area kerja header, mempertahankan rasio asli, dan tidak melakukan crop. ============================================================ */ .pkp_structure_head { overflow: visible !important; } .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper { width: 100% !important; max-width: none !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } .pkp_site_name_wrapper { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .pkp_site_name, .has_site_logo .pkp_site_name { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; text-align: left !important; font-size: 0 !important; line-height: 0 !important; } .pkp_site_name > a, .pkp_site_name .is_img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; } /* Navigation tetap berada di bawah logo, bukan menimpa logo. */ .pkp_site_nav_menu { position: relative !important; top: auto !important; left: auto !important; } /* Desktop: cegah aturan Default Theme max-height:80px kembali berlaku. */ @media (min-width: 769px) { .pkp_site_name .is_img img { width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; } } /* Mobile: tetap mengikuti lebar layar tanpa crop. */ @media (max-width: 768px) { .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { width: 100% !important; height: auto !important; min-height: 0 !important; } .pkp_site_name .is_img img { width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; } } /* ============================================================ 4. CONTENT DALAM SIDEBAR ============================================================ */ .pkp_structure_sidebar .pkp_block .content { line-height: 1.5; } /* ============================================================ 5. PARAGRAPH SPACING ============================================================ */ .pkp_structure_sidebar .pkp_block .content p { margin-top: 0; margin-bottom: 8px; } /* ============================================================ 6. LIST SPACING ============================================================ */ .pkp_structure_sidebar .pkp_block .content ul { margin-top: 0; margin-bottom: 8px; } .pkp_structure_sidebar .pkp_block .content li { margin-bottom: 3px; } /* ============================================================ 7. IMAGE DALAM SIDEBAR ============================================================ */ .pkp_structure_sidebar .pkp_block .content img { display: block; max-width: 100%; height: auto; margin-top: 4px; margin-bottom: 8px; } /* ============================================================ 8. LINK GAMBAR ============================================================ */ .pkp_structure_sidebar .pkp_block .content a img { margin-top: 4px; margin-bottom: 8px; } /* ============================================================ 9. ADDITIONAL MENU Untuk HTML Custom Block yang menggunakan: .custom-sidebar-menu .sidebar-menu-header .sidebar-menu-list .sidebar-menu-icon .sidebar-menu-text ============================================================ */ .custom-sidebar-menu { width: 100%; margin: 0; padding: 0; } /* ------------------------------------------------------------ HEADER MENU ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-header { width: 100%; margin: 0; padding: 11px 10px; background: #123f56; color: #ffffff; border-bottom: 2px solid #d6c85a; border-radius: 6px 6px 0 0; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.4; } /* ------------------------------------------------------------ MENU LIST ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-list { width: 100%; margin: 0; padding: 0; list-style: none; } /* ------------------------------------------------------------ MENU ITEM ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-list li { width: 100%; margin: 0; padding: 0; background: #ffffff; border-left: 1px solid #123f56; border-right: 1px solid #123f56; border-bottom: 1px solid #123f56; list-style: none; } /* ------------------------------------------------------------ MENU LINK ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-list li a { display: flex; align-items: center; width: 100%; min-height: 55px; margin: 0; padding: 10px 15px; background: #ffffff; color: #123f56; font-size: 16px; font-weight: 400; line-height: 1.4; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } /* ------------------------------------------------------------ ICON ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; margin-right: 12px; color: #00608a; font-size: 17px; text-align: center; } /* ------------------------------------------------------------ TEXT ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-text { display: block; min-width: 0; line-height: 1.4; } /* ------------------------------------------------------------ HOVER ------------------------------------------------------------ */ .custom-sidebar-menu .sidebar-menu-list li a:hover { background: #f3f6f8; color: #123f56; text-decoration: none; } /* ============================================================ 10. OJS SUBMISSION BUTTON ============================================================ */ .pkp_structure_sidebar .block_make_submission a { display: inline-block; margin-top: 0; margin-bottom: 0; padding: 8px 14px; border-radius: 4px; line-height: 1.4; } /* ============================================================ 11. CURRENT ISSUE Hanya styling visual. Tidak mengubah width/height/layout utama. ============================================================ */ .current_issue > h2 { margin-top: 0; margin-bottom: 14px; padding: 9px 12px; background: #123f56; color: #ffffff; border-radius: 5px; text-align: center; line-height: 1.4; } /* ============================================================ 12. CURRENT ISSUE TITLE ============================================================ */ .current_issue_title { margin-top: 0; margin-bottom: 14px; } /* ============================================================ 13. ISSUE COVER ============================================================ */ .obj_issue_summary .cover { margin-bottom: 14px; } .obj_issue_summary .cover img { max-width: 100%; height: auto; margin-bottom: 10px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12); } /* ============================================================ 14. ARTICLE SUMMARY ============================================================ */ .obj_article_summary { margin-top: 0; margin-bottom: 16px; padding: 16px; background: #ffffff; border: 1px solid #e3e3e3; border-radius: 5px; } /* ============================================================ 15. ARTICLE TITLE ============================================================ */ .obj_article_summary .title { margin-top: 0; margin-bottom: 10px; line-height: 1.45; } /* ============================================================ 16. ARTICLE LIST ============================================================ */ .cmp_article_list { margin-top: 0; } .cmp_article_list > li { margin-bottom: 12px; } /* ============================================================ 17. GENERAL OJS BLOCK TITLE Tidak mengubah struktur block. ============================================================ */ .pkp_structure_sidebar .pkp_block > h2 { margin-top: 0; margin-bottom: 8px; line-height: 1.4; } /* ============================================================ 18. BREADCRUMBS ============================================================ */ .cmp_breadcrumbs { margin-top: 10px; margin-bottom: 14px; } /* ============================================================ 19. CONTENT SPACING ============================================================ */ .pkp_page_index .current_issue { margin-bottom: 20px; } /* ============================================================ 20. TABLE ============================================================ */ .pkp_block table { margin-top: 8px; margin-bottom: 14px; max-width: 100%; } /* ============================================================ 21. FORM ELEMENT ============================================================ */ .pkp_block input, .pkp_block select, .pkp_block textarea { max-width: 100%; } /* ============================================================ 22. MOBILE ============================================================ */ @media (max-width: 768px) { .pkp_structure_sidebar .pkp_block { margin-bottom: 8px; } .custom-sidebar-menu .sidebar-menu-header { font-size: 15px; padding: 10px 8px; } .custom-sidebar-menu .sidebar-menu-list li a { min-height: 52px; padding: 9px 13px; font-size: 15px; } .custom-sidebar-menu .sidebar-menu-icon { width: 26px; min-width: 26px; margin-right: 10px; } } /* ============================================================ 23. EXTRA IMAGE PROTECTION ============================================================ */ .pkp_structure_sidebar .pkp_block .content figure { margin: 0 0 8px 0; } .pkp_structure_sidebar .pkp_block .content figure img { margin-bottom: 5px; } /* ============================================================ 24. CLEAR FLOAT Membantu mencegah elemen berikutnya naik dan menimpa elemen sebelumnya. ============================================================ */ .pkp_structure_sidebar .pkp_block .content:after { content: ""; display: block; clear: both; } /* ============================================================ 25. CUSTOM BLOCK SPACING CONTROL ------------------------------------------------------------ Custom Block menggunakan inline HTML untuk desain. Wrapper Custom Block sebaiknya menggunakan margin:0. Jarak antar semua blok sidebar dikendalikan oleh section 3. ============================================================ */ /* ============================================================ END OF SAFE CUSTOM STYLE ============================================================ Custom CSS by: Papung_Crafty ============================================================ */ /* ============================================================ 3D. HEADER LOGO SELEBAR KONTainer OJS ------------------------------------------------------------ Logo mengikuti SELURUH kontainer OJS: halaman kerja (main content) + sidebar. Background putih di luar .pkp_structure_page tidak ikut. Tidak mengubah lebar/posisi main content maupun sidebar. ============================================================ */ @media (min-width: 769px) { /* Header mengikuti lebar .pkp_structure_page */ .pkp_structure_head { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Wrapper logo = seluruh lebar kontainer, bukan hanya lebar kolom halaman kerja. */ .pkp_site_name_wrapper { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; float: none !important; clear: both !important; } .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; float: none !important; overflow: visible !important; } /* Logo memenuhi lebar kontainer tanpa crop dan tanpa distorsi. */ .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; object-fit: contain !important; object-position: center center !important; } /* Navigasi tetap berada setelah area logo. */ .pkp_site_nav_menu { position: relative !important; top: auto !important; left: auto !important; right: auto !important; clear: both !important; } } /* ============================================================ 3E. MOBILE ------------------------------------------------------------ Pada layar kecil logo mengikuti lebar kontainer yang tersedia. ============================================================ */ @media (max-width: 768px) { .pkp_structure_head, .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; } } /* ============================================================ END OF HEADER CONTAINER OVERRIDE Custom CSS by: Papung_Crafty ============================================================ */ /* ============================================================ 4. KONTainer HALAMAN - MODEL SEPERTI CONTOH SAKINA ------------------------------------------------------------ Kontainer mencakup: - halaman kerja / main content - sidebar Background putih/pattern di luar kontainer TIDAK termasuk. Logo/header mengikuti lebar kontainer yang sama. ============================================================ */ @media (min-width: 1200px) { /* Satu kontainer untuk seluruh area jurnal */ .pkp_structure_page { width: 76% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Header tepat sama dengan lebar kontainer */ .pkp_structure_head, .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Logo penuh, proporsional, tanpa crop */ .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; } } /* Layar laptop/tablet */ @media (min-width: 769px) and (max-width: 1199px) { .pkp_structure_page { width: calc(100% - 40px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .pkp_structure_head, .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } } /* Mobile */ @media (max-width: 768px) { .pkp_structure_page { width: calc(100% - 20px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .pkp_structure_head, .pkp_head_wrapper, .has_site_logo .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } } /* ============================================================ END - CONTAINER MODEL SAKINA Custom CSS by: Papung_Crafty ============================================================ */ /* ============================================================ 5. FINAL HEADER FINISHING - PAPUNG_CRAFTY ------------------------------------------------------------ Tiga penyesuaian: 1. Sudut atas kontainer dibuat melengkung seperti contoh SAKINA. 2. Navbar diberi ruang kiri/kanan agar tidak menempel di tepi. 3. Navigasi pengguna (Dashboard/Login/Register, dll.) selalu berada di atas logo dan tidak tertutup oleh gambar header. ============================================================ */ /* ------------------------------------------------------------ 5A. SUDUT ATAS KONTainer ------------------------------------------------------------ */ @media (min-width: 769px) { .pkp_structure_page { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .pkp_structure_head { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .pkp_head_wrapper { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .pkp_site_name_wrapper { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } } /* ------------------------------------------------------------ 5B. NAVBAR - JARAK PROPORSIONAL DARI TEPI KONTAINER ------------------------------------------------------------ */ @media (min-width: 769px) { .pkp_navigation_primary_wrapper { box-sizing: border-box !important; padding-left: 28px !important; padding-right: 28px !important; } .pkp_navigation_primary { margin-left: 0 !important; margin-right: 0 !important; } .pkp_navigation_primary > li:first-child > a { margin-left: 0 !important; } .pkp_navigation_primary > li:last-child > a { margin-right: 0 !important; } .pkp_navigation_search_wrapper { margin-right: 0 !important; } } /* ------------------------------------------------------------ 5C. USER NAVIGATION Dashboard / Login / Register / User menu SELALU DI ATAS LOGO. ------------------------------------------------------------ */ @media (min-width: 769px) { .pkp_navigation_user_wrapper { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; transform: none !important; z-index: 10000 !important; box-sizing: border-box !important; padding-left: 12px !important; padding-right: 12px !important; /* Latar solid agar teks/tombol tidak tertutup gambar logo */ background: rgba(18, 63, 86, 0.96) !important; border-bottom-left-radius: 8px !important; } .pkp_navigation_user { position: relative !important; z-index: 10001 !important; margin: 0 !important; padding: 0 !important; text-align: right !important; } .pkp_navigation_user > li > a { position: relative !important; z-index: 10002 !important; white-space: nowrap !important; } /* Dropdown user tetap berada di atas seluruh header */ .pkp_navigation_user ul { z-index: 10003 !important; } /* Pastikan logo berada di layer bawah */ .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img, .pkp_site_name .is_img img { position: relative !important; z-index: 1 !important; } } /* ------------------------------------------------------------ 5D. TABLET ------------------------------------------------------------ */ @media (min-width: 769px) and (max-width: 1199px) { .pkp_structure_page, .pkp_structure_head { border-radius: 12px 12px 0 0 !important; } .pkp_navigation_primary_wrapper { padding-left: 20px !important; padding-right: 20px !important; } .pkp_navigation_user_wrapper { padding-left: 10px !important; padding-right: 10px !important; } } /* ------------------------------------------------------------ 5E. MOBILE ------------------------------------------------------------ */ @media (max-width: 768px) { .pkp_structure_page, .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper { border-radius: 10px 10px 0 0 !important; } .pkp_navigation_primary_wrapper { padding-left: 10px !important; padding-right: 10px !important; } /* User navigation tidak boleh menutup logo pada layar kecil */ .pkp_navigation_user_wrapper { position: relative !important; top: auto !important; right: auto !important; left: auto !important; transform: none !important; z-index: 10000 !important; width: 100% !important; box-sizing: border-box !important; background: #123f56 !important; border-radius: 0 !important; padding: 0 10px !important; } .pkp_navigation_user { position: relative !important; z-index: 10001 !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================ END - FINAL HEADER FINISHING Custom CSS by: Papung_Crafty ============================================================ */ /* ============================================================ 6. FINAL HEADER/NAVBAR CORRECTION ------------------------------------------------------------ Tujuan: 1. Navbar PRIMARY selalu berada DI BAWAH gambar logo. 2. User navigation (Dashboard/Administration/Register/Login) berada di POJOK KANAN ATAS header. 3. User navigation tidak lagi ikut satu baris dengan navbar. 4. Navbar tidak menimpa isi halaman kerja. 5. Logo tetap memenuhi kontainer dan tetap proporsional. ============================================================ */ @media (min-width: 769px) { /* -------------------------------------------------------- A. HEADER MENJADI REFERENSI POSISI USER NAVIGATION -------------------------------------------------------- */ .pkp_structure_head { position: relative !important; z-index: 50 !important; overflow: visible !important; } .pkp_head_wrapper { position: relative !important; z-index: 50 !important; width: 100% !important; max-width: none !important; padding-top: 0 !important; margin: 0 !important; } /* -------------------------------------------------------- B. LOGO/HEADER IMAGE -------------------------------------------------------- */ .pkp_site_name_wrapper { position: relative !important; z-index: 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .pkp_site_name, .pkp_site_name > a, .pkp_site_name .is_img { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .pkp_site_name .is_img img { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; } /* -------------------------------------------------------- C. PRIMARY NAVIGATION -------------------------------------------------------- Penting: Default Theme menggunakan position:absolute untuk .pkp_site_nav_menu pada mode tertentu. Kita paksa menjadi bagian normal flow sehingga navbar benar-benar berada SETELAH gambar logo. -------------------------------------------------------- */ .pkp_site_nav_menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; clear: both !important; float: none !important; z-index: 100 !important; } .pkp_navigation_primary_row { position: relative !important; display: block !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .pkp_navigation_primary_wrapper { position: relative !important; display: block !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 28px !important; box-sizing: border-box !important; overflow: visible !important; } /* Menu utama diberi jarak yang seimbang dari tepi. */ .pkp_navigation_primary { position: relative !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; text-align: left !important; max-width: calc(100% - 100px) !important; } .pkp_navigation_primary > li:first-child > a { margin-left: 0.25em !important; } .pkp_navigation_primary > li:last-child > a { margin-right: 0.25em !important; } /* Search tetap berada di sisi kanan navbar. */ .pkp_navigation_search_wrapper { float: right !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------- D. USER NAVIGATION -------------------------------------------------------- Dashboard / Administration / Register / Login diletakkan di pojok kanan ATAS header, bukan di navbar. -------------------------------------------------------- */ .pkp_navigation_user_wrapper { position: absolute !important; top: 12px !important; right: 14px !important; left: auto !important; bottom: auto !important; display: block !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; background: rgba(18, 63, 86, 0.94) !important; border-radius: 0 0 0 8px !important; border: 0 !important; text-align: right !important; z-index: 99999 !important; } .pkp_navigation_user { position: relative !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; text-align: right !important; z-index: 100000 !important; } .pkp_navigation_user > li { position: relative !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; } .pkp_navigation_user > li > a { position: relative !important; display: inline-block !important; padding: 7px 9px !important; margin: 0 !important; white-space: nowrap !important; line-height: 1.25 !important; color: #ffffff !important; text-decoration: none !important; z-index: 100001 !important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; text-decoration: none !important; } /* Dropdown Dashboard/Administration tetap di atas semua elemen. */ .pkp_navigation_user ul, .pkp_navigation_user .dropdown-menu { position: absolute !important; z-index: 100002 !important; } } /* ============================================================ 6B. TABLET ============================================================ */ @media (min-width: 769px) and (max-width: 1199px) { .pkp_navigation_primary_wrapper { padding-left: 20px !important; padding-right: 20px !important; } .pkp_navigation_user_wrapper { top: 10px !important; right: 10px !important; padding-left: 6px !important; padding-right: 6px !important; } .pkp_navigation_user > li > a { padding-left: 7px !important; padding-right: 7px !important; } } /* ============================================================ 6C. MOBILE ------------------------------------------------------------ Pada mobile, user navigation tidak dipaksa berada di atas gambar karena ruang layar terbatas. ============================================================ */ @media (max-width: 768px) { .pkp_structure_head { position: relative !important; overflow: visible !important; } .pkp_head_wrapper { position: relative !important; padding-top: 0 !important; } .pkp_site_nav_menu { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .pkp_navigation_user_wrapper { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 10px !important; background: #123f56 !important; border-radius: 0 !important; text-align: right !important; } .pkp_navigation_primary_wrapper { padding-left: 10px !important; padding-right: 10px !important; } .pkp_navigation_primary { max-width: none !important; } } /* ============================================================ END - FINAL NAVBAR CORRECTION Custom CSS by: Papung_Crafty ============================================================ */ /* ============================================================ 6D. USER NAVIGATION TRANSPARAN ------------------------------------------------------------ Dashboard / Administration / Register / Login tetap berada di pojok kanan atas, tetapi background biru wrapper dihapus. Yang terlihat hanya tombol/teks navigasinya. ============================================================ */ @media (min-width: 769px) { .pkp_navigation_user_wrapper { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } .pkp_navigation_user > li > a { background: transparent !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus { background: rgba(0,0,0,0.16) !important; color: #ffffff !important; border-radius: 4px !important; } } @media (max-width: 768px) { .pkp_navigation_user_wrapper { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 10px !important; box-shadow: none !important; } .pkp_navigation_user > li > a { background: transparent !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important; } } /* Custom CSS by: Papung_Crafty */ /* ============================================================ 7. FINAL HEADER / NAVBAR / SUBMENU FIX ------------------------------------------------------------ Custom CSS by: Papung_Crafty Tujuan: - User navigation (Dashboard, Administration, Register, Login) kembali ke pojok kanan ATAS header. - Primary navbar tetap berada di bawah logo. - Submenu mengikuti mekanisme dropdown Default Theme OJS agar area hover dan klik tetap mudah digunakan. - Navbar dan submenu selalu berada di atas content + sidebar. ============================================================ */ @media (min-width: 769px) { /* Header menjadi stacking context utama */ .pkp_structure_head { position: relative !important; z-index: 10000 !important; overflow: visible !important; } .pkp_head_wrapper { position: relative !important; z-index: 10001 !important; overflow: visible !important; } /* * PENTING: * Jangan jadikan .pkp_site_nav_menu sebagai containing block * untuk User Navigation. Dengan position:static, * .pkp_navigation_user_wrapper akan menempel ke .pkp_head_wrapper * dan kembali ke pojok kanan ATAS header. */ .pkp_site_nav_menu { position: static !important; z-index: 10010 !important; display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; padding: 0 !important; } /* Navbar utama tetap pada alur normal di bawah logo */ .pkp_navigation_primary_row, .pkp_navigation_primary_wrapper { position: relative !important; z-index: 10011 !important; overflow: visible !important; } .pkp_navigation_primary { position: relative !important; z-index: 10012 !important; overflow: visible !important; } .pkp_navigation_primary > li { position: relative !important; z-index: 10013 !important; } /* * Jangan memaksa position/transform submenu di sini. * Default Theme OJS sudah mengatur posisi dropdown agar * hover -> submenu tetap berada tepat di bawah item induknya. * Kita hanya menaikkan layer dan memastikan tidak terpotong. */ .pkp_navigation_primary > li > ul, .pkp_navigation_primary > li > .dropdown-menu, .pkp_navigation_primary .dropdown-menu, .pkp_navigation_primary ul { z-index: 999999 !important; overflow: visible !important; } /* Pastikan content dan sidebar berada di bawah header/navbar */ .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { position: relative !important; z-index: 1 !important; } /* * USER NAVIGATION * Dashboard / Administration / Register / Login * berada di pojok kanan atas header, tanpa pita background. */ .pkp_navigation_user_wrapper { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; transform: none !important; z-index: 100100 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .pkp_navigation_user { position: relative !important; z-index: 100101 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .pkp_navigation_user > li { position: relative !important; z-index: 100102 !important; } .pkp_navigation_user > li > a { background: transparent !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,.75) !important; cursor: pointer !important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus { background: rgba(0,0,0,.18) !important; color: #ffffff !important; text-decoration: none !important; } .pkp_navigation_user ul, .pkp_navigation_user .dropdown-menu { z-index: 999999 !important; } } /* ============================================================ 7A. PRIMARY NAVBAR — AREA KLIK DIPERLUAS ------------------------------------------------------------ Tidak mengubah teks/menu. Hanya membuat area anchor lebih mudah disorot dan diklik. ============================================================ */ @media (min-width: 769px) { .pkp_navigation_primary > li > a { position: relative !important; z-index: 10014 !important; cursor: pointer !important; white-space: nowrap !important; } .pkp_navigation_primary > li:hover > a, .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus { position: relative !important; z-index: 10015 !important; } } /* ============================================================ 7B. MOBILE / TABLET ============================================================ */ @media (max-width: 768px) { .pkp_structure_head, .pkp_head_wrapper, .pkp_site_nav_menu { position: relative !important; z-index: 10000 !important; overflow: visible !important; } .pkp_navigation_primary_row, .pkp_navigation_primary_wrapper, .pkp_navigation_primary, .pkp_navigation_primary > li { position: relative !important; z-index: 10010 !important; overflow: visible !important; } .pkp_navigation_primary ul, .pkp_navigation_primary .dropdown-menu { z-index: 999999 !important; overflow: visible !important; } .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { position: relative !important; z-index: 1 !important; } } /* ============================================================ END - HEADER / NAVBAR / SUBMENU FIX Custom CSS by: Papung_Crafty ============================================================ */ /* ========================================================= FULL PAGE CONTAINER — MAIN CONTENT + SIDEBAR + FOOTER Custom CSS by: Papung_Crafty ========================================================= */ /* Keep the existing header/navbar behavior. This section only makes the working page feel like one unified centered container and rounds the top/bottom ends. */ @media (min-width: 769px) { /* One unified outer page container */ .pkp_structure_page { width: 76% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 4px 18px rgba(0,0,0,.08) !important; } /* Header: keep the top corners rounded. Do NOT use overflow:hidden here because the navigation dropdown must remain clickable. */ .pkp_structure_head { width: 100% !important; border-radius: 16px 16px 0 0 !important; position: relative !important; z-index: 10000 !important; } /* Main working area: main content + sidebar share the exact same white container width. */ .pkp_structure_content { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } .pkp_structure_content > .pkp_structure_main, .pkp_structure_content > .pkp_structure_sidebar { box-sizing: border-box !important; } /* Remove the visual impression that the sidebar is sitting outside the page container. */ .pkp_structure_sidebar { background: #ffffff !important; } .pkp_structure_main { background: #ffffff !important; } /* Footer belongs to the same visual container. Make it full width and round only its bottom corners. */ .pkp_structure_footer_wrapper { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; background: #ffffff !important; box-sizing: border-box !important; border-radius: 0 0 16px 16px !important; } .pkp_structure_footer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; border-radius: 0 0 16px 16px !important; } } /* Tablet */ @media (min-width: 481px) and (max-width: 768px) { .pkp_structure_page { width: calc(100% - 30px) !important; max-width: none !important; margin-left: 15px !important; margin-right: 15px !important; background: #ffffff !important; border-radius: 14px !important; box-shadow: 0 3px 14px rgba(0,0,0,.07) !important; } .pkp_structure_head { border-radius: 14px 14px 0 0 !important; } .pkp_structure_content, .pkp_structure_footer_wrapper, .pkp_structure_footer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .pkp_structure_footer_wrapper, .pkp_structure_footer { border-radius: 0 0 14px 14px !important; } } /* Mobile */ @media (max-width: 480px) { .pkp_structure_page { width: calc(100% - 20px) !important; max-width: none !important; margin-left: 10px !important; margin-right: 10px !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; } .pkp_structure_head { border-radius: 12px 12px 0 0 !important; } .pkp_structure_content, .pkp_structure_footer_wrapper, .pkp_structure_footer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .pkp_structure_footer_wrapper, .pkp_structure_footer { border-radius: 0 0 12px 12px !important; } } /* End of full-container section */ /* ========================================================= RESPONSIVE CONTENT + SIDEBAR FIX Custom CSS by: Papung_Crafty ========================================================= */ /* OJS normally moves the sidebar below the main content at narrower desktop/tablet widths. For this journal design, keep MAIN + SIDEBAR side-by-side whenever there is enough room, while making the outer container wider on smaller desktop/tablet viewports. */ @media (min-width: 769px) and (max-width: 1199px) { /* Use the available viewport instead of the 76% desktop width */ .pkp_structure_page { width: calc(100% - 30px) !important; max-width: none !important; margin-left: 15px !important; margin-right: 15px !important; } /* Force the working area into two columns: main content + sidebar. */ .pkp_structure_content { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; max-width: none !important; } .pkp_structure_main { float: none !important; width: auto !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; box-sizing: border-box !important; } .pkp_structure_sidebar, .pkp_structure_sidebar.left { float: none !important; clear: none !important; width: 270px !important; max-width: 270px !important; flex: 0 0 270px !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } } /* If the browser viewport becomes genuinely narrow, switch to the normal stacked mobile layout. This prevents the two columns from becoming unusably narrow. */ @media (max-width: 768px) { .pkp_structure_content { display: block !important; width: 100% !important; } .pkp_structure_main { float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } .pkp_structure_sidebar, .pkp_structure_sidebar.left { float: none !important; clear: both !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================= END - RESPONSIVE CONTENT + SIDEBAR FIX Custom CSS by: Papung_Crafty ========================================================= */ /* ========================================================= RESPONSIVE BREAKPOINT V2 Keep MAIN CONTENT + SIDEBAR side-by-side until 768px. Custom CSS by: Papung_Crafty ========================================================= */ /* OJS Default Theme can switch the structure to a stacked layout before the browser reaches the normal mobile size. The rules below explicitly preserve the two-column layout from 769px upward, including at 100% browser zoom. */ @media (min-width: 769px) { .pkp_structure_content { display: flex !important; flex-direction: row !important; align-items: flex-start !important; width: 100% !important; max-width: none !important; } .pkp_structure_content > .pkp_structure_main { float: none !important; display: block !important; width: calc(100% - 300px) !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } .pkp_structure_content > .pkp_structure_sidebar { float: none !important; display: block !important; width: 270px !important; max-width: 270px !important; flex: 0 0 270px !important; margin: 0 !important; padding-left: 20px !important; box-sizing: border-box !important; align-self: flex-start !important; } } /* At 768px and below, allow OJS to use its mobile/stacked layout naturally. */ @media (max-width: 768px) { .pkp_structure_content { display: block !important; width: 100% !important; } .pkp_structure_content > .pkp_structure_main, .pkp_structure_content > .pkp_structure_sidebar { width: 100% !important; max-width: none !important; float: none !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .pkp_structure_content > .pkp_structure_sidebar { padding-left: 0 !important; } } /* End responsive breakpoint V2 */ /* ========================================================= PROPORTIONAL LAYOUT V3 Narrower sidebar gap + smaller homepage/content scale Custom CSS by: Papung_Crafty ========================================================= */ @media (min-width: 769px) { /* --------------------------------------------- 1. MAIN + SIDEBAR: reduce the empty gap --------------------------------------------- */ .pkp_structure_content { display: flex !important; flex-direction: row !important; align-items: flex-start !important; column-gap: 15px !important; } .pkp_structure_content > .pkp_structure_main { width: auto !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding-right: 0 !important; } .pkp_structure_content > .pkp_structure_sidebar { width: 270px !important; max-width: 270px !important; flex: 0 0 270px !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------- 2. MAIN WORKING AREA: slightly more breathing room without making the content oversized --------------------------------------------- */ .pkp_structure_main .page { box-sizing: border-box !important; } .pkp_structure_main > .page, .pkp_structure_main > .content { max-width: 100% !important; box-sizing: border-box !important; } /* --------------------------------------------- 3. HOMEPAGE IMAGE: reduce visual size and keep it centered/proportional --------------------------------------------- */ .pkp_page_index .homepage_image { width: 94% !important; max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .pkp_page_index .homepage_image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* Some OJS versions use a direct image without the homepage_image wrapper. */ .pkp_page_index .homepage_image > a, .pkp_page_index .homepage_image > img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* --------------------------------------------- 4. GENERAL CONTENT IMAGES: never stretch beyond their natural/proportional presentation --------------------------------------------- */ .pkp_structure_main .content img { max-width: 100% !important; height: auto !important; } /* --------------------------------------------- 5. ARTICLE/PAGE CONTENT: keep text area tidy --------------------------------------------- */ .pkp_structure_main .page > .container, .pkp_structure_main .page .container { box-sizing: border-box !important; } } /* --------------------------------------------- Tablet: keep proportions comfortable --------------------------------------------- */ @media (min-width: 769px) and (max-width: 1100px) { .pkp_structure_content { column-gap: 12px !important; } .pkp_structure_content > .pkp_structure_sidebar { width: 250px !important; max-width: 250px !important; flex-basis: 250px !important; } .pkp_page_index .homepage_image { width: 92% !important; max-width: none !important; } } /* End proportional layout V3 */ /* ========================================================= REMOVE WORKING-AREA SIDE BORDERS Custom CSS by: Papung_Crafty ========================================================= */ /* The thin vertical lines visible on the left and right of the working area come from the OJS structure containers. Remove only those structural borders; sidebar menu borders remain untouched. */ .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { border-left: 0 !important; border-right: 0 !important; } /* Also remove borders from common inner working-area wrappers */ .pkp_structure_main > .page, .pkp_structure_main > .content, .pkp_structure_main .page, .pkp_structure_main .content { border-left: 0 !important; border-right: 0 !important; } /* Keep the unified page container clean and white. No vertical divider should appear between the page edge and the working content. */ .pkp_structure_content { background: #ffffff !important; } /* Preserve the actual sidebar menu borders */ .pkp_structure_sidebar .custom-sidebar-menu .sidebar-menu-list li { border-left: 1px solid #123f56 !important; border-right: 1px solid #123f56 !important; } /* End side-border removal */ /* ========================================================= REMOVE ALL OJS WORKING-AREA VERTICAL LINES — V5 Custom CSS by: Papung_Crafty ========================================================= */ /* V4 removed explicit left/right borders, but the visible lines are coming from a higher-specificity OJS/theme rule on one of the outer structure wrappers. This final block removes border, outline and shadow from the PAGE/CONTENT wrappers only. Sidebar menu borders are intentionally NOT included here. */ .pkp_structure_page, .pkp_structure_head, .pkp_head_wrapper, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar, .pkp_structure_footer_wrapper, .pkp_structure_footer, .pkp_structure_page > *, .pkp_structure_content > * { border-left: 0 !important; border-right: 0 !important; outline: 0 !important; } /* Remove possible pseudo-element dividers generated by theme/layout */ .pkp_structure_page::before, .pkp_structure_page::after, .pkp_structure_content::before, .pkp_structure_content::after, .pkp_structure_main::before, .pkp_structure_main::after, .pkp_structure_sidebar::before, .pkp_structure_sidebar::after { border-left: 0 !important; border-right: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Keep the page visually clean. The container itself remains white and rounded; only the unwanted vertical divider lines are removed. */ .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { box-shadow: none !important; } /* End V5 */ /* ========================================================= CLEAN LAYOUT V6 — REMOVE THE ACTUAL OJS DIVIDER Custom CSS by: Papung_Crafty ========================================================= */ /* IMPORTANT: The remaining vertical line is not an ordinary border on the content itself. OJS/PKP can draw the sidebar divider with the pseudo-element: .has_sidebar > .pkp_structure_sidebar::before Therefore it must be disabled directly. */ /* 1. Remove the OJS sidebar divider pseudo-element */ .has_sidebar > .pkp_structure_sidebar::before, .pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before { display: none !important; content: none !important; border: 0 !important; width: 0 !important; background: transparent !important; box-shadow: none !important; } /* 2. Remove every structural border from the page wrappers */ body > .pkp_structure_page, .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar, .pkp_structure_footer_wrapper, .pkp_structure_footer { border: 0 !important; border-left: 0 !important; border-right: 0 !important; outline: 0 !important; } /* 3. Remove structural pseudo-elements that could draw lines */ .pkp_structure_content::before, .pkp_structure_content::after, .pkp_structure_main::before, .pkp_structure_main::after, .pkp_structure_sidebar::before, .pkp_structure_sidebar::after { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; } /* 4. Do not create a visual divider between main and sidebar */ .pkp_structure_content > .pkp_structure_main, .pkp_structure_content > .pkp_structure_sidebar { border: 0 !important; box-shadow: none !important; } /* 5. Keep the actual sidebar blocks clean. This does NOT remove borders from the custom menu items; those are part of the intended sidebar design. */ .pkp_structure_sidebar .pkp_block { border-left: 0 !important; border-right: 0 !important; } /* 6. Keep the unified white working area */ .pkp_structure_content { background: #ffffff !important; } /* End CLEAN LAYOUT V6 */