Panduan Kustomisasi UI Firefox – Mozilla Firefox merupakan salah satu browser legendaris yang masih eksis sampai sekarang ini, bahkan Firefox masih menggunakan dan terus mengembangkan engine milik mereka sendiri yaitu Gecko Quantum. Kenapa saya bilang begitu? karena browser lain seperti Edge dan Opera sudah beralih dari engine mereka sendiri ke engine Blink / Chromium rancangan Google.

Meski tidak sempurna, namun Firefox tetap bisa kita andalkan untuk produktivitas. Satu yang saya suka adalah komunitas pengguna Firefox sangat aktif membuat berbagai hal menarik untuk memaksimalkan pengalaman kita saat browsing dengan Firefox dengan berbagai Add-Ons dan kustomisasi.

Baca Juga : Alasan Untuk Kembali Menggunakan Browser Mozilla Firefox

Nah, pada artikel kali ini saya akan mengajak kalian untuk belajar melakukan kustomisasi UI (User Interface) dari browser Mozilla Firefox agar jadi lebih rapi dan tidak terlalu memakan ruang di layar. Kustomisasi UI ini dapat memperluas Main Viewing Panel atau tempat dimana kita melihat halaman situs yang sedang kita kunjungi. Ini akan sangat bermanfaat untuk kalian yang masih pakai monitor dengan resolusi HD baik itu 720p (1280×720) atau 768p (1366×768).

Langsung saja, berikut panduan lengkapnya. Silahkan ikuti setiap langkah dengan runtut dan teliti agar tidak ada kesalahan yang terjadi karena ada langkah yang terlewat.

Kustomisasi UI Firefox dengan CSS & Sidebery

Melalui panduan dibawah, saya akan membagikan langkah-langkah untuk mengubah User Interface browser Mozilla Firefox kalian menjadi seperti yang saya gunakan saat ini. UI yang saya pakai sekarang adalah Gale for Firefox yang dibuat oleh mgastonportillo.

Baca Juga : Browsing Aman dan Tanpa Iklan Pakai NextDNS

1. Mempersiapkan Alat

a. Microsoft Visual Studio Code

Sesuai dengan namanya, Visual Studio Code akan kita gunakan sebagai text editor untuk mengetik code CSS. Kalian bisa unduh aplikasi ini melalui Mircosoft Store atau melalui situs resminya disini.

b. userChrome.css

userChrome.css adalah file yang akan kita gunakan untuk menampung coding CSS. File ini akan kita simpan ke folder User Profile Mozilla Firefox kita. Untuk yang tidak paham coding CSS, tenang! di artikel ini, saya akan tunjukkan situs dimana kalian bisa dapat code yang bisa kalian pakai yang dibagikan oleh para kerator.

Berikut panduan lengkap untuk membuat userChrome.css :

1. Buka browser Firefox kalian.
2. Klik ikon Menu, lalu pilih Help.
3. Pada daftar pilihan, klik pada More Troubleshooting Information.
4. Akan muncul tab baru, pada tabel, klik tombol Open Directory pada kolom Profile Directory.
5. Akan muncul File Explorer yang membawa kalian ke folder Profile Akun Mozilla kalian. Pada folder tersebut, buat folder baru dengan nama chrome (harus lowercase alias huruf kecil semua).
6. Masuk ke folder chrome lalu buat file baru dengan nama userChrome.css.
7. Buka userChrome.css kalian lalu minimize dulu karena nanti masih harus digunakan.

Baca Juga : Cara Streaming Siaran TV Indonesia Pakai VLC / VideoLAN (PC dan Mobile)

c. Sidebery

Sidebery adalah sebuah Add-Ons buatan mbnuqw yang cukup popular dikalangan pengguna Firefox karena menawarkan fitur Vertical Tab yang tidak kalah powerful dengan Sidebar milik Edge. Maka dari itu, saya pribadi lebih memilih untuk menggunakan Sidebery yang tersedia di situs Firefox Add-Ons.

Kalian bisa kunjungi halaman berikut ini untuk mengunduh dan memasang Sidebery ke browser kalian.

2. Mengkustomisasi UI

