Drupal 7 temalarında Bootstrap ve Font Awesome kütüphanelerinden modül kullanmadan nasıl faydalanabileceiğinizi merak ediyorsanız bu makale tam size göre.
Bootstrap kütüphanesini temaya entegre etme
Bootstrap kütüphanesini bu linkten indiriyoruz. İndirdiğimiz .zip dosyasını açıyoruz ve dist klasörü içine giriyoruz.
Dist klasörü içerisinde karşımıza "css,fonts,js" klasörleri çıkıyor. Css klasörü içerisindeki bootstrap.min.css css dosyasını kullandığımız temamızın ana dizinindeki css klasörünün(../sites/all/themes/tema/css) içine atıyoruz.
Dist klasörü içerisinde karşımıza çıkan Js klasörü içerisindeki bootstrap.min.js script dosyasını temamızın ana dizinindeki js klasörünün(../sites/all/themes/tema/js) içine atıyoruz.
Dist klasörü içerisinde karşımıza çıkan Fonts klasörünü klasör olarak temamızın ana dizinine(../sites/all/themes/tema) atıyoruz.
Bu işlemlerden sonra tema dizinimize attığımız dosyaları temamızın görmesi için tema.info dosyasına gerekli satırları ekliyoruz.
Css dosyası için;
stylesheets[all][] = css/bootstrap.min.css
Js dosyası için;
scripts[] = js/bootstrap.min.js
satırlarını ekliyoruz.
Sitemizin önbelleğini temizliyoruz. Bu işlemlerden sonra bootstrap kütüphanesini sitenizde dilediğiniz gibi kullanabilirsiniz.
Font Awesome kütüphanesini temaya entegre etme
Font Awesome kütüphanesini bu linkten indiriyoruz. İndirdiğimiz .zip dosyasını açıyoruz ve karşımıza çıkan Css klasörü içerisindeki font-awesome.min.css dosyasını temamızın ana dizininde bulunan css klasörüne atıyoruz.
Kütüphane içerisinden çıkan Fonts klasörü içerisindeki dosyaların hepsini Bootstrap kütüphanesini entegre ederken kullandığımız temamızın ana dizininde oluşan Fonts klasörüne atıyoruz.
Bu dosyaları temamızın görmesi için tema.info dosyasını tekrar düzenliyoruz.
stylesheets[all][] = css/font-awesome.min.css satırını tema.info dosyasına ekliyoruz. Sitemizin önbelleğini temizliyoruz. Font Awesome da temamıza entegre olmuş durumda.
CDN ile Bootstrap ve Font Awesome kütüphanelerini kullanma
Aşağıdaki kodları html.tpl.php dosyanızdaki head tagları arasına ekleyiniz.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.x.x/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.x.x/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.x.x/css/font-awesome.min.css" rel="stylesheet">
Kodlarda aradaki "x" yerlerine en son sürüm numaralarını yazmanız gerekmektedir.
Bu sistemleri nasıl kullanacağınız sizin yaratıcılığınıza bağlı elbette.
İyi çalışmalar.