Stylish: Sitelere CSS İle Müdahale Etme Eklentisi


Siteleri daha kullanışlı ve güzel hale getirebilmek için CSS ile müdahale etmenize yarayan süfer bir eklenti. Mağara esprilerinden önce hemen belirteyim ki bu tarz eklentilerin var olduğunu biliyordum ama gerçekten kullanmak bugüne kısmet oldu.

Beyaz, beyaz, beyaz!
Off şu web sitelerindeki #fff beyazı yüzünden beyazdan nefret ettim resmen, hangi eklentileri, programları denemedim ki!

  • Gece Görüşü Eklentileri
    Çok güzel çalışıyor ama örneğin bir bağlantıdan başka birine geçerken o arada tarayıcı beyazı bir anlık bir gözüküyor işte o anda bütün eklentinin anlamı kayboluyor benim için.
  • f.lux
    f.lux, on numara iş yapıyor ama bazen ekranın iyi aydınlanmış olması gerekiyor, bu aralarda o da verimsiz kalabiliyordu.

Ah şu sitelere müdahale edebilseydim!
En son iyice sinir oldum ve hemen tarayıcıya uygun bir şeyler araştırmaya başladım. Stylish eklentisine (Firefox) denk geldim. Biraz kurcaladım ve hoşuma gitti, hemen sık kullandığım birkaç sitede bir iki CSS yazdım.

  • Hazır Seçenekler
    İsterseniz userstyles.org adresinden popüler siteler için hazırlanmış hazır dosyaları indirip deneyebilirsiniz.
  • Kendiniz yazın!
    Tabii yine kendi kodlarınızı da yazabilirsiniz. Öncelikle bir dosyayı birden fazla sitede çalıştırabiliyor muyuz? Bilmiyorum ve daha o kadar kurcalamadım ama tek site için şöyle bir güzellik var: İlgili sitedeyken stylish eklentisinin ikonuna tıkladıktan sonra Yeni stil yazın >>> Bu URL için… seçeneklerini takip ettiğimizde hemen ilgili site için bir dosya yazmaya hazır hale geliyor.

    Bunu yaptıktan sonra karşınıza böyle bir yapı çıkıyor.

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document url("https://www.google.com.tr") {
      /* Buraya CSS kodlarını yardırıyoruz. */
    }

    Bundan sonrası bildiğiniz CSS kodu yazıyorsunuz işte.

Hemen denedim!
Madem yükledik hemen deneyelim değil mi? Ben de Türkiye’nin/dünyanın en popüler sitelerinde denemeler yaptım. Güzel bir yanı değişiklikler yapılır yapılmaz görünüyor, sayfa yenileme vs. gerektirmiyor yani. (Kodları yeniden ekledim, ilk yazdıklarım bula bula gittiğimden dolayı çok dağınık olmuştu, böyle daha iyi oldu.)

endustrimuhendisiyim.com
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("endustrimuhendisiyim.com") {

  .group .pad {
    background-color: #ddd;
  }

  .entry .ul{
    background-color: #ddd;
  }
  
  .tabcontent .responsive-tabs__panel .responsive-tabs__panel--active {
    background-color: #ddd;    
  }
youtube.com
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("youtube.com") {
  
  #masthead-positioner >*,
  .appbar-content-hidable,
  input,
  .section-list,
  .yt-lockup-byline,
  .yt-ui-ellipsis,
  div[class^="yt-lockup"] ~*,
  .yt-card,
  #guide-container
  {
    background-color: #ddd;
    color: #222;
  }
eksisozluk.com
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("eksisozluk.com") {
	body {
		color:#888;
	}

	a {
		color:#8B5742;
	}

	.robots-nocontent nav ul li a,
	header > ul * {
		color: #777;
	}

	input {
		background-color: #ddd;
	}

	textarea {
		background-color: #666;
		color:#222;
	}

}
reddit.com
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("reddit.com") {

body {
	background-color: #ddd !important;
	color: #d2d2d2 !important;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, 
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";	
}
.content,
.side,
.spacer,
.thing,
.commentarea,
.usertext, 
.sitetable {
	background-color: #ddd !important;

}


.tagline,
.midcol* {
	color:#222;
}

textarea,
.usertext {
	background-color: #f0f0f0;
}

Kodları inceleyenler muhtemelen anlamışlardır, neredeyse bütün yaptığım arkaplan rengini ve yazı rengini değiştirmek. Sırf bunlar bile gözlerimin yaşadığı mutluluğu anlatamaz. Şimdi bir de Greasemonkey var onu da bir denemek lazım. 😀


Bunlar da hoşunuza gidebilir...


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir