Şık [Firefox ve Chrome] ile Web'deki Küçük Sıkıntıları Nasıl Düzeltebilirim?

Web tasarımcılarının neredeyse imkansız bir işi var. Herkesi memnun eden bir tasarım bulmaları gerekiyor. Dünyanın her yerinden milyonlarca insan tarafından kullanılan Gmail gibi bir hizmetten bahsederken, gerçekten 'neredeyse' kısmı bırakabilirsiniz - bu imkansız. Yeniden tasarım çoğu insan tarafından beğenilse bile, her zaman yeni görünümü gerçekten sevmeyen kullanıcılar olacaktır.

Bazen, Google'ın yakın zamanda Gmail simge düğmeleriyle yaptığı gibi, bir şirketi geri adım atmaya zorlamak için bu kullanıcılardan yeterli sayıda vardır. Ama ya sana bir şey olursa gerçekten nefret ve şirket bunu geri değiştirmiyor mu? Sonsuza kadar onunla mı kaldın? Kullanıcı stilleri sayesinde bu tür sorunları kendiniz çözebilirsiniz.

Şık ile Tanışın

Şık, her ikisi için de kullanılabilen ücretsiz bir eklentidir. Firefox ve Krom , ve oldukça büyülü bir şey yapmanızı sağlar - web sayfası öğelerine kendi stillerinizi uygulayın. Bir web geliştiricisi olmasanız ve hayatınızda hiç CSS yazmamış olsanız bile, bu göründüğünden çok daha kolaydır. Web sitelerini tamamen dönüştürmek için Şık'ı kullanabilirsiniz (bir sonraki bölümde size göstereceğim gibi), ancak daha da önemlisi, küçük sıkıntıları dakikalar içinde düzeltmek için Şık'ı kullanabilirsiniz.

Örneğin, Gmail'de varsayılan yazı tipi boyutuyla ilgili bir sorunum vardı. Arayüz iyiydi – tarayıcımla yakınlaştırmak istemedim (Ctrl +), çünkü bu tüm arayüz öğelerinin boyutunu artıracak ve gerçekten çirkin olacaktı. Sadece mesaj yazı tipini biraz daha büyütmenin bir yolunu istedim.

Şık ile gerçekten basitti ve size nasıl olduğunu göstereceğim. Ancak kendi kullanıcı stillerinizi oluşturmaya bakmadan önce, diğer insanların çalışmalarından yararlanma hakkında konuşalım.

KullanıcıStyles.org

Bir şey sinirlerinizi bozuyorsa, yalnız değilsiniz. KullanıcıStyles.org kullanıcıların oluşturdukları stilleri paylaşmalarını sağlayan bir web sitesidir. Yukarıda bir stil görebilirsiniz ( Araç çubuğu simgelerine etiket ekleyin ) Gmail simge düğmeleri hakkındaki hikayemize yanıt olarak MakeUseOf yorumcusu RandyN tarafından önerilir. Bu stil, simgeleri korumanıza, ancak metin etiketleri eklemenize izin verir - Google'ın yapmanıza izin vermeyeceği bir şey.

UserStyles.org harika ama mükemmel değil. Bazı tasarımlar çok fazla şey yapmaya çalışır (bir web sitesinin görünümünü tamamen değiştirir) ve bazıları web sitelerinin eski sürümleri içindir ve şimdi bozulur. Küçük bir şeyi düzeltmeye çalışıyorsanız ve onu UserStyles.org'da bulamıyorsanız, belki de en iyi hareket tarzınız bunu kendi başınıza yapmaktır.

Kendi Basit Kullanıcı Stilinizi Oluşturma

Kendi kullanıcı stilinizi oluşturmak için önce sayfanın hangi öğesini değiştirmeye çalıştığınızı ve ardından hangi değişikliği yapmak istediğinizi bilmeniz gerekir. Bu nedenle, başlamak için değiştirmek istediğiniz şeyi sağ tıklayın ve Elemanı İncele . Bunun gibi bir şey görmelisiniz:

Firefox, sayfanın geri kalanını karartır ve seçtiğiniz öğenin çevresine çok net bir çerçeve çizer. Bu öğenin üstünde, yazan metin div#2d6.ii.gt.adP.adO , bir kimlikle (# ile başlayan kısım) birlikte bir grup CSS sınıfıdır. Bu, bu öğenin stilini etkileyen seçicidir. Ekranın alt kısmında, ' DOM ağacını geç ' veya daha basit bir deyişle, seçtiğiniz öğeye giden öğelerin hiyerarşisinde yukarı ve aşağı gidin.

Buradaki oyunun adı, stil vermek istediğiniz öğeyi seçmek ve seçimi etkilemek istediğiniz her şeyi etkilemeyecek kadar dar veya başka şeyleri karıştıracak kadar geniş değil.

