Home-theater-designers![Cara Memperbaiki Gangguan Kecil di Web Dengan Stylish [Firefox & Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
Desainer web memiliki pekerjaan yang hampir mustahil. Mereka perlu membuat satu desain yang menyenangkan semua orang. Ketika berbicara tentang layanan seperti Gmail, yang digunakan oleh jutaan orang di seluruh dunia, Anda benar-benar dapat mengabaikan bagian 'hampir' – itu tidak mungkin. Bahkan jika desain ulang sangat disukai oleh kebanyakan orang, akan selalu ada pengguna yang sangat tidak menyukai tampilan baru.
Terkadang ada cukup banyak pengguna ini untuk memaksa perusahaan mundur, seperti yang dilakukan Google baru-baru ini dengan tombol ikon Gmail. Tetapi bagaimana jika ada sesuatu yang Anda Betulkah benci, dan perusahaan tidak mengubahnya kembali? Apakah Anda terjebak dengan itu selamanya? Berkat gaya pengguna, Anda dapat memperbaiki sendiri masalah tersebut.
Memperkenalkan Bergaya
Stylish adalah add-on gratis yang tersedia untuk Firefox dan Chrome , dan ini memungkinkan Anda melakukan sesuatu yang sangat ajaib - menerapkan gaya Anda sendiri ke elemen laman web. Bahkan jika Anda bukan pengembang web dan Anda belum pernah menulis sedikit pun CSS dalam hidup Anda, ini jauh lebih mudah daripada kedengarannya. Anda dapat menggunakan Stylish untuk mengubah situs web sepenuhnya (seperti yang akan saya tunjukkan di bagian berikutnya), tetapi yang lebih penting, Anda dapat menggunakan Stylish untuk memperbaiki gangguan kecil dalam hitungan menit.
Misalnya, saya punya masalah dengan ukuran font default di Gmail. Antarmuka baik-baik saja – saya tidak ingin memperbesar (Ctrl +) dengan browser saya, karena itu akan meningkatkan ukuran semua elemen antarmuka dan menjadi sangat jelek. Saya hanya ingin cara untuk membuat font pesan sedikit lebih besar.
Dengan Stylish, itu sangat sederhana, dan saya akan menunjukkan caranya. Namun sebelum kita melihat cara membuat gaya pengguna Anda sendiri, mari kita bicara tentang memanfaatkan pekerjaan orang lain.
UserStyles.org
Jika ada sesuatu yang mengganggu Anda, sangat mungkin Anda tidak sendirian. UserStyles.org adalah situs web yang memungkinkan pengguna berbagi gaya yang mereka buat. Di atas Anda dapat melihat gaya ( Tambahkan label ke ikon bilah alat ) direkomendasikan oleh komentator MakeUseOf RandyN sebagai balasan atas cerita kami tentang tombol ikon Gmail. Gaya ini memungkinkan Anda menyimpan ikon, tetapi menambahkan label teks – sesuatu yang tidak akan diizinkan oleh Google.
UserStyles.org bagus, tetapi tidak sempurna. Beberapa desain mencoba melakukan terlalu banyak (mengubah tampilan situs web sepenuhnya), dan beberapa untuk situs web versi lama dan sekarang rusak. Jika Anda mencoba memperbaiki sesuatu yang kecil dan tidak dapat menemukannya di UserStyles.org, mungkin tindakan terbaik Anda adalah melakukannya sendiri.
Membuat Gaya Pengguna Sederhana Anda Sendiri
Untuk membuat gaya pengguna Anda sendiri, pertama-tama Anda perlu mengetahui elemen halaman apa yang ingin Anda ubah, dan kemudian perubahan apa yang ingin Anda buat. Jadi, untuk memulai, klik kanan apa pun yang ingin Anda ubah, dan pilih Memeriksa elemen . Anda akan melihat sesuatu seperti ini:
Firefox menggelapkan sisa halaman, dan menggambar bingkai yang sangat jelas di sekitar elemen yang Anda pilih. Di atas elemen itu, teks yang mengatakan div#2d6.ii.gt.adP.adO , adalah sekelompok kelas CSS, bersama dengan satu ID (bagian yang dimulai dengan #). Ini adalah pemilih yang memengaruhi gaya untuk elemen ini. Di sepanjang bagian bawah layar terdapat bilah navigasi yang memungkinkan Anda ' melintasi pohon DOM ', atau dengan kata yang lebih sederhana, naik dan turun dalam hierarki elemen yang mengarah ke elemen yang Anda pilih.
Nama permainan di sini adalah untuk memilih elemen yang ingin Anda gaya, dan membuat pemilihan tidak terlalu sempit sehingga tidak akan mempengaruhi semua yang ingin Anda pengaruhi, atau terlalu luas sehingga akan mengacaukan hal-hal lain.
Saya mengklik satu elemen lebih tinggi, div.gs , hanya karena saya suka namanya (sepertinya sesuatu yang tidak akan berubah terlalu cepat, tapi itu hanya tebakan saya). Ini mempengaruhi seluruh area pesan. Setelah area yang ingin Anda gaya dipilih, klik tombol Gaya tombol di sudut kanan bawah, untuk membuka Aturan roti:
Aku tahu, itu menakutkan pada awalnya. Namun di sinilah Anda melihat berbagai aturan CSS yang memengaruhi elemen yang Anda pilih, dan di sinilah Anda dapat membuat modifikasi sementara Anda sendiri dan melihat dampaknya pada halaman secara real-time, tanpa memuat ulang. Tapi apa yang harus Anda ubah? Klik Properti tombol dan hapus centang Hanya gaya pengguna :
Di sini Anda dapat melihat daftar lengkap semua aturan CSS. Anda dapat menggulir ke bawah daftar sampai Anda menemukan aturan yang masuk akal untuk apa yang Anda butuhkan (ukuran font dalam kasus kami), dan bahkan klik tanda tanya di sebelahnya untuk membuka halaman penjelasan. Jadi, sekarang kita tahu bahwa kita ingin mengubah properti ukuran font untuk semua elemen div yang memiliki kelas ' gs ' (ditulis dalam singkatan sebagai div.gs ).
Satu-satunya pertanyaan yang tersisa adalah apa yang kita inginkan nilainya. Untuk itu, kita kembali ke panel Aturan dan mulai bermain-main:
40 piksel mungkin agak gila, tetapi Anda mendapatkan gambaran umum. Main-main dengan ini, dan jangan ragu untuk menambahkan properti lain, sampai Anda mendapatkan tampilan yang Anda inginkan. Pastikan untuk tidak menutup halaman, karena perubahan Anda adalah bukan disimpan di mana saja.
Menyimpan Gaya Baru Anda
Setelah Anda membuat bagian situs ini terlihat seperti yang Anda inginkan, saatnya untuk menyimpannya. Klik Bergaya ikon di bilah add-on, dan pilih Tulis gaya baru . Stylish kemudian ingin tahu pada halaman apa yang harus menerapkan gaya baru – dalam kasus kami, pilih opsi kedua, mail.google.com . Selanjutnya, Anda akan melihat dialog ini:
Saya sudah mengisinya. Jelas, saya memilih nama dan beberapa tag untuk gaya. Tetapi hal yang sebenarnya terjadi di dalam kode: Baris 3 sudah ada di sana – Bergaya letakkan di tempatnya sehingga tahu di halaman mana gaya itu berlaku. Tapi baris 5-7 adalah milikku. Mari kita menganalisisnya:
Baris 5: div.gs { – bagian ini harus Anda kenali. Ini adalah elemen yang kami putuskan untuk ditata. Tanda kurung kurawal berarti kita sekarang akan menulis beberapa aturan CSS. Baris 6: ukuran font: 20px !penting; – itulah aturan yang ingin kita ubah (ukuran font), diikuti dengan definisi barunya (20 piksel), dan kemudian dengan deklarasi !important, yang berarti Firefox akan mematuhi aturan ini bahkan jika elemen yang lebih dekat dengan teks mencoba untuk mengatur ukuran font menjadi sesuatu yang berbeda. Baris 7: } – menutup definisi gaya.
Selanjutnya, klik Pratinjau dan kagumi karya Anda:
Dan akhirnya, setelah Anda melihatnya berfungsi, klik Menyimpan.
Ini Bukan Panduan Lengkap
Saya sangat menyadari bahwa untuk menjaga tutorial singkat ini dalam batas-batas satu posting, saya harus membuat sejumlah lompatan. Jika Anda bingung di sepanjang jalan, terimalah permintaan maaf saya. CSS memang rumit pada awalnya, tetapi tidak begitu rumit setelah Anda memahaminya – dan menyesuaikan situs web secara lokal tetap menjadi salah satu cara terbaik untuk belajar.
Jika Anda bingung dengan apa pun, silakan tanyakan kepada saya di bawah ini dan saya akan melakukan yang terbaik untuk membantu.
cara menghubungkan alexa ke tv samsungMembagikan Membagikan Menciak Surel 5 Tips untuk Meningkatkan Mesin VirtualBox Linux Anda
Bosan dengan kinerja buruk yang ditawarkan oleh mesin virtual? Inilah yang harus Anda lakukan untuk meningkatkan kinerja VirtualBox Anda.
Baca Selanjutnya Topik-topik yang berkaitan- Browser
- Pengembangan web
- Alat Webmaster
- Mozilla Firefox
- Google Chrome
- Desain web
Berlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan