Bootstrap Barrio ile Drupal 8/9'da Bootstrap 4

Bootstrap 4'ü Bootstrap Barrio ile Drupal 8/9'da kullanacağız. Drupal 8/9 için Bootstrap Barrio teması, Bootstrap 4'ü (veya isterseniz Bootstrap 5'i) Drupal sitenizle bütünleştirir.

Bootstrap, web siteleri oluşturmak için çok popüler bir çerçevedir. Tasarımcılara ve geliştiricilere iletişim kurmak için ortak bir dil sağlayarak geliştirme sürecini çok daha kolay hale getirir.

Barrio'nun bir alt temasını oluşturmak basit bir işlemdir. Bu öğretici, eksiksiz bir grafik kullanıcı arabirimi aracılığıyla yönetilen temanın temel yapılandırma seçeneklerini keşfedecektir.

Nasıl olduğunu öğrenmek için okumaya devam edin!

Adım # 1.- Temayı yükleyin

Başlamadan önce sitenizde en az bir makale olduğundan emin olun, böylece tema ayarlarını değiştirdikten sonra karşılaştırma yapabilirsiniz. Ayrıca bölge kenar çubuğunun içine ikinci bir blok yerleştirin (Yapı > Blok düzeni > Blok yerleştir).

• İşletim sisteminizin terminal uygulamasını açın .
• İmleci Drupal kurulumunuzun kök dizinine yerleştirin.
• Tür : besteci drupal/bootstrap_barrio gerektirir

Bu, temanın en son kararlı sürümünü şuraya indirecektir: /web/themes/contrib/bootstrap_barrio

Adım # 2.- Bir Alt Tema Oluşturun

• İmleci bootstrap_barrio tema dizinine yerleştirin
• Tür :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Bu, scripts klasörünün içindeki create_subtheme adlı betiği çalıştırılabilir hale getirecek ve onu da çalıştıracaktır.

Komut dosyası, özel alt temanız için bir makine adı ve açıklayıcı bir ad isteyecektir.

Size en uygun değerleri girin. Makine adının küçük harf olması gerektiğini ve boşluk içermeyebileceğini unutmayın.

Bu adım isteğe bağlıdır:

• Alt temanızın dizinini (/web/themes/custom/mytheme) bir kod düzenleyicide açın
• Tüm "Bootstrap Barrio" örneklerini "Temanızın adı" ile değiştirin
• Tüm dosyaları kaydet

Burada sadece açıklayıcı metni değiştiriyoruz, bu yüzden bunu olduğu gibi bırakırsanız hiç sorun olmaz.

Adım # 3.- Önyükleme Barrio Ayarları

• Drupal sitenizin arka ucundaki Görünüm'e tıklayın
• Özel temanıza ilerleyin
• Yükle'yi tıklayın ve varsayılan olarak ayarlayın

Tema yüklendikten sonra,

• Tema Ayarları bağlantısını tıklayın

Aşağıdaki seçeneklerle ekranın sol tarafında bir grup dikey sekme göreceksiniz:

1. Düzen (etkin sekme)
2. Bileşenler
3. Takmak
4. Kaydırma Spy
5. Yazı tipleri ve simgeler
6. Renkler

Düzen

Varsayılan olarak 'Düzen' sekmesi etkindir. İlk seçenek olan "Konteyner", sitenizin öğelerinin sabit bir genişliğe sahip olup olmayacağını veya tam tersine ekranın tüm boyutunda görüntülenip görüntülenmeyeceğini belirtir. Şimdiye kadar bu seçeneğe dokunmadan bırakın.

`Region` bölümü içerisinde sitenin bölgelerine özel CSS sınıfları atamak mümkündür.

• Belirli bir bölgeye kendi özel sınıfınızı ekleyin

• "Bölge" bölümünü kapatın
• "Kenar çubuğu konumu"nu açın
• "Kenar çubukları konumu"nun değerini Sola değiştirin
• "Kenar çubuğu ilk düzeni" ve "Kenar çubuğu ilk düzeni"ni açın
• Değerleri sırasıyla 3 sütun ve 2 sütun olarak değiştirin

