28Jun

Cara Menyesuaikan Tampilan Tombol Menu Firefox Oranye

Apakah Anda bosan melihat tombol menu oranye Firefox? Antarmuka Firefox benar-benar dapat disesuaikan, sehingga Anda dapat mengubah warna, teks, dan properti lainnya dari tombol menu Firefox untuk membuat tampilan kustom Anda sendiri.

Untuk mengubah tampilan tombol menu Firefox, kita akan mengedit file userChrome.css. File ini memungkinkan Anda untuk mengubah tampilan dari setiap bagian dari Firefox, serta fungsinya.

Sebelum menyelam dalam mengedit berkas penggunaChrome.css, kami akan memasang add-on, yang disebut ChromEdit Plus, yang memungkinkan kami mengedit file dengan mudah dan menyimpannya dalam format yang benar. Klik link berikut untuk membuka halaman web ChromEdit Plus.

http: //webdesigns.ms11.net/ chromeditp.html

Klik tombol Add to Firefox pada halaman.

Pesan berikut mungkin ditampilkan. Klik Izinkan untuk terus memasang 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 instal. Kami menguji ChromEdit Plus dan menemukannya aman dan dapat diandalkan.

Kotak dialog Installation Software akan ditampilkan. Klik Install Now, yang mungkin tidak tersedia sampai hitungan mundur selesai. CATATAN

: Anda dapat mengubah panjang hitungan mundur pada tombol Install, namun kami tidak menyarankan untuk menonaktifkannya.

Anda harus me-restart Firefox untuk menyelesaikan instalasi. Klik Restart Now pada dialog popup.

Setelah Firefox restart, tombol ChromEdit Plus ditambahkan di sebelah kanan kotak Address. 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 tempelkan teks berikut ke tab userChrome.css dan klik Save. Ini memberi Anda file userChrome.css default.

@namespace url( "http: //www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul");
# appmenu-button{
background: #orange! Important;
}
# penghapus indikator menu aplikasi: sebelum konten{
: "Firefox" penting;Warna
: #FFFFFF! Penting;
}
# appmenu-button. button-text{ display
: tidak ada yang penting;
}

Anda mungkin sudah memiliki file userChrome.css, dalam hal ini akan ada teks pada tab userChrome.css. Salin semua teks di atas kecuali baris pertama, baris @namespace, dan tempelkan ke tab di suatu tempat berdasarkan baris @namespace. Jika Anda ingin menyimpan apa yang sudah Anda miliki, Anda dapat menempelkan teks di atas di akhir file.

PENTING: Pastikan semua tanda kutip di userChrome.css TIDAK kutipan cerdas, termasuk yang ada di baris @namespace. Mereka seharusnya biasa-biasa saja. Jika salah satu dari mereka adalah kutipan cerdas, file tersebut tidak akan mempengaruhi tampilan Firefox sama sekali.

Klik Restart untuk me-restart Firefox menggunakan fileChrome.css yang baru atau yang telah direvisi.

Dalam contoh ini, kita akan mengubah warna latar belakang menjadi biru tua dan mengubah teks "Firefox" menjadi "How-To Geek".

Untuk mengubah warna latar belakang, ubah teks "#orange" pada baris "latar belakang" di bagian "#menu menu" ke warna yang berbeda, dengan menggunakan kode warna hex, atau kode warna HTML.Misalnya kita memilih warna biru tua 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 RGB desimal, memilih warna dari manapun di layar, dan mendapatkan kode warna dalam berbagai format.

Untuk mengubah teks pada tombolnya, ubah teks "Firefox" pada baris "konten" di bagian "#menu menu-app dropmarker: before" ke teks yang Anda inginkan, seperti "How-To Geek".Kami menambahkan sebuah spasi setelah teks memiliki lebih banyak ruang antara teks dan panah drop-down pada tombolnya.

Anda dapat memilih untuk mengubah warna teks juga dengan mengubah garis "warna" di bagian "# appmenu-button dropmarker: before" yang sama. Kami membiarkan teks berwarna putih( #FFFFFF), tapi Anda bisa mengubahnya menjadi sesuatu seperti abu-abu muda( # F2F2F2), atau sejenisnya.

Klik Save dan kemudian Restart agar perubahannya berlaku.

Tombolnya sekarang biru tua dan berbunyi "How-To Geek".

Anda juga bisa menambahkan gambar latar 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 tua terlihat. Untuk menambahkan gambar latar ke tombol Anda, tambahkan baris berikut ke bagian "# appmenu-button", ubah jalur di tanda petik ke lokasi gambar Anda di komputer Anda. Tinggalkan "file: ///" di jalan.

background-image: url( "file: /// C: /Users/Lori/Pictures/ htg_background.png") penting;

Klik Save and Restart lagi.

Sekarang tombol kita sudah selesai.

Anda juga dapat menyesuaikan tombol menu Firefox dengan mengubahnya menjadi sebuah ikon. Kami juga telah menerbitkan banyak tip dan tweak untuk mendapatkan hasil maksimal dari Firefox.