Google’ın, Android 5.0 Lolipop sürümü ile Chrome’a eklediği “Sekme rengi değiştirme” özelliği, geçtiğimiz yıl Webmaster’ların kullanımına sunulmuştu. Bu yenilik hem web site geliştiricilerinin daha fazla mobil özelleştirmeye olanak sunması hem de mobil ziyaretçilerin zıt renkler ile karşılaşıp göz yorgunluğu yaratmasının önüne geçmişti.
Bu özellikle basit bir kod yerleştirmesi ile farklı altyapılara sahip sitelerde kullanılabiliyor. Bu özelliği daha çok WordPress, Joomla ve Drupal gibi CMS altyapı kullananlar tercih ettiği için anlatımı WordPress üzerinden gerçekleştireceğiz. Fakat kendi özel kodlamalı siteniz var ise yine aynı şekilde <head> kodundan sonraki satıra kopyalayıp kullanabilirsiniz.
Uygulanacak renk kodunu bulun
Açılan sayfada bir işlem yapmadan önce temanıza uygun renk kodunuzu hazırlayın. Eğer renk kodunuzu bilmiyorsanız ve Header (Üst Bölüm) deki rengi kullanacaksanız bunu iki şekilde öğrenebilirsiniz:
1- Temel seviyede kod bilginiz var ise kullanmak istediğiniz renk kodunun bulunduğu satırı .css sayfasından aratarak ‘#‘ diyez işaretiyle başlayan kodu kopyalayıp kenarda bekletin. Genellikle sekme rengi, header ve/veya menü ile uyumlu olması istenir. Css sayfasından “header, menu” kelimelerinden ulaşabilirsiniz.
2- Renk kodu çıkarıcı programlar ile bu işlemi çok zahmetsiz şekilde yapabilirsiniz. Colorpic ve Color Finder programlarıyla kodunu almak istediğiniz bölgenin üstüne tıkladıktan sonra size 4 farklı türden renk kodunu verecektir. Biz buradan RGB HTML kodunu kullanacağız. Yani ‘#’ işaretiyle başlayın kodu.
3- Renk kodu bulamadınız mı? Aşağıdaki sitelerden web sitenize uygun veya istediğiniz renk kodunu kullanabilirsiniz.
- https://brandcolors.net/
- http://flatuicolors.com/
- http://colorhunt.co/
- http://www.flatuicolorpicker.com/all
4- Renk kodunu bulduktan sonra aşağıdaki ilgili bölüme renk kodunuzu yapıştırın.
<meta name="theme-color" content="RENK KODUNUZ">
WordPress’de kodun temaya yerleştirilmesi ve aktif edilmesi
WordPress admin paneline giriş yaptıktan sonra ‘Görünüm‘ sekmesinden ‘Düzenleyici‘ bölümüne giriş yapıyoruz. Karşınıza çıkan CSS düzenleme ekranında hiçbir değişiklik yapmadan, sağ tarafta listelenen tema dosyalarından “Tema üst bölümü (header.php)” dosyasına tıklıyoruz.
Uygulama öncesi karşınıza en üstte şöyle veya benzer bir kod çıkması gerekir;
<!DOCTYPE html> <html> <head>
yukarıdakine benzer bir kod yapısı yok ise endişelenmeye gerek yok. Mevcut sayfada CTRL+F yaparak <head> kodunu aratıyoruz. Bu etiketten sonraki satıra aşağıdaki kodu yerleştirip kaydediyoruz.
Uygulama sonrası;
<!DOCTYPE html> <html> <head> <meta name="theme-color" content="#2c2a6b"> <-- Kalınlaştırılmış kod eklenecek.
Kodumuzu yukarıda belirttiğimiz şekilde uyguladıktan sonra dosyamızı kaydediyoruz ve mobil cihazdan Chrome’a girerek test yapıyoruz.
Renk kodu gözükmedi mi?
1- Web sitenizde önbellekleme (cache) eklentisi kullanıyor musunuz? Evet ise önbelleği temizleyip tekrar deneyin.
2- Sürekli girdiğiniz tarayıcıdan mı denediniz? Evet ise tarayıcı ayarlarından geçmişi silerek tekrar deneyin.
Tüm bu işlemlere rağmen kodunuz çalışmadı mı? Yorum kısmından bize yorum bırakın, yardımcı olalım.
Çok temiz bir anlatım olmuş, uyguladım teşekkürler 🙂