Apakah Anda bosan melihat tombol menu Firefox oranye? Antarmuka Firefox sepenuhnya dapat disesuaikan, sehingga Anda dapat mengubah warna, teks, dan properti lainnya dari tombol menu Firefox untuk membuat tampilan khusus Anda sendiri.
Untuk mengubah tampilan tombol menu Firefox, kita akan mengedit file userChrome.css. File ini memungkinkan Anda mengubah tampilan bagian mana pun dari Firefox, serta fungsinya.
Sebelum menyelam ke dalam pengeditan file userChrome.css, kita akan menginstal add-on, yang disebut ChromEdit Plus, yang akan memungkinkan kita mengedit file dengan mudah dan menyimpannya dalam format yang benar. Klik tautan berikut untuk membuka halaman web ChromEdit Plus.
http://webdesigns.ms11.net/chromeditp.html
Klik tombol Tambahkan ke Firefox di halaman.
Pesan berikut mungkin ditampilkan. Klik Izinkan untuk melanjutkan pemasangan add-on ChromEdit Plus.
CATATAN: Berhati-hatilah dengan apa yang Anda izinkan saat memasang ekstensi dan perangkat lunak lainnya. Jika Anda tidak yakin tentang produk atau tidak mempercayai perusahaan, jangan menginstal. Kami menguji ChromEdit Plus dan menemukannya aman dan tepercaya.
Kotak dialog Instalasi Perangkat Lunak ditampilkan. Klik Pasang Sekarang, yang mungkin tidak tersedia sampai hitungan mundur selesai.
CATATAN: Anda dapat mengubah panjang hitungan mundur pada tombol Install, tetapi kami tidak menyarankan untuk menonaktifkannya.
Anda harus me-restart Firefox untuk menyelesaikan instalasi. Klik Mulai Ulang Sekarang pada dialog popup.
Setelah Firefox dimulai ulang, tombol ChromEdit Plus ditambahkan di sebelah kanan kotak Alamat. Klik untuk membuka jendela ChromEdit Plus.
Ada tiga tab secara default di jendela ChromEdit Plus. Kami akan mengedit file userChrome.css, yang ada di tab pertama. Jika tab kosong, salin dan tempel teks berikut ke tab userChrome.css dan klik Simpan. Ini memberi Anda file userChrome.css default.
@namespace url ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# tombol appmenu
latar belakang: #orange! penting;
# dropmener button-appmenu: sebelum
konten: "Firefox"! penting;
warna: #FFFFFF! penting;
# appmenu-button .button-text
display: tidak ada! penting;
Anda mungkin sudah memiliki file userChrome.css, dalam hal ini sudah ada teks di tab userChrome.css. Salin semua teks di atas kecuali untuk baris pertama, baris @namespace, dan tempelkan ke tab di suatu tempat setelah baris @namespace. Jika Anda ingin menyimpan apa yang sudah Anda miliki, Anda dapat menempelkan teks di atas pada akhir file.
PENTING: Pastikan semua tanda kutip di penggunaChrome.css BUKAN kutipan cerdas, termasuk yang ada di baris @namespace. Mereka seharusnya adalah kutipan biasa dan lurus. Jika salah satu dari mereka adalah kutipan pintar, file itu tidak akan mempengaruhi tampilan Firefox sama sekali.
Klik Restart untuk me-restart Firefox menggunakan file userChrome.css yang baru atau direvisi.
Dalam contoh ini, kita akan mengubah warna latar belakang menjadi biru gelap dan mengubah teks "Firefox" menjadi "How-To Geek".
Untuk mengubah warna latar belakang, ubah teks "#orange" pada garis "latar belakang" di bagian "# appmenu-button" ke warna yang berbeda, menggunakan kode warna hex, atau kode warna HTML. Sebagai contoh, kami memilih warna biru gelap dengan kode warna hex # 2C4362.
CATATAN: Untuk mengetahui kode warna hex untuk warna yang Anda inginkan, lihat artikel kami tentang mendapatkan kode warna hex dari warna desimal RGB, memilih warna dari mana saja di layar, dan mendapatkan kode warna dalam berbagai format.
Untuk mengubah teks pada tombol, ubah teks "Firefox" pada baris "konten" di bagian "# appmenu-button dropmarker: before" ke teks yang Anda inginkan, seperti "How-To Geek". Kami menambahkan spasi setelah teks untuk memiliki lebih banyak ruang antara teks dan panah drop-down pada tombol.
Anda dapat memilih untuk mengubah warna teks juga dengan mengubah baris “warna” di bagian “# appmenu-button dropmarker: before” yang sama. Kami meninggalkan warna teks sebagai putih (#FFFFFF), tetapi Anda dapat mengubahnya menjadi sesuatu seperti abu-abu terang (# F2F2F2), atau sesuatu seperti itu.
Klik Simpan, lalu Mulai ulang agar perubahan diterapkan.
Tombol sekarang berwarna biru gelap dan mengatakan "How-To Geek".
Anda juga dapat menambahkan gambar latar belakang ke tombol, selain mengubah warna latar belakang. Kami membuat gambar yang memiliki favicon How-To Geek di sebelah kiri dan latar belakang transparan sehingga warna latar belakang biru gelap ditampilkan. Untuk menambahkan gambar latar belakang ke tombol Anda, tambahkan baris berikut ke bagian "# appmenu-button", mengubah jalur dalam tanda kutip ke lokasi gambar Anda di komputer Anda. Tinggalkan "file: ///" di jalur.
background-image: url ("file: /// C: /Users/Lori/Pictures/htg_background.png")! penting;
Klik Simpan dan Mulai lagi.
Sekarang tombol kami selesai.
Anda juga dapat menyesuaikan tombol menu Firefox dengan mengonversinya menjadi ikon. Kami juga telah menerbitkan banyak tips dan tweak lainnya untuk mendapatkan hasil maksimal dari Firefox.