Nah! Setelah ketiga alat yang kalian perlukan untuk melakukan kustomisasi tampilan dari Mozilla Firefox sudah siap semua. Mari kita mulai proses kustomisasinya. Silahkan ikuti langkah-langkah berikut ini :

a. Pengaturan Firefox

Untuk mengaktifkan kustomisasi tampilan Firefox, kalian perlu mengubah sedikit pengaturan dari browser Firefox. Pengubahan ini akan memberikan izin kepada kalian untuk menambahkan kode CSS untuk mengubah tampilan default dari Mozilla Firefox. Berikut caranya :

• Buka tab baru di browser Mozilla Firefox kalian.
• Ketik alamat about:config.
• Pada kolom pencarian ketik toolkit.legacyUserProfileCustomizations.stylesheets (besar kecil huruf harus tepat).
• Setelah itu, double click pada teks false untuk mengubahnya menjadi enable.

Dengan mengaktifkan toolkit.legacyUserProfileCustomizations.stylesheets, kalian telah membuka izin kustomisasi tampilan Firefox menggunakan stylesheets atau CSS.

b. FirefoxCSS Store

Langkah pertama dalam untuk mengkustomisasi tampilan Firefox kalian adalah dengan berkunjung ke FirefoxCSS Store, salah satu situs untuk mencari preset userChrome dan Sidebery / TreeStyleTab. Kalian bisa melihat berbagai koleksi preset tampilan yang ada dan setelah itu pilih tampilan mana yang kalian sukai. Kalian akan diarahakan untuk mengunduh code dari tampialn tersebut atau diarahkan ke halaman github dari project preset tampilan tersebut.

c. CSS userChrome

Setelah mendapatkan preset tampilan Firefox yang kalian sukai, ikuti langkah berikut :

1. Copy code userChrome yang disediakan oleh kreator preset.
2. Paste code ke file userChrome.css milik kalian. Lokasinya di C:Users-NamaUser-AppDataRoamingMozillaFirefoxProfiles-KodeProfile-.default-release/chrome.
3. Jangan lupa di save.

Baca Juga : Beberapa Alasan Kenapa Chromebook Layak Untuk Dipertimbangkan

d. CSS Sidebery

1. Copy code CSS Sidebery yang disediakan oleh kreator preset.
2. Paste code tersebut ke kolom Styles Editor di halaman Setting Sidebery kalian.

Setelah selesai menerapkan code CSS ke Sidebery, silahkan restart Firefox kalian (tutup, lalu buka lagi) untuk melihat perubahan pada tampilan. Jika kalian sudah merasa puas dengan hasilnya. Maka langkah untuk kustomisasi tampilan sudah selesai. Namun, kalian masih bisa melakukan Kustomisasi Lanjutan bila merasa masih kurang puas dengan hasil yang sudah kalian dapatkan.

e. Kustomisasi Lanjutan

Pada langkah ini, kalian perlu memahami mengenai berbagai perintah dalam bahasa pemrograman CSS. Kalian bisa lihat berbagai panduan, diskusi, serta berbagai resource yang dibagikan oleh pengguna Firefox ke internet. Kalian juga bisa melihat dokumentasi dan panduan yang disediakan oleh userChrome dan Sidebery. Berikut beberapa sumber yang bisa kalian gunakan :

• userChrome.org
• UserStyles.org
• Subreddit FirefoxCSS
• mozillaZine forums
• CustomCSSforFx
• FirefoxCSSHacks
• UserChrome-Tweaks
• FirefoxCSS-Store
• TreeStyleTab Wiki
• Sidebery Wiki
• Firefox Browser Toolbox
• Firefox Support

Baca Juga : Panduan Memilih Cooling Pad yang Sesuai Dengan Laptopmu

Itulah panduan lengkap untuk Kustomisasi UI Firefox kalian menggunakan userChrome CSS dan add-ons Sidebery. Semoga panduan dari saya ini dapat bermanfaat dan membantu kalian untuk mendapatkan user interface Firefox yang lebih clean dan lebih simple sehingga kalian bisa mendapatkan ruang browsing yang lebih luas.

Bila ada pertanyaan atau perlu penjelasan lebih rinci pada langkah tertentu, silahkan berkomentar via kolom dibawah, akan saya bantu semaksimal mungkin. Terima kasih sudah berkunjung!