AllaTurkaa

Değerli forum üyeleri ve ziyaretçiler,

Sitenizin temasına ve düzenine kusursuz uyum sağlayacak, tamamen özelleştirilebilir yeni bir HTML Widget'ını kullanıma sunuyoruz: İsimler ve Anlamları Sözlüğü Widget'ı!

Bu widget, İslami ve güncel isimlerin anlamlarını, kökenlerini ve isim koyma usullerini modern ve yüksek kontrastlı (Koyu Gri/Turuncu/Beyaz) bir arayüzde sunar.

Widget'ın Temel Özellikleri

• Sekmeli Yapı: Kız İsimleri, Erkek İsimleri ve İslami Açıklama gibi bölümlere ayrılmış 5 ayrı sekme mevcuttur.
• Akordiyon Sistemi: İsimler, içeriği daraltılmış kartlar halinde listelenir.
  Tıklandığında sadece ilgili ismin anlamı ve kökeni açılır.
• Anlık Arama/Filtreleme: Arama kutusuna yazmaya başladığınız anda, tüm listeler arasında filtreleme yapar
  ve eşleşen ismi içeren sekmeye otomatik olarak geçer.
• Kolay Tema Yönetimi: Tüm renkler, boyutlar ve metinler HTML/CSS kod bloğu içinden saniyeler içinde değiştirilebilir.

Widget Nasıl Eklenir ve Özelleştirilir?

Bu widget, harici bir kütüphaneye ihtiyaç duymadan tek bir bağımsız HTML bloğu olarak çalışır. Aşağıdaki kodu (ekte vereceğiniz kodu), sitenizde widget'ın görünmesini istediğiniz herhangi bir yere yapıştırmanız yeterlidir.

1. Renkleri Değiştirme (Koyu Gri/Turuncu Tema)

Widget'ın tüm renkleri, CSS alanının en üstündeki :root değişkenleri ile merkezi olarak kontrol edilir. Bu sayede, tüm temayı sadece birkaç satırı değiştirerek kendi sitenizin renklerine uygun hale getirebilirsiniz.

Prensip: Değiştirmeniz gerekenler, #333333 gibi 6 haneli Hex kodlardır. Kendi renk kodlarınızı buraya yazmanız yeterlidir.

Ana Renk Değişkenleri:

--color-dark-grey: #333333; (Ana Arka Plan Rengi): Widget'ın temel koyu gri rengi.

--color-accent-orange: #FF8800; (Vurgu Rengi): Çerçeveler, ikonlar, liste işaretçileri ve arama kutusu kenarlıkları için kullanılan parlak Turuncu.

--color-footer-dark-bg: #CC5500; (Alt Bilgi/Footer): En alttaki Powered by yazısının arka planı için kullandığımız, diğer vurgu renginden daha koyu Turuncu.

2. Boyutlandırma ve Düzen Ayarları (En, Boy ve İç Boşluklar)

* Genişlik (En): Widget'ın genişliğini, CSS bölümünde .isim-widget-container içinde yer alan width: 350px; değerini değiştirerek kolayca ayarlayabilirsiniz. Widget'ın tam genişlikte görünmesini isterseniz, bu değeri width: 100%; olarak ayarlayabilirsiniz.

* İç Boşluklar (P10px Kodlaması): Widget içinde gördüğünüz tüm elementler arasındaki dikey ve yatay boşluklar (padding değerleri) sizin istediğiniz gibi kolayca ayarlanabilir.
Eğer sitenizdeki standart düzenleme kuralınız olan "P10px" kodlamasına uymak isterseniz, CSS alanında .isim-header, .search-container,
.aciklama-content gibi elementlerde varsayılan olarak 15px veya 20px olan padding değerlerini bulup 10px olarak değiştirmeniz yeterlidir. Bu, her satır arası aralığın daha dar ve kompakt olmasını sağlayacaktır.

Geliştirilebilirlik ve Sonuç

Bu widget tamamen geliştirilebilir ve ihtiyaçlarınıza göre esnektir. İçerik (isimler, anlamlar) tamamen HTML yapısında olduğu için, bir veritabanı bilgisine sahip olmadan kolayca güncelleyebilir ve yeni isimler ekleyebilirsiniz.

Görüş ve önerilerinizi bekliyoruz! Hayırlı olsun.