Bileşenler

• 'Bileşenler' dikey sekmesine tıklayın
• Düğme öğesini anahat biçimine değiştirin
• Tüm içerik resimlerine img- fluid stili uygula seçeneğini işaretleyin

Bu, içerik düzenleyicinin resim düğmesi aracılığıyla eklediğiniz resimleri varsayılan olarak duyarlı hale getirecektir. Görüntü, ekranın boyutuna sığacak şekilde küçülecektir.

"Gezinme yapısı" bölümü, gezinme kabının boyutuyla ilgilenir. İki gezinme çubuğu (navbar-top ve navbar) arasında ayrım yapmanız gerekir. Navbar, sitenizin ana gezinme menüsüdür.

• Navbar konumunu Sabit alt olarak ve Navbar bağlantı rengini Koyu olarak değiştirin
• Küçük ekranlarda kayan bir ana menüyü görüntülemek için "Gezinme çubuğu davranışı" bölümünde Kayan gezinme çubuğunu işaretleyin.

'Bileşenler' yapılandırma seçeneğinin son 3 bölümü, Drupal'ın dahili mesaj sistemi tarafından iletilen mesajların konumuna, yerel görevler için sekmelere (içerik düzenleme sekmesi gibi) ve form öğelerinin görünümüne atıfta bulunur. Bu seçeneklere dokunmadan bırakın.

Takmak

Affix ile bir elemanı sabitlemek, yani CSS konum özelliğinin değerini sabit olarak ayarlamak mümkündür.

kaydırma casusu

Scrollspy, imlecin konumuna göre, yani sitede yukarı veya aşağı kaydırırsanız, bir gezinme menüsünün bağlantılarını otomatik olarak güncellemek için kullanılır. Bu konu gelecekteki bir eğitimde ele alınacaktır.

Yazı Tipleri ve Simgeler

Burada, sitenizin metni için farklı Google Fonts yazı tipi kombinasyonları arasında seçim yapma seçeneklerine sahipsiniz. Ayrıca, gönderilerinizde kullanmak için önceden tanımlanmış simgeler arasından seçim yapabilirsiniz.

• Beğendiğiniz yazı tipi kombinasyonunu ve simge setini seçin

Renkler

Drupal'ın dahili mesajlarının rengini özelleştirmek için burada seçenekleriniz var. Sitenin tablolarını özelleştirmek için seçenekler vardır, örneğin Görünümler modülüyle oluşturulanlar.

Aşağı kaydırmaya devam ederseniz, alt temanız için "Renk şeması"nı bulacaksınız. Varsayılan tema bölgelerinin metin ve arka plan renklerini özelleştirebilirsiniz.

Kilit simgesini kullanarak her bir öğenin rengini beğeninize göre özelleştirebilir ve engelleyebilirsiniz.

Sayfa Öğesi Görünümü, Logo Resmi ve Favicon

Bunlar, tüm Drupal temalarındaki varsayılan seçeneklerdir.

Kitaplığı Yükle

Tek bir tıklamayla temanızın görünümünü ve verdiği hissi geliştirmek için birden fazla çevrimiçi kullanıma hazır Bootswatch kitaplığı arasından seçim yapabilirsiniz. Bu seçenekler kontrol edilmeye değer.

Bootstrap'i (Bootstrap CSS ve JS) yerel olarak mı yoksa bir CDN aracılığıyla mı yüklemek istediğinizi buradan seçebilirsiniz. Bu konfigürasyon burada değiştirilmemelidir. .info.yml dosyasındaki kodu değiştirmek çok daha iyidir.

• Yapılandırmayı kaydet'i tıklayın

Sitenize bir göz atın. Bu eğitim size kullanıcı arayüzü tasarımını öğretmeyi amaçlamaz, bunun yerine Barrio temasıyla mevcut olasılıkları açıklar.

Ancak artık bir tasarımdan başlayabilir ve temayı ona uyarlamayı deneyebilirsiniz.

Umarım bu öğreticiyi beğenmişsinizdir. Okuduğunuz için teşekkürler!