Tema Geliştirme

Bu kılavuz, Artado Search için özel bir tema oluşturma sürecinde size yol gösterecektir. İster CSS konusunda yeni olun ister deneyimli bir geliştirici, Artado için benzersiz bir görünüm tasarlamak için ihtiyacınız olan adımları ve ipuçlarını burada bulacaksınız.

Başlarken

Artado Search için bir tema oluştururken öncelikle CSS ile çalışacaksınız. Temanızı oluştururken canlı olarak test etmek ve değişiklikleri gerçek zamanlı görmek için Stylus Editör kullanabilirsiniz.

Stylus Editör Kurulumu

1. Stylus'u Yükleyin: İlk olarak, Chrome Web Mağazası veya Firefox Eklentileri üzerinden Stylus tarayıcı eklentisini yükleyin.
2. Stylus Editörüne Erişin:

• Tarayıcınızın araç çubuğundaki Stylus simgesine tıklayın.
• Stillerinize erişmek için Yönet (Manage) seçeneğini belirleyin.
• Temanızı oluşturmaya başlamak için Yeni Stil Yaz (Write New Style) butonuna basın.

Temanızı Ayarlama

• Artado Search'ü Hedefleyin: Stylus Editöründe, "Şuna uygulanır (Applies to)" ayarını CSS'inizin yalnızca https://www.artadosearch.com adresine uygulanacağı şekilde değiştirin. Bu, temanızın ziyaret ettiğiniz her web sitesine değil, yalnızca Artado Search'e uygulanmasını sağlar.

Temeller

Arka Plan Resmi Ekleme

Arka planı özelleştirmek, temanızın havasını belirlemenin harika bir yoludur.

Ana Sayfa Arka Planı

Yalnızca ana arama sayfasında görünen bir arka plan resmi eklemek için:

#homepage {
    background: url("Resim bağlantısı") no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Genel Arka Plan

Arka plan resmini arama sonuçları ve ayarlar dahil tüm sayfalara uygulamak için:

body {
    background-image: url("Resim bağlantısı");
}

Arama Çubuğunu Özelleştirme

Arama çubuğu, sayfadaki en belirgin öğelerden biridir. İşte onu nasıl özelleştireceğiniz:

Arama Çubuğu Kapsayıcısı (Container)

#searchbar {
    margin-bottom: 200px;
    width: 550px !important;   /* Otomatik Tamamlama Listesi genişliğiyle eşleştiğinden emin olun */
    border-radius: 10px;       /* Yumuşak köşeler */
}

Arama Giriş Bölümü (Input)

#searchinput {
    background-color: rgb(0, 0, 0);  /* Giriş alanı arka plan rengi */
    color: rgb(255, 255, 255);       /* Metin rengi */
}

Arama Butonu

#searchbutton {
    color: rgb(255, 255, 255);       /* Büyüteç simgesinin rengi */
    background-color: rgb(0, 0, 0);  /* Buton arka plan rengi */
}

Alt Çubuğu (Bottom Bar) Özelleştirme

Alt çubuk, genel temayı tamamlayacak şekilde stillendirilebilir:

#features .flex-wrap {
    padding-bottom: 20px;        /* Dolguyu dilediğiniz gibi ayarlayın */
    padding-top: 20px;
    color: #fff;                 /* Metin rengi */
    background-color: #000;      /* Arka plan rengi */
}

Gelişmiş Özelleştirmeler

Hover (Üzerine Gelme) Efektleri

Etkileşimli öğeler için hover efektleri eklemek için:

#searchbutton:hover {
    background-color: rgb(255, 165, 0); /* Üzerine gelindiğinde buton rengini değiştir */
    color: #000;                         /* Üzerine gelindiğinde metin/simge rengini değiştir */
}

Tipografi

Yazı tipini ve metin stillerini özelleştirmek için:

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;  /* Temel metin rengi */
}

h1, h2, h3 {
    font-family: 'Georgia', serif;
    color: #444;
}

Örnek Temalar

İlham almak ve öğrenmek için Artado topluluğu tarafından oluşturulan bu örnek temaları inceleyin:

• Merkür Teması
• Atatürk Teması
• HereUS UI 3.1

Test Etme ve Hata Ayıklama

Temanız üzerinde çalışırken, öğeleri incelemek, CSS değişikliklerini test etmek ve sorunları gidermek için tarayıcı geliştirici araçlarını (F12 veya Ctrl+Shift+I) kullanın.

Daha Fazlasını Öğrenin

Bu sadece başlangıç. Daha karmaşık temalar oluşturmakla ilgileniyorsanız, CSS dünyasına daha derinlemesine dalın:

• CSS Temelleri - CSS'e yeniyseniz harika bir başlangıç noktası.
• CSS Tricks - Stillerinizi geliştirmek için gelişmiş teknikler ve ipuçları.
• MDN Web Docs - CSS özellikleri ve en iyi uygulamalar için kapsamlı kaynak.

Temalarınızı Yükleyin

Temanızı oluşturduktan sonra toplulukla paylaşın! Temanızı Artado Devs adresine yükleyebilirsiniz:

1. Hesap Oluşturun: Artado Devs'e kaydolun veya giriş yapın.
2. Temanızı Yükleyin: Yükleme bölümüne gidin, bir açıklama ekleyin ve eserinizi dünyayla paylaşın.

---

Bu kılavuz, Artado Search için özel temalar oluşturmanız ve paylaşmanız için size güçlü bir temel sağlayacaktır. Farklı stiller denemekten ve Artado Search'ü kendinize özel yapmaktan keyif alın!