CSS değişkenleri ve seçiciler

Blogunun renklerini değiştirmek için tek tek CSS kuralı yazman gerekmiyor. Hazır temaların çoğu bir avuç CSS değişkenini yeniden tanımlıyor; sen de aynısını yaparsan bütün sayfa birden değişiyor.

Panelin Tema sekmesindeki "Özel CSS" kutusuna şunu yazman yeterli:

:root {
    --bg: #101418;
    --fg: #e6e6e6;
    --accent: #7fc8e8;
    --border: #2a2f36;
    --code-bg: #1c2128;
}

Değişkenlerin tam listesi

Değişken	Neyi belirler
`--bg`	Sayfanın arka plan rengi
`--fg`	Ana yazı rengi
`--muted`	Tarih, yardımcı metin gibi ikincil yazılar
`--border`	İnce çizgiler: tablo kenarları, footer üstü
`--accent`	Link rengi ve vurgular
`--accent-hover`	Linkin üzerine gelindiğindeki rengi
`--accent-fg`	Vurgu renginin üzerine gelen yazının rengi
`--code-bg`	Kod bloğu ve satır içi kodun zemini

Hepsini tanımlamak zorunda değilsin; sadece değiştirmek istediklerini yaz, gerisi olduğu gibi kalır.

Belirli bir bölgeyi hedefleme

Renklerin ötesine geçmek istersen, sayfanın yapısındaki şu sınıflar işine yarar:

Seçici	Neresi
`.header-block`	Üstteki blog başlığı ve menü satırı
`.blog-title`	Blog adının kendisi
`nav a`	Menü linkleri
`.blog-description`	Ana sayfadaki karşılama metni
`.content`	Yazı ve sayfa gövdesi
`.post-list`	`/yazilar/` sayfasındaki liste
`.site-footer`	Alttaki footer alanı
`.footnote`	Yazının altındaki dipnot listesi

Örnek: menü linklerini büyük harfe çevirmek.

nav a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

Hangi sınıfın nerede olduğunu bulma

En hızlı yol tarayıcının kendi aracı: blogunda bir öğeye sağ tıklayıp "İncele" (ya da "Öğeyi denetle") dediğinde, o öğenin hangi etiket ve hangi sınıfla yazıldığını görürsün. Oradan kopyaladığın seçiciyi doğrudan Özel CSS kutusuna yazabilirsin.

Neyin yasak olduğunu hatırlamak için bkz. Özel CSS.