Firefoxda userContent.css & stylish kullanımı.

[__kadıköyRAP__]

Firefox'da istediğin sayfayı keyfine göre düzenleyebilmek için stylish eklentisi ve bununla aynı işi yapan userContent.css dosyası var.

İkisine de aynı kodlar yazılıyor, eklenti yükü olmasın diye ben userContent.css kullanın derim.

Hazırladığınız css'i %userprofile%\AppData\Roaming\Mozilla\Firefox\Profiles\*****.default\chrome içine atın.

Kodların hangi kurallara göre yazıldığını bildiğim kadarıyla anlatmaya çalışacağım.

1. Hangi site için geçerli olacak?

Yazacağımız kodlar hangi site için geçerli olacaksa önce bu kodu yazıyoruz ardından. { } operatörleri arasına css kurallarımızı yazacağız.

@-moz-document domain("[COLOR=red]www.orneksite.com[/COLOR]")
{
....
...

...
}

2. id'i belli olan öğenin özelliğini değiştirmek için # operatörü kullanacağız, örneğin facebookta sağda reklamları tamamen kaldırmak için;

Reklamlar id'si "pagelet_adbox" olan bi div içinde çıkıyor. Bunu Firebug eklentisi ile öğrenebilirsiniz.

Engellemek için

@-moz-document domain("[COLOR=red]www.facebook.com[/COLOR]")
{

#pagelet_adbox {display: none !important; }

}

3. class'ı belli olan öğeler için . operatörü kullanacağız, örneğin bu konuyu açarken gördüğüm birşey, konu açma paneli ortada küçücük duruyor bunu sağa sola dayamak için yapacaklarımız;

class'ı "vbform block" olan bi form içinde tutulduğunu firebug ile öğrendim, max-width değeri 750px, bu değeri kaldırınca sağa sola yaslanmış oluyor form. Bunun için max-width değerini kaldıracağım.

.vbform block olarak yazdığımda aradaki boşluktan dolayı sanırım kod işe yaramadı, sadece .vbform yazınca sorun aşıldı.

@-moz-document domain("[COLOR=red]forum.shiftdelete.net[/COLOR]")
 {
 
.vbform{max-width:none !important;} 

 }

Yahu pek anlaşılır olmadı galiba ama bu kadar yazmışken silmeye gönlüm el vermedi

Ekleyeceği birşey olan varsa yazsın ben de tam hakim değilim konuya, umarım faydalı birşey olmuştur

 

[craftingMaterial]

Güzel bir eklenti Ben chrome üzerinde kullanıyorum SDN'i kendime göre düzenliyorum

 

[__kadıköyRAP__]

Aynen canımı sıkan ne varsa anında kurtuluyorum

Tabi sdn de değil

 

[craftingMaterial]

Aynen canımı sıkan ne varsa anında kurtuluyorum

Tabi sdn de değil

Vallahi ben acımam Dalarım direk Yeter ki gıcık olayım bir kere

 

[__kadıköyRAP__]

Hocam konuya ekleyeceğin birşey var mı? öğrenelim iyice nasıl kullanıldığını

 

[craftingMaterial]

Bildiğin CSS kuralları geçerli işte CSS'i bilen insan zaten siteyi istediği gibi şekilden şekle sokar Çok zor değil açıkçası

 

[__kadıköyRAP__]

Valla ben bilmiyorum konu çok geniş demek ki, başlangıç için bunlar yeter o zaman

 

[N3CAT1]

Güzel olmuş güzel Ellerine sağlık, gayet anlaşılır bence

 

[craftingMaterial]

Güzel olmuş güzel Ellerine sağlık, gayet anlaşılır bence

E yani CSS dediğin zaten çok karmaşık değil

Bir de şu eknelebilir bir tag'a komple stil vermek isteniyorsa hiç bir operatör kullanılmadan direk tagın adı yazılır ve stili verilir.

mesela <p> tagı için:

p{color: #afafaf;}

Gibi

Ayrıca id'si ya da class'ı ya da bir tag içindeki başka bir tag'ı belli olan taga stil vermek için de yan yana yazılabilir.

p a{color: #000;}

Yukarıdaki kod mesela p tagı içerisindeki a tagına stil verir

Şimdi çıkmam gerekiyor daha detaylı bir açıklama gelince yaparım

 

[__kadıköyRAP__]

Şimdi bu bütün p içindeki a lar için geçerli olacak ama değil mi? Kendine has bi id falan yoksa özelleştiremiyoruz sanırım.

 

[craftingMaterial]

Şimdi bu bütün p içindeki a lar için geçerli olacak ama değil mi? Kendine has bi id falan yoksa özelleştiremiyoruz sanırım.

evet bütün alar için geçerli olur. kendine has bir id varsa da özelleştirirsin. o da şöyle olur:

#sol_panel p{color:#fff;}

Mesela yukarıdaki kod ile sol_panel idsine sahip olan elementin child'ı olan p elementine renk ataması yaparsın.

Ya da aynı şeyi class'a sahip olan bir element için de yaparsın. O da şöyle:

.cerceve div{color:#f00;}

Yukarıdaki kod ile de cerceve classına sahip olan bütün elemntlerin child elemnti olan div'lere uygulanır.

Ya da şu da yapılabilir belli bir id'ye sahip olan bir elementin içindeki belli bir id'ye sahip olan başka element'e de stil uygulanabilir. Örneğin:

#dis_cerceve #ic_cerceve{color:#0f0;}

Yukarıdaki kod ile de dis_cerceve idsine sahip olan elementin içindeki ic_cerceve elementine sadece stil uygularız. Aynı olayı class bazında da yapabiliriz

Ayrıca durumlar için de stil uygulanabilir.

#kutu:focus{color:#fdf;}

#kutu:hover{color:#fdf;}

gibi. Yukarıdakilerde focus ile o objeye odaklanıldığında uygulanacak stili, hover ile de mouse üzerie geldiğinde uygulanacak stili ayarlayabiliriz

Kıssadan hisseye fena bir CSS dersi olmadı değil bu yazı da hani

 

[__kadıköyRAP__]

Sağol cgrszone

#sol_panel p{color:#fff;}

Burada mesela sol_panel içinde 3 tane id'si olmayan p var ve ben 2. sine yapmak istiyorum stilimi. Mümkün mü? Yani p(2) falan gibi birşeyler yapabilir miyiz?

 

[craftingMaterial]

Sağol cgrszone

#sol_panel p{color:#fff;}

Burada mesela sol_panel içinde 3 tane id'si olmayan p var ve ben 2. sine yapmak istiyorum stilimi. Mümkün mü? Yani p(2) falan gibi birşeyler yapabilir miyiz?

id'si yoksa erişemezsin. css hangi elementin olduğunu bilmeli. yukarıdan verirsen kuralı alttaki tüm elementler css'in kalıtsallığını kullanarak stili alırlar. fakat uygulamak istemediğin elemente direk farklı bir kural vererek kalıtsallığı iptal edebilirsin...

 

[__kadıköyRAP__]

Faydalı oldu sağol