Bir öğeyi daha yükseğe tıkladım, div.gs , sadece adını sevdiğim için (çok yakında değişmeyecek gibi görünüyor, ama bu benim açımdan tam bir tahmin). Tüm mesaj alanını etkiler. Stil vermek istediğiniz alan seçildikten sonra stil açmak için sağ alt köşedeki Tüzük ekmek:

Biliyorum, ilk başta korkutucu. Ancak bu, seçtiğiniz öğeyi etkileyen farklı CSS kurallarını gördüğünüz yerdir ve burada kendi geçici değişikliklerinizi yapabilir ve sayfadaki etkilerini yeniden yüklemeden gerçek zamanlı olarak görebilirsiniz. Ama neyi değiştirmelisiniz? Tıkla Özellikler düğmesine basın ve işareti kaldırın Yalnızca kullanıcı stilleri :

Burada tam bir listesini görebilirsiniz herşey CSS kuralları. İhtiyacınız olan şey için anlamlı bir kural (bizim durumumuzda yazı tipi boyutu) bulana kadar listeyi aşağı kaydırabilir ve hatta bir açıklama sayfası açmak için yanındaki soru işaretine tıklayabilirsiniz. Artık, ' sınıfına sahip tüm div öğeleri için font-size özelliğini değiştirmek istediğimizi biliyoruz. gs ' (kısa olarak şöyle yazılmıştır: div.gs ).

Geriye kalan tek soru, değerinin ne olmasını istediğimizdir. Bunun için Kurallar bölmesine geri dönüyoruz ve etrafta oynamaya başlıyoruz:

40 piksel biraz çılgınca olabilir, ancak genel fikri anladınız. Bununla oynayın ve aradığınız görünümü elde edene kadar başka mülkler eklemekten çekinmeyin. Sayfayı kapatmadığınızdan emin olun, çünkü değişiklikleriniz Olumsuz herhangi bir yere kaydedilir.

Yeni Tarzınızı Kaydetme

Sitenin bu bölümünün tam istediğiniz gibi görünmesini sağladıktan sonra, onu kaydetmenin zamanı geldi. Tıkla Şık eklenti çubuğundaki simgesini seçin ve Yeni stil yaz . Şık, yeni stili hangi sayfalarda uygulaması gerektiğini bilmek ister - bizim durumumuzda ikinci seçeneği seçin, mail.google.com . Ardından, bu iletişim kutusunu göreceksiniz:

Onu zaten doldurdum. Açıkçası, stil için bir isim ve bazı etiketler seçtim. Ama asıl olay kodun içinde olur: 3. Satır zaten oradaydı – Şık, stilin hangi sayfalarda geçerli olduğunu bilmesi için yerine koydu. Ama 5-7 hattı benim. Onları analiz edelim:

5. satır: div.gs { - bu kısmı tanımanız gerekir. Bu, stil vermeye karar verdiğimiz unsurdur. Açılış ayracı, şimdi bazı CSS kuralları yazacağımız anlamına geliyor. Satır 6: yazı tipi boyutu: 20 piksel !önemli; – değiştirmek istediğimiz kural budur (yazı tipi boyutu), ardından yeni tanımı (20 piksel) ve ardından bir !important bildirimi gelir; bu, metne daha yakın bir öğe ayarlamaya çalışsa bile Firefox'un bu kurala uyacağı anlamına gelir. yazı tipi boyutunu farklı bir şeye ayarlayın.Satır 7: } – stil tanımını kapatma.

Ardından, Önizleme'yi tıklayın ve işinize hayran kalın:

Ve son olarak, çalıştığını gördüğünüzde, tıklayın. Kaydetmek.

Bu Tam Bir Kılavuz Değildir

Bu kısa öğreticiyi tek bir yazının sınırları içinde tutmak için çok sayıda sıçrama ve sıçrama yapmak zorunda olduğumun farkındayım. Yol boyunca kafanız karıştıysa, lütfen özrümü kabul edin. CSS ilk başta yanıltıcıdır, ancak alıştıktan sonra o kadar karmaşık değildir - ve web sitelerini yerel olarak özelleştirmek, öğrenmenin en iyi yollarından biri olmaya devam etmektedir.

Kafanız karıştıysa, lütfen aşağıdan bana sorun, yardımcı olmak için elimden geleni yapacağım.

youtube için iyi video düzenleme uygulamaları

Paylaş Paylaş Cıvıldamak E-posta VirtualBox Linux Makinelerinizi Güçlendirmek için 5 İpucu

Sanal makinelerin sunduğu düşük performanstan bıktınız mı? İşte VirtualBox performansınızı artırmak için yapmanız gerekenler.

Sonrakini Oku İlgili konular

tarayıcılar
Web Geliştirme
Webmaster araçları
Mozilla Firefox
Google Chrome
Web Tasarım

Yazar hakkında Erez Zukerman(288 Makale Yayınlandı) Erez Zukerman'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın