Panduan CSS\/LESS untuk Tema OJS<\/title>\n <style>\n \/* Reset minimal untuk compatibility dengan WordPress *\/\n .elkuator-article-content * {\n box-sizing: border-box;\n }\n\n .elkuator-article-content {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.8;\n color: #333;\n font-size: 16px;\n }\n\n .elkuator-article-content h1 {\n font-size: 2.2em;\n font-weight: 700;\n line-height: 1.3;\n margin-bottom: 25px;\n margin-top: 0;\n color: #1a1a1a;\n }\n\n .elkuator-article-content h2 {\n font-size: 1.8em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 45px;\n margin-bottom: 20px;\n color: #1a1a1a;\n border-bottom: 2px solid #e8e8e8;\n padding-bottom: 10px;\n }\n\n .elkuator-article-content h3 {\n font-size: 1.4em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 35px;\n margin-bottom: 15px;\n color: #2a2a2a;\n }\n\n .elkuator-article-content h4 {\n font-size: 1.2em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 28px;\n margin-bottom: 12px;\n color: #3a3a3a;\n }\n\n .elkuator-article-content p {\n margin-bottom: 18px;\n line-height: 1.8;\n color: #444;\n }\n\n .elkuator-article-content ul,\n .elkuator-article-content ol {\n margin-left: 25px;\n margin-bottom: 20px;\n line-height: 1.8;\n }\n\n .elkuator-article-content li {\n margin-bottom: 10px;\n color: #444;\n }\n\n .elkuator-article-content strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .elkuator-article-content code {\n background: #f5f5f5;\n padding: 3px 8px;\n border-radius: 3px;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n color: #d63384;\n border: 1px solid #e0e0e0;\n }\n\n \/* Intro Section *\/\n .elkuator-intro-box {\n background: #f8f9fa;\n border-left: 4px solid #007bff;\n padding: 25px;\n margin: 25px 0;\n border-radius: 4px;\n }\n\n .elkuator-intro-box p {\n margin: 0;\n font-size: 1.05em;\n color: #444;\n }\n\n \/* Benefits List Box *\/\n .elkuator-benefits-box {\n background: #f9f9f9;\n padding: 20px 25px;\n margin: 25px 0;\n border-radius: 4px;\n border: 1px solid #e0e0e0;\n }\n\n .elkuator-benefits-box ul {\n margin: 0;\n }\n\n .elkuator-benefits-box li {\n margin-bottom: 12px;\n }\n\n \/* Code Block *\/\n .elkuator-code-wrapper {\n margin: 25px 0;\n }\n\n .elkuator-code-label {\n background: #343a40;\n color: #adb5bd;\n padding: 6px 15px;\n border-radius: 4px 4px 0 0;\n font-size: 0.75em;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n display: inline-block;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n }\n\n .elkuator-code-block {\n background: #2d3339;\n color: #e9ecef;\n padding: 20px;\n border-radius: 0 4px 4px 4px;\n overflow-x: auto;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n line-height: 1.6;\n margin-top: -1px;\n }\n\n .elkuator-code-block pre {\n margin: 0;\n white-space: pre;\n color: black;\n }\n\n \/* File Structure *\/\n .elkuator-file-structure {\n background: #2d3339;\n color: black;\n padding: 20px;\n border-radius: 4px;\n margin: 25px 0;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n line-height: 1.8;\n border: 1px solid #454d55;\n }\n\n .elkuator-file-structure pre {\n margin: 0;\n color: black;\n }\n\n \/* Info Boxes *\/\n .elkuator-highlight-box {\n background: #fff8e1;\n border-left: 4px solid #ffc107;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-highlight-box p {\n margin: 0;\n }\n\n .elkuator-info-box {\n background: #e7f3ff;\n border-left: 4px solid #2196f3;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-info-box p {\n margin: 0;\n }\n\n .elkuator-warning-box {\n background: #fff3cd;\n border-left: 4px solid #ff9800;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-warning-box strong {\n color: #856404;\n display: block;\n margin-bottom: 8px;\n }\n\n .elkuator-success-box {\n background: #d4edda;\n border-left: 4px solid #28a745;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-success-box p {\n margin: 0;\n color: #155724;\n }\n\n \/* Key Points Box *\/\n .elkuator-key-points {\n background: #f0f8ff;\n padding: 25px;\n border-radius: 4px;\n margin: 30px 0;\n border: 2px solid #cce5ff;\n }\n\n .elkuator-key-points h3 {\n color: #004085;\n margin-top: 0;\n margin-bottom: 18px;\n font-size: 1.3em;\n }\n\n .elkuator-key-points ul {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n }\n\n .elkuator-key-points li {\n padding-left: 30px;\n position: relative;\n margin-bottom: 12px;\n color: #004085;\n }\n\n .elkuator-key-points li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #28a745;\n font-weight: bold;\n font-size: 1.2em;\n }\n\n \/* Table *\/\n .elkuator-article-content table {\n width: 100%;\n border-collapse: collapse;\n margin: 25px 0;\n font-size: 0.95em;\n }\n\n .elkuator-article-content table th,\n .elkuator-article-content table td {\n border: 1px solid #dee2e6;\n padding: 12px 15px;\n text-align: left;\n }\n\n .elkuator-article-content table th {\n background: #f8f9fa;\n font-weight: 600;\n color: #495057;\n }\n\n .elkuator-article-content table tr:nth-child(even) {\n background: #f8f9fa;\n }\n\n \/* Divider *\/\n .elkuator-divider {\n height: 1px;\n background: #e0e0e0;\n margin: 40px 0;\n border: none;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .elkuator-article-content {\n font-size: 15px;\n }\n\n .elkuator-article-content h1 {\n font-size: 1.8em;\n }\n\n .elkuator-article-content h2 {\n font-size: 1.5em;\n margin-top: 35px;\n }\n\n .elkuator-article-content h3 {\n font-size: 1.25em;\n }\n\n .elkuator-article-content h4 {\n font-size: 1.1em;\n }\n\n .elkuator-code-block {\n font-size: 0.85em;\n padding: 15px;\n }\n\n .elkuator-article-content ul,\n .elkuator-article-content ol {\n margin-left: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"elkuator-article-content\">\n <h1>Panduan CSS\/LESS untuk Pengembangan Tema OJS<\/h1>\n\n <div class=\"elkuator-intro-box\">\n <p><strong>Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP)<\/strong>, PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins.<\/p>\n <\/div>\n\n <h2>Apa itu LESS?<\/h2>\n <p>LESS adalah preprocessor CSS yang memungkinkan Anda menulis kode stylesheet dengan sintaks yang mirip CSS namun dengan kemampuan tambahan yang sangat berguna. File LESS akan secara otomatis dikompilasi menjadi CSS oleh aplikasi OJS\/OMP.<\/p>\n\n <h3>Keuntungan Menggunakan LESS<\/h3>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><strong>Variabel:<\/strong> Menyimpan nilai yang dapat digunakan berulang kali<\/li>\n <li><strong>Import File:<\/strong> Memecah stylesheet besar menjadi file-file kecil yang lebih mudah dikelola<\/li>\n <li><strong>Mixins:<\/strong> Menggunakan kembali grup properti CSS<\/li>\n <li><strong>Nested Rules:<\/strong> Menulis CSS dengan struktur hierarki yang lebih jelas<\/li>\n <\/ul>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Contoh Penggunaan Dasar<\/h2>\n\n <h3>1. Menggunakan Variabel<\/h3>\n <p>Variabel dalam LESS dimulai dengan simbol <code>@<\/code>. Berikut contoh penggunaan variabel untuk warna background:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@background: red;\n\n.pkp_structure_head,\n.pkp_structure_footer {\n background: @background;\n}<\/pre>\n <\/div>\n <\/div>\n\n <p>Variabel ini menjadi lebih powerful ketika digunakan di berbagai tempat:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@background: red;\n\n.pkp_structure_head,\n.pkp_structure_footer {\n background: @background;\n}\n\nbutton {\n border-color: @background;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-highlight-box\">\n <p><strong>\ud83d\udca1 Tips:<\/strong> Dengan cara ini, jika Anda ingin mengubah warna, cukup ubah nilai variabel <code>@background<\/code> di satu tempat saja.<\/p>\n <\/div>\n\n <h3>2. Import File untuk Organisasi yang Lebih Baik<\/h3>\n <p>Seiring berkembangnya stylesheet, Anda akan ingin memecahnya menjadi beberapa file. LESS memungkinkan Anda mengimpor file terpisah dan berbagi variabel antar file tersebut.<\/p>\n\n <h4>Struktur File yang Disarankan:<\/h4>\n <div class=\"elkuator-file-structure\">\n<pre>\/styles\n \u251c\u2500\u2500 variables.less \/\/ Variabel global\n \u251c\u2500\u2500 structure.less \/\/ Style struktur layout\n \u251c\u2500\u2500 forms.less \/\/ Style untuk form\n \u2514\u2500\u2500 index.less \/\/ File utama yang mengimpor semua<\/pre>\n <\/div>\n\n <h4>Contoh isi file:<\/h4>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">variables.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@bg-primary: #1e6292;\n@bg-secondary: #f5f5f5;\n@text-color: #333;\n@link-color: #1e6292;\n@border-radius: 3px;<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">structure.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>.pkp_structure_head {\n background: @bg-primary;\n color: white;\n}\n\n.pkp_structure_content {\n background: @bg-secondary;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">forms.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>button {\n background: @bg-primary;\n color: white;\n border-radius: @border-radius;\n}\n\ninput[type=\"text\"] {\n border: 1px solid @bg-primary;\n border-radius: @border-radius;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">index.less (file utama)<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Import semua file dalam urutan yang benar\n@import \"variables\";\n@import \"structure\";\n@import \"forms\";<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Implementasi dalam Plugin Tema<\/h2>\n <p>Untuk menggunakan LESS dalam plugin tema OJS, Anda perlu mendefinisikannya dalam file plugin class:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre><?php\nimport('lib.pkp.classes.plugins.ThemePlugin');\n\nclass TutorialThemePlugin extends ThemePlugin {\n public function init() {\n \/\/ Parameter kedua menunjuk ke file LESS di tema Anda\n $this->addStyle('stylesheet', 'styles\/index.less');\n }\n}\n?><\/pre>\n <\/div>\n <\/div>\n\n <h3>Struktur File Plugin Tema Lengkap<\/h3>\n <div class=\"elkuator-file-structure\">\n<pre>\/plugins\/themes\/tutorial-theme\/\n \u251c\u2500\u2500 index.php\n \u251c\u2500\u2500 TutorialThemePlugin.inc.php\n \u251c\u2500\u2500 version.xml\n \u251c\u2500\u2500 locale\/\n \u2502 \u2514\u2500\u2500 en_US\/\n \u2502 \u2514\u2500\u2500 locale.po\n \u2514\u2500\u2500 styles\/\n \u251c\u2500\u2500 index.less\n \u251c\u2500\u2500 variables.less\n \u251c\u2500\u2500 structure.less\n \u2514\u2500\u2500 forms.less<\/pre>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Tips dan Best Practices<\/h2>\n\n <h3>1. Gunakan Variabel untuk Konsistensi<\/h3>\n <p>Definisikan semua warna, ukuran font, spacing, dan nilai yang sering digunakan sebagai variabel di file <code>variables.less<\/code>:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">variables.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Warna\n@color-primary: #1e6292;\n@color-secondary: #6c757d;\n@color-success: #28a745;\n@color-danger: #dc3545;\n\n\/\/ Typography\n@font-family-base: 'Noto Sans', sans-serif;\n@font-size-base: 14px;\n@line-height-base: 1.5;\n\n\/\/ Spacing\n@spacing-xs: 5px;\n@spacing-sm: 10px;\n@spacing-md: 20px;\n@spacing-lg: 40px;\n\n\/\/ Border\n@border-width: 1px;\n@border-color: #ddd;\n@border-radius-base: 3px;<\/pre>\n <\/div>\n <\/div>\n\n <h3>2. Organisasi File yang Sistematis<\/h3>\n <p>Pisahkan stylesheet berdasarkan komponen atau fungsi:<\/p>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><strong>variables.less:<\/strong> Semua variabel global<\/li>\n <li><strong>typography.less:<\/strong> Style untuk tipografi<\/li>\n <li><strong>buttons.less:<\/strong> Style untuk tombol<\/li>\n <li><strong>forms.less:<\/strong> Style untuk form input<\/li>\n <li><strong>navigation.less:<\/strong> Style untuk navigasi<\/li>\n <li><strong>structure.less:<\/strong> Style untuk layout struktur<\/li>\n <li><strong>objects.less:<\/strong> Style untuk objek khusus (artikel, issue, dll)<\/li>\n <\/ul>\n <\/div>\n\n <h3>3. Nested Rules untuk Readability<\/h3>\n <p>LESS memungkinkan Anda menulis CSS bersarang yang lebih mudah dibaca:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>.article-summary {\n padding: @spacing-md;\n border: @border-width solid @border-color;\n \n .title {\n font-size: 18px;\n color: @color-primary;\n \n a {\n text-decoration: none;\n \n &:hover {\n text-decoration: underline;\n }\n }\n }\n \n .meta {\n color: @color-secondary;\n font-size: 12px;\n }\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>4. Mixins untuk Reusability<\/h3>\n <p>Buat mixins untuk style yang sering digunakan:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Mixin untuk shadow\n.box-shadow(@shadow) {\n -webkit-box-shadow: @shadow;\n -moz-box-shadow: @shadow;\n box-shadow: @shadow;\n}\n\n\/\/ Mixin untuk transition\n.transition(@transition) {\n -webkit-transition: @transition;\n -moz-transition: @transition;\n transition: @transition;\n}\n\n\/\/ Penggunaan\n.card {\n .box-shadow(0 2px 4px rgba(0,0,0,0.1));\n .transition(all 0.3s ease);\n}<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Kompilasi dan Cache<\/h2>\n\n <h3>Proses Kompilasi Otomatis<\/h3>\n <p>Ketika Anda memanggil <code>addStyle()<\/code> dan menunjuk ke file LESS, aplikasi OJS akan:<\/p>\n <ol>\n <li>Secara otomatis mengkompilasi file LESS menjadi CSS<\/li>\n <li>Menyimpan hasil kompilasi di folder <code>cache\/<\/code><\/li>\n <li>Memuat file CSS yang sudah dikompilasi di frontend<\/li>\n <\/ol>\n\n <h3>Menangani Cache<\/h3>\n <p>Jika Anda mengubah file LESS dan perubahan tidak muncul:<\/p>\n <ol>\n <li>Hapus file CSS di folder <code>cache\/<\/code><\/li>\n <li>Reload halaman - OJS akan mengkompilasi ulang file LESS<\/li>\n <li><strong>Jangan pernah<\/strong> mengedit file CSS di folder <code>cache\/<\/code> secara langsung karena akan ditimpa<\/li>\n <\/ol>\n\n <h3>Force Recompilation<\/h3>\n <p>Untuk memaksa kompilasi ulang saat development:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">Bash<\/div>\n <div class=\"elkuator-code-block\">\n<pre># Hapus cache CSS\nrm cache\/t_compile\/*.css\nrm cache\/t_cache\/*.css<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Menggunakan CSS Biasa<\/h2>\n <p>Jika LESS terasa terlalu kompleks, Anda tetap bisa menggunakan CSS biasa. Cukup simpan file dengan ekstensi <code>.less<\/code> dan tulis CSS standar di dalamnya:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">styles\/simple.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/* CSS biasa juga berfungsi *\/\n.header {\n background: #1e6292;\n color: white;\n padding: 20px;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-info-box\">\n <p><strong>\u2139\ufe0f Catatan:<\/strong> Kekuatan LESS akan lebih terasa saat Anda mengembangkan tema yang lebih kompleks atau membuat child theme.<\/p>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Context untuk Stylesheet<\/h2>\n <p>OJS mendukung berbagai context untuk memuat stylesheet:<\/p>\n\n <h3>1. Frontend Context (Default)<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('stylesheet', 'styles\/index.less');\n\/\/ Atau eksplisit\n$this->addStyle('stylesheet', 'styles\/index.less', [\n 'contexts' => 'frontend'\n]);<\/pre>\n <\/div>\n <\/div>\n\n <p>Stylesheet akan dimuat di template dengan:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">Smarty<\/div>\n <div class=\"elkuator-code-block\">\n<pre>{load_stylesheet context=\"frontend\" stylesheets=$stylesheets}<\/pre>\n <\/div>\n <\/div>\n\n <h3>2. Backend Context<\/h3>\n <p>Untuk styling backend editorial:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->modifyStyle('pkpLib', [\n 'addLess' => array('styles\/backend.less')\n]);<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-warning-box\">\n <strong>\u26a0\ufe0f Catatan Penting:<\/strong>\n <p>Berhati-hatilah saat memodifikasi style backend. Backend adalah aplikasi yang kompleks dan perubahan style dapat memiliki efek yang tidak diinginkan.<\/p>\n <\/div>\n\n <h3>3. HTML Galley Context<\/h3>\n <p>Untuk styling HTML galley:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('htmlGalley', 'styles\/galley.less', [\n 'contexts' => 'htmlGalley'\n]);<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Memodifikasi Style yang Ada<\/h2>\n\n <h3>Menambahkan File LESS ke Style Existing<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n \/\/ Menambahkan file LESS tambahan ke style 'default'\n $this->modifyStyle('default', [\n 'addLess' => array('styles\/custom-colors.less')\n ]);\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>Menambahkan Variabel LESS<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n $customColors = \"\n @primary-color: #ff6600;\n @secondary-color: #333333;\n \";\n \n $this->modifyStyle('default', [\n 'addLessVariables' => $customColors\n ]);\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>Menghapus Style<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n \/\/ Menghapus style bernama 'default'\n $this->removeStyle('default');\n}<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Parameter Lengkap addStyle()<\/h2>\n <p>Method <code>addStyle()<\/code> menerima berbagai parameter opsional:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle($name, $style, $args);<\/pre>\n <\/div>\n <\/div>\n\n <p><strong>Parameter $args yang tersedia:<\/strong><\/p>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><code>'contexts'<\/code>: Kapan memuat stylesheet ('frontend', 'backend', 'htmlGalley')<\/li>\n <li><code>'priority'<\/code>: Mengontrol urutan style dimuat<\/li>\n <li><code>'addLess'<\/code>: Array file LESS tambahan untuk diproses<\/li>\n <li><code>'addLessVariables'<\/code>: String variabel LESS untuk di-parse sebelum kompilasi<\/li>\n <li><code>'inline'<\/code>: Boolean, apakah style langsung di-output sebagai inline style<\/li>\n <\/ul>\n <\/div>\n\n <p><strong>Contoh lengkap:<\/strong><\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('custom-style', 'styles\/custom.less', [\n 'contexts' => 'frontend',\n 'priority' => STYLE_SEQUENCE_CORE,\n 'addLess' => array('styles\/variables.less', 'styles\/mixins.less')\n]);<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Child Theme dan LESS<\/h2>\n <p>Salah satu kekuatan LESS adalah kemudahan dalam membuat child theme. Child theme dapat mewarisi dan memodifikasi style parent theme dengan mudah.<\/p>\n\n <p><strong>Contoh Child Theme:<\/strong><\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre><?php\nimport('lib.pkp.classes.plugins.ThemePlugin');\n\nclass MyChildThemePlugin extends ThemePlugin {\n public function init() {\n \/\/ Set parent theme\n $this->setParent('defaultthemeplugin');\n \n \/\/ Modifikasi style parent dengan menambahkan variabel custom\n $this->modifyStyle('stylesheet', [\n 'addLess' => array('styles\/custom-variables.less')\n ]);\n \n \/\/ Tambahkan stylesheet tambahan\n $this->addStyle('child-style', 'styles\/child.less');\n }\n}\n?><\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Troubleshooting Umum<\/h2>\n\n <h3>1. Perubahan LESS Tidak Muncul<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Hapus cache CSS di folder <code>cache\/<\/code><\/li>\n <li>Clear browser cache<\/li>\n <li>Pastikan file LESS tidak ada syntax error<\/li>\n <\/ul>\n\n <h3>2. Error Kompilasi LESS<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Periksa syntax LESS Anda<\/li>\n <li>Pastikan semua variabel telah didefinisikan sebelum digunakan<\/li>\n <li>Periksa urutan import file di <code>index.less<\/code><\/li>\n <\/ul>\n\n <h3>3. Style Tidak Ter-load<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Pastikan path file LESS benar<\/li>\n <li>Periksa context yang digunakan sesuai<\/li>\n <li>Verifikasi method <code>addStyle()<\/code> dipanggil di <code>init()<\/code><\/li>\n <\/ul>\n\n <h3>4. Konflik dengan Parent Theme<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Gunakan <code>!important<\/code> dengan hati-hati (last resort)<\/li>\n <li>Tingkatkan specificity selector CSS<\/li>\n <li>Override dengan benar menggunakan <code>modifyStyle()<\/code><\/li>\n <\/ul>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Kesimpulan<\/h2>\n <p>LESS adalah alat yang powerful untuk pengembangan tema OJS. Dengan memahami konsep variabel, import file, dan mixins, Anda dapat membuat tema yang maintainable dan mudah dikustomisasi.<\/p>\n\n <div class=\"elkuator-key-points\">\n <h3>Key Points:<\/h3>\n <ul>\n <li>Gunakan variabel untuk nilai yang sering digunakan<\/li>\n <li>Organisasi file dengan baik untuk maintainability<\/li>\n <li>Manfaatkan fitur LESS seperti nesting dan mixins<\/li>\n <li>Pahami sistem kompilasi dan cache OJS<\/li>\n <li>Berhati-hati saat memodifikasi style backend<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"elkuator-success-box\">\n <p><strong>Dengan panduan ini, Anda siap untuk mulai mengembangkan tema OJS yang professional dan mudah di-maintain. Selamat mencoba!<\/strong><\/p>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <p>Jika Anda membutuhkan bantuan lebih lanjut dalam pengembangan tema OJS atau layanan manajemen jurnal profesional, <strong>elkuator<\/strong> siap membantu Anda. Kami menyediakan layanan custom tema, instalasi OJS, hingga pendampingan pengelolaan jurnal yang kredibel dan terindeks.<\/p>\n <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]<\/p>\n","protected":false},"author":2,"featured_media":3017,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,130],"tags":[],"class_list":["post-3000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ojs-pikiran-publik"],"blocksy_meta":[],"acf":[],"yoast_head":"\n<title>Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator\" \/>\n<meta property=\"og:description\" content=\"Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/\" \/>\n<meta property=\"og:site_name\" content=\"elkuator\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-14T15:55:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T16:13:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless-1024x683.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Muhammad Misbahul Munir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Muhammad Misbahul Munir\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"},\"author\":{\"name\":\"Muhammad Misbahul Munir\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/person\\\/28e63356f6ddcd7670e9a661abf39a3c\"},\"headline\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS\",\"datePublished\":\"2026-01-14T15:55:02+00:00\",\"dateModified\":\"2026-01-14T16:13:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"},\"wordCount\":825,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"articleSection\":[\"Blog\",\"OJS\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\",\"url\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\",\"name\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS - elkuator\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"datePublished\":\"2026-01-14T15:55:02+00:00\",\"dateModified\":\"2026-01-14T16:13:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"contentUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\\\/\\\/elkuator.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#website\",\"url\":\"https:\\\/\\\/elkuator.com\\\/\",\"name\":\"elkuator\",\"description\":\"elkuator\",\"publisher\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elkuator.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\",\"name\":\"elkuator\",\"url\":\"https:\\\/\\\/elkuator.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/logo-elkuator-1-scaled.png\",\"contentUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/logo-elkuator-1-scaled.png\",\"width\":2560,\"height\":845,\"caption\":\"elkuator\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/person\\\/28e63356f6ddcd7670e9a661abf39a3c\",\"name\":\"Muhammad Misbahul Munir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"caption\":\"Muhammad Misbahul Munir\"},\"url\":\"https:\\\/\\\/elkuator.com\\\/id\\\/blog\\\/author\\\/muhmisbaa\\\/\"}]}<\/script>\n","yoast_head_json":{"title":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/","og_locale":"id_ID","og_type":"article","og_title":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","og_description":"Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]","og_url":"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/","og_site_name":"elkuator","article_published_time":"2026-01-14T15:55:02+00:00","article_modified_time":"2026-01-14T16:13:02+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless-1024x683.png","type":"image\/png"}],"author":"Muhammad Misbahul Munir","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Muhammad Misbahul Munir","Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#article","isPartOf":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"},"author":{"name":"Muhammad Misbahul Munir","@id":"https:\/\/elkuator.com\/#\/schema\/person\/28e63356f6ddcd7670e9a661abf39a3c"},"headline":"Panduan CSS\/LESS untuk Pengembangan Tema OJS","datePublished":"2026-01-14T15:55:02+00:00","dateModified":"2026-01-14T16:13:02+00:00","mainEntityOfPage":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"},"wordCount":825,"commentCount":0,"publisher":{"@id":"https:\/\/elkuator.com\/#organization"},"image":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"thumbnailUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","articleSection":["Blog","OJS"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/","url":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/","name":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","isPartOf":{"@id":"https:\/\/elkuator.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"image":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"thumbnailUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","datePublished":"2026-01-14T15:55:02+00:00","dateModified":"2026-01-14T16:13:02+00:00","breadcrumb":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage","url":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","contentUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/elkuator.com\/"},{"@type":"ListItem","position":2,"name":"Panduan CSS\/LESS untuk Pengembangan Tema OJS"}]},{"@type":"WebSite","@id":"https:\/\/elkuator.com\/#website","url":"https:\/\/elkuator.com\/","name":"elkuator","description":"elkuator","publisher":{"@id":"https:\/\/elkuator.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elkuator.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/elkuator.com\/#organization","name":"elkuator","url":"https:\/\/elkuator.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/elkuator.com\/#\/schema\/logo\/image\/","url":"https:\/\/elkuator.com\/wp-content\/uploads\/2024\/09\/logo-elkuator-1-scaled.png","contentUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2024\/09\/logo-elkuator-1-scaled.png","width":2560,"height":845,"caption":"elkuator"},"image":{"@id":"https:\/\/elkuator.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elkuator.com\/#\/schema\/person\/28e63356f6ddcd7670e9a661abf39a3c","name":"Muhammad Misbahul Munir","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","caption":"Muhammad Misbahul Munir"},"url":"https:\/\/elkuator.com\/id\/blog\/author\/muhmisbaa\/"}]}},"_links":{"self":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":16,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"predecessor-version":[{"id":3020,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000\/revisions\/3020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/media\/3017"}],"wp:attachment":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/tags?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Panduan CSS\/LESS untuk Tema OJS<\/title>\n <style>\n \/* Reset minimal untuk compatibility dengan WordPress *\/\n .elkuator-article-content * {\n box-sizing: border-box;\n }\n\n .elkuator-article-content {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.8;\n color: #333;\n font-size: 16px;\n }\n\n .elkuator-article-content h1 {\n font-size: 2.2em;\n font-weight: 700;\n line-height: 1.3;\n margin-bottom: 25px;\n margin-top: 0;\n color: #1a1a1a;\n }\n\n .elkuator-article-content h2 {\n font-size: 1.8em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 45px;\n margin-bottom: 20px;\n color: #1a1a1a;\n border-bottom: 2px solid #e8e8e8;\n padding-bottom: 10px;\n }\n\n .elkuator-article-content h3 {\n font-size: 1.4em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 35px;\n margin-bottom: 15px;\n color: #2a2a2a;\n }\n\n .elkuator-article-content h4 {\n font-size: 1.2em;\n font-weight: 600;\n line-height: 1.4;\n margin-top: 28px;\n margin-bottom: 12px;\n color: #3a3a3a;\n }\n\n .elkuator-article-content p {\n margin-bottom: 18px;\n line-height: 1.8;\n color: #444;\n }\n\n .elkuator-article-content ul,\n .elkuator-article-content ol {\n margin-left: 25px;\n margin-bottom: 20px;\n line-height: 1.8;\n }\n\n .elkuator-article-content li {\n margin-bottom: 10px;\n color: #444;\n }\n\n .elkuator-article-content strong {\n font-weight: 600;\n color: #1a1a1a;\n }\n\n .elkuator-article-content code {\n background: #f5f5f5;\n padding: 3px 8px;\n border-radius: 3px;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n color: #d63384;\n border: 1px solid #e0e0e0;\n }\n\n \/* Intro Section *\/\n .elkuator-intro-box {\n background: #f8f9fa;\n border-left: 4px solid #007bff;\n padding: 25px;\n margin: 25px 0;\n border-radius: 4px;\n }\n\n .elkuator-intro-box p {\n margin: 0;\n font-size: 1.05em;\n color: #444;\n }\n\n \/* Benefits List Box *\/\n .elkuator-benefits-box {\n background: #f9f9f9;\n padding: 20px 25px;\n margin: 25px 0;\n border-radius: 4px;\n border: 1px solid #e0e0e0;\n }\n\n .elkuator-benefits-box ul {\n margin: 0;\n }\n\n .elkuator-benefits-box li {\n margin-bottom: 12px;\n }\n\n \/* Code Block *\/\n .elkuator-code-wrapper {\n margin: 25px 0;\n }\n\n .elkuator-code-label {\n background: #343a40;\n color: #adb5bd;\n padding: 6px 15px;\n border-radius: 4px 4px 0 0;\n font-size: 0.75em;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n display: inline-block;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n }\n\n .elkuator-code-block {\n background: #2d3339;\n color: #e9ecef;\n padding: 20px;\n border-radius: 0 4px 4px 4px;\n overflow-x: auto;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n line-height: 1.6;\n margin-top: -1px;\n }\n\n .elkuator-code-block pre {\n margin: 0;\n white-space: pre;\n color: black;\n }\n\n \/* File Structure *\/\n .elkuator-file-structure {\n background: #2d3339;\n color: black;\n padding: 20px;\n border-radius: 4px;\n margin: 25px 0;\n font-family: Consolas, Monaco, 'Courier New', monospace;\n font-size: 0.9em;\n line-height: 1.8;\n border: 1px solid #454d55;\n }\n\n .elkuator-file-structure pre {\n margin: 0;\n color: black;\n }\n\n \/* Info Boxes *\/\n .elkuator-highlight-box {\n background: #fff8e1;\n border-left: 4px solid #ffc107;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-highlight-box p {\n margin: 0;\n }\n\n .elkuator-info-box {\n background: #e7f3ff;\n border-left: 4px solid #2196f3;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-info-box p {\n margin: 0;\n }\n\n .elkuator-warning-box {\n background: #fff3cd;\n border-left: 4px solid #ff9800;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-warning-box strong {\n color: #856404;\n display: block;\n margin-bottom: 8px;\n }\n\n .elkuator-success-box {\n background: #d4edda;\n border-left: 4px solid #28a745;\n padding: 18px 20px;\n margin: 25px 0;\n border-radius: 0 4px 4px 0;\n }\n\n .elkuator-success-box p {\n margin: 0;\n color: #155724;\n }\n\n \/* Key Points Box *\/\n .elkuator-key-points {\n background: #f0f8ff;\n padding: 25px;\n border-radius: 4px;\n margin: 30px 0;\n border: 2px solid #cce5ff;\n }\n\n .elkuator-key-points h3 {\n color: #004085;\n margin-top: 0;\n margin-bottom: 18px;\n font-size: 1.3em;\n }\n\n .elkuator-key-points ul {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n }\n\n .elkuator-key-points li {\n padding-left: 30px;\n position: relative;\n margin-bottom: 12px;\n color: #004085;\n }\n\n .elkuator-key-points li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #28a745;\n font-weight: bold;\n font-size: 1.2em;\n }\n\n \/* Table *\/\n .elkuator-article-content table {\n width: 100%;\n border-collapse: collapse;\n margin: 25px 0;\n font-size: 0.95em;\n }\n\n .elkuator-article-content table th,\n .elkuator-article-content table td {\n border: 1px solid #dee2e6;\n padding: 12px 15px;\n text-align: left;\n }\n\n .elkuator-article-content table th {\n background: #f8f9fa;\n font-weight: 600;\n color: #495057;\n }\n\n .elkuator-article-content table tr:nth-child(even) {\n background: #f8f9fa;\n }\n\n \/* Divider *\/\n .elkuator-divider {\n height: 1px;\n background: #e0e0e0;\n margin: 40px 0;\n border: none;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .elkuator-article-content {\n font-size: 15px;\n }\n\n .elkuator-article-content h1 {\n font-size: 1.8em;\n }\n\n .elkuator-article-content h2 {\n font-size: 1.5em;\n margin-top: 35px;\n }\n\n .elkuator-article-content h3 {\n font-size: 1.25em;\n }\n\n .elkuator-article-content h4 {\n font-size: 1.1em;\n }\n\n .elkuator-code-block {\n font-size: 0.85em;\n padding: 15px;\n }\n\n .elkuator-article-content ul,\n .elkuator-article-content ol {\n margin-left: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"elkuator-article-content\">\n <h1>Panduan CSS\/LESS untuk Pengembangan Tema OJS<\/h1>\n\n <div class=\"elkuator-intro-box\">\n <p><strong>Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP)<\/strong>, PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins.<\/p>\n <\/div>\n\n <h2>Apa itu LESS?<\/h2>\n <p>LESS adalah preprocessor CSS yang memungkinkan Anda menulis kode stylesheet dengan sintaks yang mirip CSS namun dengan kemampuan tambahan yang sangat berguna. File LESS akan secara otomatis dikompilasi menjadi CSS oleh aplikasi OJS\/OMP.<\/p>\n\n <h3>Keuntungan Menggunakan LESS<\/h3>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><strong>Variabel:<\/strong> Menyimpan nilai yang dapat digunakan berulang kali<\/li>\n <li><strong>Import File:<\/strong> Memecah stylesheet besar menjadi file-file kecil yang lebih mudah dikelola<\/li>\n <li><strong>Mixins:<\/strong> Menggunakan kembali grup properti CSS<\/li>\n <li><strong>Nested Rules:<\/strong> Menulis CSS dengan struktur hierarki yang lebih jelas<\/li>\n <\/ul>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Contoh Penggunaan Dasar<\/h2>\n\n <h3>1. Menggunakan Variabel<\/h3>\n <p>Variabel dalam LESS dimulai dengan simbol <code>@<\/code>. Berikut contoh penggunaan variabel untuk warna background:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@background: red;\n\n.pkp_structure_head,\n.pkp_structure_footer {\n background: @background;\n}<\/pre>\n <\/div>\n <\/div>\n\n <p>Variabel ini menjadi lebih powerful ketika digunakan di berbagai tempat:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@background: red;\n\n.pkp_structure_head,\n.pkp_structure_footer {\n background: @background;\n}\n\nbutton {\n border-color: @background;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-highlight-box\">\n <p><strong>\ud83d\udca1 Tips:<\/strong> Dengan cara ini, jika Anda ingin mengubah warna, cukup ubah nilai variabel <code>@background<\/code> di satu tempat saja.<\/p>\n <\/div>\n\n <h3>2. Import File untuk Organisasi yang Lebih Baik<\/h3>\n <p>Seiring berkembangnya stylesheet, Anda akan ingin memecahnya menjadi beberapa file. LESS memungkinkan Anda mengimpor file terpisah dan berbagi variabel antar file tersebut.<\/p>\n\n <h4>Struktur File yang Disarankan:<\/h4>\n <div class=\"elkuator-file-structure\">\n<pre>\/styles\n \u251c\u2500\u2500 variables.less \/\/ Variabel global\n \u251c\u2500\u2500 structure.less \/\/ Style struktur layout\n \u251c\u2500\u2500 forms.less \/\/ Style untuk form\n \u2514\u2500\u2500 index.less \/\/ File utama yang mengimpor semua<\/pre>\n <\/div>\n\n <h4>Contoh isi file:<\/h4>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">variables.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>@bg-primary: #1e6292;\n@bg-secondary: #f5f5f5;\n@text-color: #333;\n@link-color: #1e6292;\n@border-radius: 3px;<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">structure.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>.pkp_structure_head {\n background: @bg-primary;\n color: white;\n}\n\n.pkp_structure_content {\n background: @bg-secondary;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">forms.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>button {\n background: @bg-primary;\n color: white;\n border-radius: @border-radius;\n}\n\ninput[type=\"text\"] {\n border: 1px solid @bg-primary;\n border-radius: @border-radius;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">index.less (file utama)<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Import semua file dalam urutan yang benar\n@import \"variables\";\n@import \"structure\";\n@import \"forms\";<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Implementasi dalam Plugin Tema<\/h2>\n <p>Untuk menggunakan LESS dalam plugin tema OJS, Anda perlu mendefinisikannya dalam file plugin class:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre><?php\nimport('lib.pkp.classes.plugins.ThemePlugin');\n\nclass TutorialThemePlugin extends ThemePlugin {\n public function init() {\n \/\/ Parameter kedua menunjuk ke file LESS di tema Anda\n $this->addStyle('stylesheet', 'styles\/index.less');\n }\n}\n?><\/pre>\n <\/div>\n <\/div>\n\n <h3>Struktur File Plugin Tema Lengkap<\/h3>\n <div class=\"elkuator-file-structure\">\n<pre>\/plugins\/themes\/tutorial-theme\/\n \u251c\u2500\u2500 index.php\n \u251c\u2500\u2500 TutorialThemePlugin.inc.php\n \u251c\u2500\u2500 version.xml\n \u251c\u2500\u2500 locale\/\n \u2502 \u2514\u2500\u2500 en_US\/\n \u2502 \u2514\u2500\u2500 locale.po\n \u2514\u2500\u2500 styles\/\n \u251c\u2500\u2500 index.less\n \u251c\u2500\u2500 variables.less\n \u251c\u2500\u2500 structure.less\n \u2514\u2500\u2500 forms.less<\/pre>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Tips dan Best Practices<\/h2>\n\n <h3>1. Gunakan Variabel untuk Konsistensi<\/h3>\n <p>Definisikan semua warna, ukuran font, spacing, dan nilai yang sering digunakan sebagai variabel di file <code>variables.less<\/code>:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">variables.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Warna\n@color-primary: #1e6292;\n@color-secondary: #6c757d;\n@color-success: #28a745;\n@color-danger: #dc3545;\n\n\/\/ Typography\n@font-family-base: 'Noto Sans', sans-serif;\n@font-size-base: 14px;\n@line-height-base: 1.5;\n\n\/\/ Spacing\n@spacing-xs: 5px;\n@spacing-sm: 10px;\n@spacing-md: 20px;\n@spacing-lg: 40px;\n\n\/\/ Border\n@border-width: 1px;\n@border-color: #ddd;\n@border-radius-base: 3px;<\/pre>\n <\/div>\n <\/div>\n\n <h3>2. Organisasi File yang Sistematis<\/h3>\n <p>Pisahkan stylesheet berdasarkan komponen atau fungsi:<\/p>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><strong>variables.less:<\/strong> Semua variabel global<\/li>\n <li><strong>typography.less:<\/strong> Style untuk tipografi<\/li>\n <li><strong>buttons.less:<\/strong> Style untuk tombol<\/li>\n <li><strong>forms.less:<\/strong> Style untuk form input<\/li>\n <li><strong>navigation.less:<\/strong> Style untuk navigasi<\/li>\n <li><strong>structure.less:<\/strong> Style untuk layout struktur<\/li>\n <li><strong>objects.less:<\/strong> Style untuk objek khusus (artikel, issue, dll)<\/li>\n <\/ul>\n <\/div>\n\n <h3>3. Nested Rules untuk Readability<\/h3>\n <p>LESS memungkinkan Anda menulis CSS bersarang yang lebih mudah dibaca:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>.article-summary {\n padding: @spacing-md;\n border: @border-width solid @border-color;\n \n .title {\n font-size: 18px;\n color: @color-primary;\n \n a {\n text-decoration: none;\n \n &:hover {\n text-decoration: underline;\n }\n }\n }\n \n .meta {\n color: @color-secondary;\n font-size: 12px;\n }\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>4. Mixins untuk Reusability<\/h3>\n <p>Buat mixins untuk style yang sering digunakan:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">LESS<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/\/ Mixin untuk shadow\n.box-shadow(@shadow) {\n -webkit-box-shadow: @shadow;\n -moz-box-shadow: @shadow;\n box-shadow: @shadow;\n}\n\n\/\/ Mixin untuk transition\n.transition(@transition) {\n -webkit-transition: @transition;\n -moz-transition: @transition;\n transition: @transition;\n}\n\n\/\/ Penggunaan\n.card {\n .box-shadow(0 2px 4px rgba(0,0,0,0.1));\n .transition(all 0.3s ease);\n}<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Kompilasi dan Cache<\/h2>\n\n <h3>Proses Kompilasi Otomatis<\/h3>\n <p>Ketika Anda memanggil <code>addStyle()<\/code> dan menunjuk ke file LESS, aplikasi OJS akan:<\/p>\n <ol>\n <li>Secara otomatis mengkompilasi file LESS menjadi CSS<\/li>\n <li>Menyimpan hasil kompilasi di folder <code>cache\/<\/code><\/li>\n <li>Memuat file CSS yang sudah dikompilasi di frontend<\/li>\n <\/ol>\n\n <h3>Menangani Cache<\/h3>\n <p>Jika Anda mengubah file LESS dan perubahan tidak muncul:<\/p>\n <ol>\n <li>Hapus file CSS di folder <code>cache\/<\/code><\/li>\n <li>Reload halaman - OJS akan mengkompilasi ulang file LESS<\/li>\n <li><strong>Jangan pernah<\/strong> mengedit file CSS di folder <code>cache\/<\/code> secara langsung karena akan ditimpa<\/li>\n <\/ol>\n\n <h3>Force Recompilation<\/h3>\n <p>Untuk memaksa kompilasi ulang saat development:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">Bash<\/div>\n <div class=\"elkuator-code-block\">\n<pre># Hapus cache CSS\nrm cache\/t_compile\/*.css\nrm cache\/t_cache\/*.css<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Menggunakan CSS Biasa<\/h2>\n <p>Jika LESS terasa terlalu kompleks, Anda tetap bisa menggunakan CSS biasa. Cukup simpan file dengan ekstensi <code>.less<\/code> dan tulis CSS standar di dalamnya:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">styles\/simple.less<\/div>\n <div class=\"elkuator-code-block\">\n<pre>\/* CSS biasa juga berfungsi *\/\n.header {\n background: #1e6292;\n color: white;\n padding: 20px;\n}<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-info-box\">\n <p><strong>\u2139\ufe0f Catatan:<\/strong> Kekuatan LESS akan lebih terasa saat Anda mengembangkan tema yang lebih kompleks atau membuat child theme.<\/p>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Context untuk Stylesheet<\/h2>\n <p>OJS mendukung berbagai context untuk memuat stylesheet:<\/p>\n\n <h3>1. Frontend Context (Default)<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('stylesheet', 'styles\/index.less');\n\/\/ Atau eksplisit\n$this->addStyle('stylesheet', 'styles\/index.less', [\n 'contexts' => 'frontend'\n]);<\/pre>\n <\/div>\n <\/div>\n\n <p>Stylesheet akan dimuat di template dengan:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">Smarty<\/div>\n <div class=\"elkuator-code-block\">\n<pre>{load_stylesheet context=\"frontend\" stylesheets=$stylesheets}<\/pre>\n <\/div>\n <\/div>\n\n <h3>2. Backend Context<\/h3>\n <p>Untuk styling backend editorial:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->modifyStyle('pkpLib', [\n 'addLess' => array('styles\/backend.less')\n]);<\/pre>\n <\/div>\n <\/div>\n\n <div class=\"elkuator-warning-box\">\n <strong>\u26a0\ufe0f Catatan Penting:<\/strong>\n <p>Berhati-hatilah saat memodifikasi style backend. Backend adalah aplikasi yang kompleks dan perubahan style dapat memiliki efek yang tidak diinginkan.<\/p>\n <\/div>\n\n <h3>3. HTML Galley Context<\/h3>\n <p>Untuk styling HTML galley:<\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('htmlGalley', 'styles\/galley.less', [\n 'contexts' => 'htmlGalley'\n]);<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Memodifikasi Style yang Ada<\/h2>\n\n <h3>Menambahkan File LESS ke Style Existing<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n \/\/ Menambahkan file LESS tambahan ke style 'default'\n $this->modifyStyle('default', [\n 'addLess' => array('styles\/custom-colors.less')\n ]);\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>Menambahkan Variabel LESS<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n $customColors = \"\n @primary-color: #ff6600;\n @secondary-color: #333333;\n \";\n \n $this->modifyStyle('default', [\n 'addLessVariables' => $customColors\n ]);\n}<\/pre>\n <\/div>\n <\/div>\n\n <h3>Menghapus Style<\/h3>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>public function init() {\n \/\/ Menghapus style bernama 'default'\n $this->removeStyle('default');\n}<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Parameter Lengkap addStyle()<\/h2>\n <p>Method <code>addStyle()<\/code> menerima berbagai parameter opsional:<\/p>\n\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle($name, $style, $args);<\/pre>\n <\/div>\n <\/div>\n\n <p><strong>Parameter $args yang tersedia:<\/strong><\/p>\n <div class=\"elkuator-benefits-box\">\n <ul>\n <li><code>'contexts'<\/code>: Kapan memuat stylesheet ('frontend', 'backend', 'htmlGalley')<\/li>\n <li><code>'priority'<\/code>: Mengontrol urutan style dimuat<\/li>\n <li><code>'addLess'<\/code>: Array file LESS tambahan untuk diproses<\/li>\n <li><code>'addLessVariables'<\/code>: String variabel LESS untuk di-parse sebelum kompilasi<\/li>\n <li><code>'inline'<\/code>: Boolean, apakah style langsung di-output sebagai inline style<\/li>\n <\/ul>\n <\/div>\n\n <p><strong>Contoh lengkap:<\/strong><\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre>$this->addStyle('custom-style', 'styles\/custom.less', [\n 'contexts' => 'frontend',\n 'priority' => STYLE_SEQUENCE_CORE,\n 'addLess' => array('styles\/variables.less', 'styles\/mixins.less')\n]);<\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Child Theme dan LESS<\/h2>\n <p>Salah satu kekuatan LESS adalah kemudahan dalam membuat child theme. Child theme dapat mewarisi dan memodifikasi style parent theme dengan mudah.<\/p>\n\n <p><strong>Contoh Child Theme:<\/strong><\/p>\n <div class=\"elkuator-code-wrapper\">\n <div class=\"elkuator-code-label\">PHP<\/div>\n <div class=\"elkuator-code-block\">\n<pre><?php\nimport('lib.pkp.classes.plugins.ThemePlugin');\n\nclass MyChildThemePlugin extends ThemePlugin {\n public function init() {\n \/\/ Set parent theme\n $this->setParent('defaultthemeplugin');\n \n \/\/ Modifikasi style parent dengan menambahkan variabel custom\n $this->modifyStyle('stylesheet', [\n 'addLess' => array('styles\/custom-variables.less')\n ]);\n \n \/\/ Tambahkan stylesheet tambahan\n $this->addStyle('child-style', 'styles\/child.less');\n }\n}\n?><\/pre>\n <\/div>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Troubleshooting Umum<\/h2>\n\n <h3>1. Perubahan LESS Tidak Muncul<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Hapus cache CSS di folder <code>cache\/<\/code><\/li>\n <li>Clear browser cache<\/li>\n <li>Pastikan file LESS tidak ada syntax error<\/li>\n <\/ul>\n\n <h3>2. Error Kompilasi LESS<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Periksa syntax LESS Anda<\/li>\n <li>Pastikan semua variabel telah didefinisikan sebelum digunakan<\/li>\n <li>Periksa urutan import file di <code>index.less<\/code><\/li>\n <\/ul>\n\n <h3>3. Style Tidak Ter-load<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Pastikan path file LESS benar<\/li>\n <li>Periksa context yang digunakan sesuai<\/li>\n <li>Verifikasi method <code>addStyle()<\/code> dipanggil di <code>init()<\/code><\/li>\n <\/ul>\n\n <h3>4. Konflik dengan Parent Theme<\/h3>\n <p><strong>Solusi:<\/strong><\/p>\n <ul>\n <li>Gunakan <code>!important<\/code> dengan hati-hati (last resort)<\/li>\n <li>Tingkatkan specificity selector CSS<\/li>\n <li>Override dengan benar menggunakan <code>modifyStyle()<\/code><\/li>\n <\/ul>\n\n <hr class=\"elkuator-divider\">\n\n <h2>Kesimpulan<\/h2>\n <p>LESS adalah alat yang powerful untuk pengembangan tema OJS. Dengan memahami konsep variabel, import file, dan mixins, Anda dapat membuat tema yang maintainable dan mudah dikustomisasi.<\/p>\n\n <div class=\"elkuator-key-points\">\n <h3>Key Points:<\/h3>\n <ul>\n <li>Gunakan variabel untuk nilai yang sering digunakan<\/li>\n <li>Organisasi file dengan baik untuk maintainability<\/li>\n <li>Manfaatkan fitur LESS seperti nesting dan mixins<\/li>\n <li>Pahami sistem kompilasi dan cache OJS<\/li>\n <li>Berhati-hati saat memodifikasi style backend<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"elkuator-success-box\">\n <p><strong>Dengan panduan ini, Anda siap untuk mulai mengembangkan tema OJS yang professional dan mudah di-maintain. Selamat mencoba!<\/strong><\/p>\n <\/div>\n\n <hr class=\"elkuator-divider\">\n\n <p>Jika Anda membutuhkan bantuan lebih lanjut dalam pengembangan tema OJS atau layanan manajemen jurnal profesional, <strong>elkuator<\/strong> siap membantu Anda. Kami menyediakan layanan custom tema, instalasi OJS, hingga pendampingan pengelolaan jurnal yang kredibel dan terindeks.<\/p>\n <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]<\/p>\n","protected":false},"author":2,"featured_media":3017,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,130],"tags":[],"class_list":["post-3000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ojs-pikiran-publik"],"blocksy_meta":[],"acf":[],"yoast_head":"\n<title>Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator\" \/>\n<meta property=\"og:description\" content=\"Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/\" \/>\n<meta property=\"og:site_name\" content=\"elkuator\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-14T15:55:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T16:13:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless-1024x683.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Muhammad Misbahul Munir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Muhammad Misbahul Munir\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"},\"author\":{\"name\":\"Muhammad Misbahul Munir\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/person\\\/28e63356f6ddcd7670e9a661abf39a3c\"},\"headline\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS\",\"datePublished\":\"2026-01-14T15:55:02+00:00\",\"dateModified\":\"2026-01-14T16:13:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"},\"wordCount\":825,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"articleSection\":[\"Blog\",\"OJS\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\",\"url\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\",\"name\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS - elkuator\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"datePublished\":\"2026-01-14T15:55:02+00:00\",\"dateModified\":\"2026-01-14T16:13:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"contentUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cssless.png\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/panduan-css-less-untuk-pengembangan-tema-ojs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\\\/\\\/elkuator.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Panduan CSS\\\/LESS untuk Pengembangan Tema OJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#website\",\"url\":\"https:\\\/\\\/elkuator.com\\\/\",\"name\":\"elkuator\",\"description\":\"elkuator\",\"publisher\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elkuator.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#organization\",\"name\":\"elkuator\",\"url\":\"https:\\\/\\\/elkuator.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/logo-elkuator-1-scaled.png\",\"contentUrl\":\"https:\\\/\\\/elkuator.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/logo-elkuator-1-scaled.png\",\"width\":2560,\"height\":845,\"caption\":\"elkuator\"},\"image\":{\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elkuator.com\\\/#\\\/schema\\\/person\\\/28e63356f6ddcd7670e9a661abf39a3c\",\"name\":\"Muhammad Misbahul Munir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g\",\"caption\":\"Muhammad Misbahul Munir\"},\"url\":\"https:\\\/\\\/elkuator.com\\\/id\\\/blog\\\/author\\\/muhmisbaa\\\/\"}]}<\/script>\n","yoast_head_json":{"title":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/","og_locale":"id_ID","og_type":"article","og_title":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","og_description":"Panduan CSS\/LESS untuk Tema OJS Panduan CSS\/LESS untuk Pengembangan Tema OJS Dalam pengembangan tema untuk Open Journal Systems (OJS) dan Open Monograph Press (OMP), PKP menggunakan sintaks LESS untuk menulis kode yang nantinya akan dikompilasi menjadi file CSS. LESS memberikan fleksibilitas lebih dalam pengelolaan stylesheet dengan fitur-fitur seperti variabel, import file, dan mixins. Apa itu […]","og_url":"https:\/\/elkuator.com\/id\/panduan-css-less-untuk-pengembangan-tema-ojs\/","og_site_name":"elkuator","article_published_time":"2026-01-14T15:55:02+00:00","article_modified_time":"2026-01-14T16:13:02+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless-1024x683.png","type":"image\/png"}],"author":"Muhammad Misbahul Munir","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Muhammad Misbahul Munir","Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#article","isPartOf":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"},"author":{"name":"Muhammad Misbahul Munir","@id":"https:\/\/elkuator.com\/#\/schema\/person\/28e63356f6ddcd7670e9a661abf39a3c"},"headline":"Panduan CSS\/LESS untuk Pengembangan Tema OJS","datePublished":"2026-01-14T15:55:02+00:00","dateModified":"2026-01-14T16:13:02+00:00","mainEntityOfPage":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"},"wordCount":825,"commentCount":0,"publisher":{"@id":"https:\/\/elkuator.com\/#organization"},"image":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"thumbnailUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","articleSection":["Blog","OJS"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/","url":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/","name":"Panduan CSS\/LESS untuk Pengembangan Tema OJS - elkuator","isPartOf":{"@id":"https:\/\/elkuator.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"image":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage"},"thumbnailUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","datePublished":"2026-01-14T15:55:02+00:00","dateModified":"2026-01-14T16:13:02+00:00","breadcrumb":{"@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#primaryimage","url":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","contentUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2026\/01\/cssless.png","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/elkuator.com\/panduan-css-less-untuk-pengembangan-tema-ojs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/elkuator.com\/"},{"@type":"ListItem","position":2,"name":"Panduan CSS\/LESS untuk Pengembangan Tema OJS"}]},{"@type":"WebSite","@id":"https:\/\/elkuator.com\/#website","url":"https:\/\/elkuator.com\/","name":"elkuator","description":"elkuator","publisher":{"@id":"https:\/\/elkuator.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elkuator.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/elkuator.com\/#organization","name":"elkuator","url":"https:\/\/elkuator.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/elkuator.com\/#\/schema\/logo\/image\/","url":"https:\/\/elkuator.com\/wp-content\/uploads\/2024\/09\/logo-elkuator-1-scaled.png","contentUrl":"https:\/\/elkuator.com\/wp-content\/uploads\/2024\/09\/logo-elkuator-1-scaled.png","width":2560,"height":845,"caption":"elkuator"},"image":{"@id":"https:\/\/elkuator.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elkuator.com\/#\/schema\/person\/28e63356f6ddcd7670e9a661abf39a3c","name":"Muhammad Misbahul Munir","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d3dc9c695fe8c0789d30c6ebf41a4f2b5866b3150a1518add2cafe81104e4c45?s=96&d=mm&r=g","caption":"Muhammad Misbahul Munir"},"url":"https:\/\/elkuator.com\/id\/blog\/author\/muhmisbaa\/"}]}},"_links":{"self":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":16,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"predecessor-version":[{"id":3020,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/posts\/3000\/revisions\/3020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/media\/3017"}],"wp:attachment":[{"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elkuator.com\/id\/wp-json\/wp\/v2\/tags?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}