En popüler destek sorusu: "(...) 'nin görünümünü değiştirmek için hangi CSS satırını düzenlemem gerekiyor". Birkaç yıl önce, CSS/HTML editörleri en kullanışlı web geliştirici araçlarıydı. Şimdi, Firefox, Safari, Chrome, Brave ve hatta MS Edge gibi her modern tarayıcıda yerleşik olan web kod hata ayıklayıcısı'nın çok daha faydalı olduğunu düşünüyorum.
Kod denetçisi, bir web sayfasının HTML, CSS ve JavaScript hatalarını incelemenizi, düzenlemenizi (değişiklikleri simüle etmenizi) ve hata ayıklamanızı sağlar. Tarayıcınızda bulunan web geliştirici araçlarını kullanma hakkında bilgi arıyorsanız, doğru yere geldiniz.
Tarayıcının web geliştirici aracı nasıl çalıştırılır?
İlk önce, Geliştirici aracını kullanma yöntemi tarayıcıdan tarayıcıya değişir. Burada Google Chrome ile başlıyoruz.
- Chrome için Menü > Diğer Araçlar > Geliştirici Araçlar'ını tıklayın veya eşdeğer klavye kısayolunu kullanın veya
- Bir öğe seçiliyken: Bir web sayfasındaki bir öğeye sağ tıklayın ve "İncele" yi seçin
Aşağıdaki ekran görüntüsü gibi tarayıcı penceresinin altında görünecektir.
Açıldığında, açılır ve geçerli tarayıcı penceresinin altına veya ayrı bir pencerede görülür (ayarlara ve tarayıcıya bağlıdır).
Bir web sayfasının DOM'sini oluşturan unsurları görüntüleyin ve inceleyin. Oluşturulan site HTML'si solda görünür ve tamamen düzenlenebilir niteliktedir ve web sayfasının düğümleri, stilleri ve katmanlarıyla ilgili ayrıntılar sağdaki kenar çubuğunda bulunur. Burada Firefox dev araçlarıyla ilgili bir video var.
Chrome için resmi belgeleri takip edebilirsiniz. Temel maddeleri daha hızlı öğrenmek için bu makaleyi okumaya devam edin.
Web geliştirici araçları nasıl kullanılır?
Araç çubuğu genellikle ekranın altında bulunur, denetçiyi kontrol edebilirsiniz. Seçtiğiniz öğe vurgulanır ve sayfadaki diğer öğeler soluklaştırılacaktır. Düzenleme, web içeriği çıktısını HTML, CSS ve JavaScript kodlarında yapılan ayarlarla önizlemenizi sağlar. En yaygın CSS özelliklerini kullanarak geliştirmeyi daha verimli hale getiren ve en önemli tweak stillerinin ne olduğunu tüm kaynakları kontrol etmenize yardımcı olur.
Herhangi bir HTML öğesini düzenleyebilir ve hem CSS bloklarıyla hem de görsel olarak CSS kurallarını düzenleyebilirsiniz.
Kurallar görünümünde bir bildirime veya seçiciye tıklarsanız, onu düzenleyebilir ve sonuçları hemen görebilirsiniz. Farklı mevcut özellikleri ve değerleri de seçebilir ve Enter veya Fare tuşuna basarak bunları düzenlemeye başlayabilirsiniz. Bir kurala yeni bir bildirim eklemek için kuralı son satırına tıklayın (kapanış ayracı tarafından kullanılan satır). Eğer bir özellik adını yazmaya başladığınızda, otomatik tamamlama öneriler listesi göreceksiniz.
Mevcut öneriyi kabul edebilir veya listede ilerleyebilirsiniz. Varsayılan seçim, yazdığınız harflerle başlayan en yaygın özelliktir. Örneğin, burada kullanıcı "c" yazmışsa, varsayılan seçenek "renk" dir (yukarıdaki ekran görüntüsü). Bir özelliği düzenlerken geçersiz bir değer veya bilinmeyen bir özellik adı veya değeri girerseniz, bu satırda sarı bir uyarı simgesi görünür. Web denetleyicisi aynı zamanda renkler, yazı tipleri ve animasyonlar gibi özel CSS özellikleri ile çalışmak için özel bir dizi araç içerir.
Ayrıca stil sayfası dosyalarında CSS kurallarını düzenleyebilir ve komut dosyası dosyalarında JavaScript'i düzenleyebilirsiniz (aşağıdaki ekran görüntüsü).
Yaptığınız herhangi bir değişiklik geçicidir: sayfanın yeniden yüklenmesi orijinal stilin geri yüklenmesini sağlar.
Uyarı! Geliştirici aracında yapılan değişiklikler şablonunuzun, bileşeninizin, modül CSS/JS dosyalarınızın içine KAYDEDİLMEZ. Değişen kod satırlarını kopyalamanız ve özel kod dosyalarınızda kullanmanız gerekir.
Çoğu tarayıcı, tarayıcınızdaki mobil cihazları taklit etmek için görünüm seçeneklere de sahiptir. Duyarlı Tasarım Modu (Responsive Design Mode) hızla çeşitli ekran boyutları, yönelimleri ve çözünürlüklerde genelinde web sayfasını önizleme için basit bir arayüz sağlar. Mobil gelişmeler için çok kullanışlı bir araç.
Neyi değiştirmem gerektiğini biliyorum, şimdi sırada ne var?
İstediğiniz değişikliği uygulamak için hangi CSS satırlarını geçersiz kılmanız gerektiğini biliyorsanız, şablonunuzun içinde özel kod kullanmanız gerekir. Yüklediniz ve varsayılan Helix3 veya Helix Ultimate şablonunu ayarladıysanız, tüm önemli değişiklikleri eklemek ve yeni satırlar eklemek için custom.css dosyasını kullanmanızı öneririz:
templates\shaper_NAME\css\custom.css
Evet, önce bu yeni dosyayı Joomla yöneticisinden veya FTP üzerinden oluşturmanız gerekir. Daha detaylı bilgiyi Helix El Kitabı bölümünde bulabilirsiniz. Bu yöntemi kullanarak tüm sitenizin tasarımını tek bir yerden kontrol edebilirsiniz.
Örneğin, tüm eklentilerin başlıkları kırmızı ise, her bir modül ayarında ayrı olarak değil, tek bir yerden değiştirebilirsiniz. Aynı SP Page Builder'daki addon stilleri ve diğer bileşenler için de yapabilirsiniz. Ana kural aynıdır.