Kostumisasi Mozila Firefox dengan mengubah userChrome.css

Intro

Karena di Grup Facebook Lokal banyak yang tanya tentang bagaimana cara saya melakukan Kostumisasi pada Firefox, maka saya buatlah tutorial ini.

Requirements

Mozila Firefox
Skill CSS Dasar (Copy Paste juga boleh)

Tutorial

Pertama, kita masuk dulu ke menu config, buka melalui search bar dengan mengetikkan about:config. Klik Accept the Risk and Continue.

Kedua, cari toolkit.legacyUserProfileCustomizations.stylesheets. Lalu ubah valuenya dari False menjadi True.

Langkah selanjutnya yaitu membuat/menyunting file userChrome.css. Cara mengetahui direktori penyimpanan file confignya yaitu : Pergi ke Menu Help > Troubleshooting Information.

Troubleshooting Information

Cari menggunakan fitur search (Ctrl+F) dengan query Profile Directory, lalu klik Open Directory.

Directory User Firefox

Maka terbukalah directory konfigurasinya, disini cari directory chrome (jika tidak ada buatlah directorynya).

Setelah kalian menemukan/membuat directory chrome, buat/edit file yang bernamakan userChrome.css.

Isi settingnya sesuai kebutuhan kalian. Untuk yang saya gunakan, saya hanya menyembunyikan Navbar mozilla seperti gambar GIF dibawah.

Contoh Konfigurasi (Klik untuk play GIF)

Kalau kalian mau mencoba yang seperti itu, kalian bisa menggunakan config saya dibawah.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
  #TabsToolbar > * {
    visibility: collapse;
  }
  #main-window:not([customizing]) #navigator-toolbox:not(:focus-within):not(:hover) {
    margin-top: -92px;
  }
  #navigator-toolbox {
    transition: 0.2s margin-top ease-out;
  }
  #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none;
  }
}

Save file, lalu restart firefox.

Semoga tutorial ini bermanfaat. Sekian dan Terimakasih