Selamlar değerli dijital topluluk mimarları ve tasarımcılar,
Klasik forum yapıları artık can çekişiyor. İnternet kullanıcıları, 2000′lerin başından kalma, her köşesinden farklı bir eklentinin fırladığı o hantal XenForo veya vBulletin temalarından yoruldu. Bugün Türkiye pazarında niş ve otoriter bir teknoloji topluluğu inşa etmek istiyorsanız, ziyaretçiye Flarum’un o yağ gibi akan hızını ve Vercel’in o kusursuz, minimalist (Next.js hissiyatı veren) UI/UX deneyimini sunmak zorundasınız.
XenForo arka planda devasa bir güce sahip, ancak onu modern bir arayüze kavuşturmak ciddi bir LESS ve şablon (template) bilgisi gerektiriyor. Yapay zekaya “Bana güzel bir XenForo teması yap” dediğinizde size ancak varsayılan temanın renkleri değiştirilmiş, ruhsuz bir kopyasını verecektir.
Arama motorlarının Core Web Vitals değerlerine taptığı bu dönemde, XenForo’yu sıradan bir forumdan modern bir web uygulamasına (Web App) dönüştürecek, kodlaması temiz ve yapay zeka ayak izinden (footprint) tamamen arındırılmış 7 ustalık sınıfı promptu aşağıda paylaşıyorum.
—
🎨 Modern XenForo Tasarımı İçin 7 Master Prompt
1. Vercel/Next.js Tarzı Global LESS ve Tipografi Kurgusu
“Sen uzman bir UI/UX mühendisi ve kıdemli bir XenForo tema (style) geliştiricisisin. Yeni geliştireceğim temanın extra.less dosyası için temel yapı taşlarını oluşturmanı istiyorum. Vercel’in minimalist tasarım dilinden ilham alarak; temiz kenar boşlukları, çok hafif kutu gölgeleri (box-shadow) ve Inter veya Roboto font ailesine dayalı kusursuz bir tipografi hiyerarşisi kur. Klasik XenForo renk paletini aşarak, CSS değişkenleri (variables) kullanarak modern, monokrom ağırlıklı bir renk şeması yaz.”
2. Modern Kategori (Node) Grid Görünümü
“XenForo’nun varsayılan alt alta sıralanan liste şeklindeki kategori (node) yapısını tamamen değiştirmek istiyorum. node_list_category şablonunu modifiye etmek için bana öyle bir LESS kodu yaz ki, forum kategorileri masaüstü görünümde 2′li veya 3′lü şık grid (ızgara) kartlar halinde sıralansın. Her kartın üzerine gelindiğinde (hover) çok hafif bir yukarı kalkma animasyonu olsun. Kodun mobil cihazlarda (responsive) tek sütuna düşecek şekilde @media sorgularını eksiksiz içerdiğinden emin ol.”
3. Minimalist ve Hızlı (Sticky) Header Kurgusu
“Ziyaretçiyi yormayan, aşağı kaydırıldığında ekrana tutunan (sticky) ama çok az yer kaplayan minimalist bir navigasyon barı (header) tasarlıyoruz. PAGE_CONTAINER şablonundaki p-header ve p-nav alanlarını birleştiren, arama ikonunu ve kullanıcı profil menüsünü en sağa, logoyu sola yaslayan temiz bir LESS kodu yaz. Klasik XenForo navigasyonundaki o kalın blok hissini yok et, arkaplanı hafif şeffaf (backdrop-filter: blur) yap.”
4. Postbit (Mesaj Sahibi Alanı) Temizliği
“Konu okuma sayfalarında (thread view) kullanıcı profillerinin gösterildiği ‘postbit’ alanını (message_macros) modernize etmek istiyorum. Göz yoran eski tip çerçeveleri ve gereksiz istatistikleri gizle. Kullanıcı avatarını daha yuvarlak hatlı yap, rütbe (banner) tasarımlarını pastel renklerle minimal hap (pill) şekline getir. Mesaj içeriği ile postbit arasındaki ayrımı ince, zarif bir dikey çizgiyle sağla.”
5. LSI ve Schema.org Odaklı Konu (Thread) Optimizasyonu
“XenForo’nun thread_view şablonunu Google’ın E-E-A-T standartlarına ve semantik SEO kurallarına göre optimize edeceğiz. Sayfa kaynağında yer alan ilk mesajı, arama motorlarının kusursuz okuyabilmesi için JSON-LD ‘DiscussionForumPosting’ şeması ile nasıl daha zengin hale getirebileceğimi göster. Yapısal veri test aracında sıfır hata verecek, sadece gerekli <xf:if> kondisyonlarını barındıran temiz kod bloğunu yaz.”
6. JavaScript Yükünü Hafifletme (Core Web Vitals)
“Tema hızını maksimize etmek için XenForo’nun sayfa yüklendiğinde çağırdığı bazı gereksiz .js dosyalarını ve eklenti yüklerini (sadece misafirler için) geciktirmek veya engellemek istiyorum. helper_js_global şablonunda veya src/config.php üzerinden yapılabilecek, sitenin ilk zengin içerikli boyanma (FCP) ve en büyük zengin içerikli boyanma (LCP) sürelerini dramatik ölçüde iyileştirecek teknik modifikasyon önerilerini ve kodlarını adım adım listele.”
7. Erişilebilirlik (A11y) ve Gece Modu (Dark Mode) Değişkenleri
“Kullanıcıların tek tıkla geçiş yapabileceği, göz yormayan (pure black olmayan, koyu lacivert/gri tonlarında) bir karanlık mod (Dark Mode) sistemi kurmak istiyorum. XenForo’nun stil özelliklerini (Style Properties) kullanarak, ana renk paletini tek bir CSS sınıfı (.theme-dark gibi) üzerinden anında tersine çevirecek CSS değişken mimarisini yaz. Ayrıca butonlar ve linkler için WCAG 2.1 kontrast oranlarını karşıladığından emin ol.”
—
💡 Geliştirici Günlüğü: Şablonları Özgünleştirmek
Yapay zekanın LESS ve HTML/XF Sözdizimi (Syntax) konusunda verdiği kodlar genellikle sorunsuz çalışır, ancak temayı benzersiz kılan şey sizin ona katacağınız “kusurlardır”.
Lokal Testler: Özellikle büyük şablon değişiklikleri (PAGE_CONTAINER modifikasyonları) yaparken kodları canlı sitenizde değil, Ollama gibi yerel LLM’ler yardımıyla kendi bilgisayarınızdaki bir test (localhost) ortamında deneyin.
Küçük Pürüzler Ekleyin: AI tasarımları aşırı simetrik yapmaya bayılır. Temanızda bazı ögelere (örneğin etiketlere veya butonlara) kasıtlı olarak farklı bir border-radius veya asimetrik bir padding vererek o mekanik dokuyu kırın.
Topluluğun Sesi: Forum teması sadece estetik değildir; kullanıcı alışkanlığıdır. Vercel tarzı çok sade bir görünüme geçerken, sadık üyelerinizin alıştığı “Yeni Mesajlar” veya “Bildirimler” gibi kritik butonların yerini çok dramatik şekilde değiştirmemeye özen gösterin.
Modern forum mimarilerini tartışırken sormak isterim; sizce XenForo’yu Vercel veya Flarum gibi ultra-modern rakiplerinden ayıran en büyük avantajı (veya dezavantajı) nedir, bu yeni tasarımları entegre ederken hangi aşamada daha çok zorlanıyorsunuz?
