Bagaimana Menyesuaikan Lihat Pustaka Firefox untuk Kebolehbaikkan Lebih Baik
Pandangan Pembaca adalah ciri popular penyemak imbas Firefox, itu mengubah penampilan halaman web, dan menjadikannya lebih mudah dibaca oleh membuang kekacauan visual seperti imej, iklan, tajuk, dan sidebars. Pandangan Pustaka, bagaimanapun tidak tersedia, untuk semua halaman rumah.
Jika ciri ini tersedia untuk halaman tertentu, anda akan dapati ikon untuk membolehkan ia dalam bentuk a ikon buku kecil dipaparkan di sebelah kanan bar alamat.
Terdapat beberapa pilihan terbina dalam yang membolehkan pembaca menyesuaikan rupa Pandangan Pustaka. Kami akan melihat pilihan tersebut sebelum menunjukkan kepada anda apa yang anda boleh lakukan untuk terus memperibadikan rupa Lihat Pembaca. Untuk tujuan demo, saya akan menggunakan artikel oleh artikel National Geographic.
Pilihan Pra-Terbina
Pandangan Firefox Reader dilengkapi dengan beberapa pilihan penyesuaian pra-terbina seperti gelap, cahaya dan sepia latar belakang, laras saiz fon, dan serif dan sans-serif typefaces. Anda boleh menyesuaikan tema dengan mengatasi peraturan CSS daripada pilihan sedia ada ini.
Saya menggunakan kulit gelap dengan fon serif, dan ini bermakna bahawa saya perlu mengatasi kelas CSS yang dimiliki, dalam kes saya .gelap dan .serif.
Jika anda mahu menyesuaikan variasi tema lain (kulit + font), anda perlu gunakan pemilih CSS yang sesuai. Anda boleh menyemak ini dengan bantuan Alat Pembangun Firefox dengan memukul F12.
Buat Fail CSS Custom
Anda perlu membuat fail yang dipanggil userContent.css di dalam krom folder folder profil Firefox anda untuk penyesuaian View Reader anda. Untuk mencari folder profil Firefox anda, ketik mengenai: sokongan ke dalam bar URL dan tekan Enter.
Anda akan mendapati diri anda pada halaman yang mengandungi data teknikal yang berkaitan dengan pemasangan Firefox anda. Klik butang Papar Folder, dan ia akan membuka folder Profil anda.
Buat folder dipanggil krom di dalam Folder Profil anda (jika anda belum memilikinya), dan fail yang dipanggil userContent.css di dalam krom folder. Laluan fail kelihatan seperti ini:
... \ Profiles \\ chrome \ userContent.css
Tambah Aturan CSS Custom
Sebaik sahaja anda telah membuat dan membuka userContent.css dalam editor kod, sudah tiba masanya untuk menambah peraturan CSS anda. Untuk menyesuaikan reka bentuk Lihat Pembaca, anda perlu sasarkan tag dengan pemilih yang sesuai.
Anda boleh menggunakan pemilih berikut untuk pilihan lalai yang berbeza:
/ * Apabila latar belakang gelap dipilih * /: root [hasbrowserhandlers = "true"] body.dark / * Apabila latar belakang cahaya dipilih * /: root [hasbrowserhandlers = "true"] body.light latar belakang dipilih * /: root [hasbrowserhandlers = "true"] body.sepia / * Apabila font serif dipilih * /: root [hasbrowserhandlers = "true"] body.serif dipilih * /: root [hasbrowserhandlers = "true"] body.sans-serif
Anda juga boleh menggabungkan kelas-kelas, untuk menyasarkan kombinasi tetapan tertentu.
/ * Apabila latar belakang gelap dan font serif dipilih * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Apabila latar belakang sepia dan font sans-serif dipilih * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Jangan guna pemilih umum : akar [hasbrowserhandlers = "benar"] badan untuk menyasarkan semua tetapan sekaligus. Ia akan berfungsi, tetapi ia akan juga mempengaruhi halaman pelayar yang lain, seperti mengenai: newtab, kerana unsur akar mereka juga membawa hasbrowserhandlers atribut (yang digunakan untuk menandakan pengendali peristiwa halaman Firefox dalaman, seperti mengenai: halaman).
Inilah kod yang saya tambah kepada saya userContent.css. Saya menukar keluarga font, gaya font, warna, dan meluaskan bekas teks. Anda boleh menggunakan peraturan gaya lain mengikut citarasa anda sendiri.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! important; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important; warna: # BAE3DB! penting; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! important; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3, root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! important; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Ambil perhatian bahawa ia perlu menggunakan !penting kata kunci dalam userContent.css untuk semua peraturan CSS. Pelayar menambah nilai harta pengguna yang ditentukan sebelum nilai yang ditentukan oleh pengarang (pemaju halaman web yang diberikan, di sini Lihat Pembaca). Oleh itu, apa-apa nilai harta pengguna yang ditentukan tanpa !penting kata kunci tidak akan berfungsi sekiranya lembaran gaya yang dicipta oleh penulis juga menyasarkan harta yang sama, kerana ia akan ditindih.
Keputusan akhir
Anda boleh melihat perubahan tema Lihat Pustaka saya di bawah. Gunakan peraturan CSS anda sendiri untuk menyesuaikan reka bentuk Viewer Reader Firefox peribadi anda.
Sebelum ini
Selepas itu
Jika anda ingin menyelam lebih mendalam dalam penyesuaian tema alat Firefox, periksa tutorial saya sebelum ini mengenai penyesuaian tema Alat Pembangun Firefox.
