🎨 CSS dosyalarıyla Obsidian'ı özelleştirme

CSS dosyası nedir ve Obsidian’da neden gerekli?

CSS

— arayüzü biçimlendirme dilidir. Ve Obsidian’da inanılmaz bir esneklik açar: herhangi bir arayüz öğesinin görünümünü değiştirebilirsin — bağlantılardan callout bloklarına, tablolara, hatta editöre kadar.

Eklentilerin aksine, CSS sistemi yormaz, güncelleme gerektirmez ve ortamının her pikselini kontrol etmeni sağlar. Kendin için kendin oluşturduğun bir “gizli ayar” gibidir.

📁 CSS dosyaları nerede etkinleştirilir?

Ayarlar → Görünüm → CSS parçacıklarına git
“Parçacıklar klasörünü aç”a tıkla
Oraya bir .css dosyası koy (örn. elton-style.css)
1. Böyle bir dosya oluşturmak için o klasörde sıradan bir not defteri dosyası oluştur
2. Sonra “Farklı kaydet” > dosya adının sonuna .css ekle
Obsidian’ı yeniden başlat ya da listedeki anahtarla etkinleştir

🔥 Özel CSS dosyamdan bir örnek

.callout[data-callout="health"] {
    --callout-color: 255, 199, 234;
    --callout-icon: activity;
}

▶️ Bu kuralın yaptığı:

health, callout bloğunun adıdır. Obsidian’da >[!health] yazarsın ve bu blok özel bir stil alır.
--callout-color — yumuşak pembe bir arka plan ayarlar (renk buradan alındı)
--callout-icon: activity; — bir “nabız” simgesi ekler (Lucide Icons’tan alındı)

.cm-s-obsidian .cm-link:hover {
  color: #ffd700;
  text-shadow: 0 0 5px #ffd700;
  transition: all 0.3s ease;
}

▶️ Bu kuralın yaptığı:

Üzerine gelince bağlantıların rengini altın #ffd700’a çevirir
Vurgu için yumuşak bir parıltı (text-shadow) ekler
transition — efekti akıcı yapar

.callout[data-callout="motivasyon"] {
  --callout-color: 255, 183, 0;
  --callout-icon: "zap";
  border-radius: 10px;
  font-style: italic;
}

▶️ Bu kuralın yaptığı:

motivasyon — callout’un adı. >[!motivasyon] yazabilirsin — ve vurgulanır.
Renk — parlak sarı, bir marker gibi
⚡ zap simgesi enerji katar
border-radius: 10px — köşeleri yuvarlar
font-style: italic — stili el yazısı gibi “ilham verici” yapar

✨ CSS dosyalarıyla başka neler yapabilirsin?

İşte birkaç havalı fikir daha:

Farklı etiketler için farklı stiller yap — örn. #🧠’yi mavi, #🔥’yi kırmızı vurgula
Tüm tabloları kenarlıklar, gölgeler ya da zebra deseniyle biçimlendir
Sözdizimi vurgulama stillerini değiştir — örn. Dataview kodu için kendi rengin
Belirli callout bloklarına arka plan görselleri ekle
Belirli editör öğelerinin stilini değiştir — örn. satır numaralarını gizle ya da mevcut satırı vurgula

Örnekler:

Uygulamanın ya da panellerin arka planı. CSS ile keyfi bir arka plan görseli ya da rengi ayarlayabilirsin. Örneğin ana pencerede bir arka plan görseli ayarlamak için, bu parçacıktaki gibi .horizontal-main-container seçicisini kullanabilirsin:
```
.horizontal-main-container {
  /* Tüm çalışma ekranına arka plan görseli */
  background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?…);
  background-size: cover;
}
```
Burada background-size: cover görseli tüm alana yayar. Ayrıca, altındaki arka plan görünsün diye not arka planını şeffaf yapmak önerilir, örn. --background-primary: transparent; ile. Böyle bir ayar, arka planı güzel biçimlendirmeni sağlar.
Yazı tipi boyutu ve türü. Yazı tipleri temanın CSS değişkenleriyle ya da doğrudan font-size ile ayarlanır. Temel yazı tipi boyutunda genel bir değişiklik, değişkenlerle (örn. --font-size-base) ya da farklı cihazlar için medya sorgularıyla rahatça yapılır. Obsidian forumundan PC ve mobilde farklı yazı tipi boyutları için bir örnek:
```
@media (min-width: 768px) {
  .cm-line { font-size: 14px; }   /* Masaüstü */
}
@media (max-width: 480px) {
  .cm-line { font-size: 16px; }   /* Mobil */
}
@media (min-width: 480px) and (max-width: 768px) {
  .cm-line { font-size: 17px; }   /* Tablet */
}
```
Bu parçacık, editördeki metin boyutunu farklı ekran genişlikleri için değiştirir.
Bağlantı ve vurgu renkleri. İç bağlantıların rengini, değişkenleri ya da seçicileri geçersiz kılarak değiştirebilirsin. Örneğin “ölü” (çözülmemiş) bağlantıların rengini değiştirmek için bir CSS parçacığı şunu belirtir:
```
.markdown-rendered .internal-link.is-unresolved {
  /* Çözülmemiş bir bağlantının rengi */
  --link-unresolved-color: #6272a4;
  font-size: var(--font-ui-small);
}
```
Bu, çözülmemiş bir bağlantı için farklı bir ton ayarlayan bir forum tartışmasından [27] bir örnektir. Genel renk ayarları için (bir bağlantının arka plan ve dekoratif rengi) temanın CSS değişkenlerini kullanabilirsin, örn. --link-unresolved-color, --link-unresolved-decoration-color. Benzer şekilde, arama yaparken bulunan metnin rengini ayarlayabilirsin: bir örnek arka planı şeffaf yapar ve bulunan parçaların rengini temanın vurgu rengine çevirir:
```
.workspace-leaf-content[data-type="search"] .search-result-file-matched-text {
  background: none;
  color: var(--text-accent);
}
```
Böyle bir kural, sarı vurguyu kaldırır ve bulunan kelimelere ana metin rengini verir.
Listeleri biçimlendirme. Farklı liste iç içe geçme seviyeleri için farklı işaretçiler ayarlayabilirsin. Örneğin GitHub’dan bir parçacık, marker listelerindeki dairelerin biçimini değiştirir: birinci seviye — dolu daire, ikinci — boş daire, üçüncü — kare, dördüncü — üçgen vb. Basitleştirilmiş bir örnek:
```
/* Seviye 1: dolu daire */
.markdown-reading-view .markdown-preview-section ul li > .list-bullet:after {
  height: 7px; width: 7px; border-radius: 50%;
}
/* Seviye 3: kare */
.markdown-reading-view .markdown-preview-section ul li ul li ul li > .list-bullet:after {
  height: 7px; width: 7px; border-radius: 0%;
}
/* Seviye 4: üçgen */
/* (kenarlık stilleriyle bir üçgen oluşturulur) */
```
Tam kod ve ayrıntılar, 5 liste seviyesinde farklı işaretçi biçimleri sağlayan [25] (GitHub) parçacığındadır.
Paneller ve simgeler. CSS ile arayüz öğelerini gizleyebilir ya da değiştirebilirsin. Örneğin yan paneldeki (ribbon) istenmeyen eklentilerin simgelerini gizlemek için, öğeleri aria-label’a göre hedefleyip display: none verebilirsin:
```
.clickable-icon[aria-label='Templater'],
.clickable-icon[aria-label='Toggle custom sorting'] {
  display: none;
}
```
Bu kod, ribbon menüsünden Templater ve Custom Sort eklenti düğmelerini kaldırır. Aynı şekilde başka simgeleri gizleyebilir ya da düğmelerin sırasını değiştirebilirsin. Ayrıca ribbon’un otomatik gizlenmesini de ayarlayabilirsin: body:has(.is-sidedock-collapsed) ile bir örnek çözüm, sol kenar çubuğu daraltıldığında ribbon’u gizler ([32] tartışmasına bak).
Graph View (bağlantı grafiği). Grafik alanı bir <canvas>’tır; onu alttaki gradyanlar ya da görsellerle biçimlendirebilirsin. Örneğin tasarımcılar grafik arka planını yıldızlı yapmayı önerir: canvas için CSS ayarlayıp bir gradyan ve yıldızlı bir SVG bindirerek. Tartışmalardan ayrıca .workspace-leaf-content[data-type="graph"] .view-content’a ya da onun ::after sözde öğesine bir arka plan görseli bindirebileceğin de biliniyor. Bir örnek, bulanık bir arka plan (tüm grafik arka planına bir görsel) yapar ve karartır:
```
.workspace-leaf-content[data-type="graph"] .view-content {
  z-index: 0; position: absolute;
  background-image: url(https://picsum.photos/200);
  background-size: cover;
  filter: blur(4px) brightness(50%) saturate(50%);
  left:0; top:0; right:0; bottom:0;
}
```
Bu, grafiğe bulanıklık ve karartma filtreli bir arka plan bindirir. Grafiğin önde kalması için ::after ile geliştirilmiş bir sürüm de var:
```
.workspace-leaf-content[data-type="graph"] .view-content::after {
  z-index: -1; content:""; position:absolute;
  background-image: url(https://picsum.photos/200);
  filter: blur(4px) brightness(50%) saturate(50%);
  left:0; top:0; right:0; bottom:0;
}
```
Böyle stiller, Graph View’in görünümünü belirgin şekilde değiştirir ve arka planı daha atmosferik yapar (kod parçaları [40] tartışmasından alınmıştır).
Görsel ve videoların etkileşimi. Okuma rahatlığı için gömülü medyaya “akıllı” ölçekleme ekleyebilirsin. Görseller için bir parçacıkta, üzerine gelince imleç değişir ve tıklayınca görsel tam ekrana açılır:
```
.view-content img { max-width:100%; cursor:zoom-in; }
.view-content img:active { cursor:zoom-out; }
/* ve sabitlemek ve ortalamak için .image-embed:active kuralları */
```
Videolar için takma adlar atayıp oynatıcıyı buna göre küçültebilirsin. Bir Telegram sohbetinden: bir video nesnesine vid-20 takma adı eklediğinde şu kural
```
[alt~="vid-20"] video { width: 20%; }
```
uygulanır ve video hemen ekran genişliğinin %20’sine küçülür. Yani bir nota ![[video.mp4|vid-20]] koyarak küçültülmüş bir video elde ederiz. Bu hile, büyük medya dosyalarıyla çalışırken UX’i iyileştirir (örnek bir kullanıcının sohbetinden alındı).
Mobil cihazlara uyarlama. Medya sorgularıyla arayüzü mobil ekranlara göre ayarlayabilirsin. Yukarıdaki yazı tipi boyutu örneğinin yanı sıra, sık sık panellerin genişliği ya da başka boyutlar ayarlanır. Örneğin yan ağaçtaki klasör ve öğelerin boyutunu değiştirebilirsin:
```
@media (max-width: 480px) {
  .tree-item-children, .nav-folder-title {
    font-size: 17px;
  }
}
```
(parçacık, mobil için yazı tiplerini ve gezinme paneli öğelerini ayarladıkları aynı tartışmadan alındı). Böyle bir uyarlama, uygulamayı küçük ekranlarda kullanışlı kılar.

Devam edelim mi?

🧠 Callout manager — CSS ve karmaşık şeyler olmadan callout oluşturma

⬅️ Ana sayfaya dön

Elton Labs

🎨 CSS dosyalarıyla Obsidian'ı özelleştirme

CSS dosyası nedir ve Obsidian’da neden gerekli?

📁 CSS dosyaları nerede etkinleştirilir?

🔥 Özel CSS dosyamdan bir örnek

✨ CSS dosyalarıyla başka neler yapabilirsin?

Örnekler: