Sorun Cevaplayalım

XenForo hakkında merak ettiğiniz tüm soru(n)lara 7/24 destek.

Çözümlenmiş Sorunlar

Yaşanan sorunların kolay çözüm yolları ve anlatımları.

Destek Ekibimiz Sizlerle

Ücretli destek talepleri ve özel hizmetler için yanınızdayız.

Flexbox ile duyarlı ızgara düzeni nasıl yapılır?

Kullanım Tekniği Flexbox ile duyarlı ızgara düzeni nasıl yapılır? 1.0.0

No permission to download
XenForo Sürümü
XenForo v2.0-2.1, XenForo v2.1+
Herkese merhaba arkadaşlar;

Bu konuyu bir çok arkadaşımız sormuştu. Bende sağda solda çok fazla bu sistem için yeterince bilgi bulunmadığı yada nasıl yapılması gerektiği tam olarak anlatılamadığı için bu eğitici derste bu konuya değineceğim.

Bu yapıda ister banner reklamlarınızı koyun isterseniz farklı amaçlar için kullanın. Tercih tamamen size kalmış.

Bu öğretici eğitimde Flexbox yapısı ile tamamen duyarlı çok sütunlu ızgara düzenleri nasıl yapılır onu öğreneceğiz.

flex-grid.png

Ben 12 sütunlu bir düzen yaptım.

Bu makaleye elimden geldiğince tüm kullanıcıların ihtiyaçlarını karşılayabilmesi için detaylandırıyorum.

Öncelikle yapmamız gereken bir kaç işlem var. Bunun için kullanmış olduğumuz temada 2 (iki) adet şablon oluşturuyoruz.

Şablon isimleri:

xtr_grid
xtr_grid.less


İlk olarak xtr_grid şablonunun oluşturuyor ve sonra aşağıdaki kodları bu şablonu içerisine kaydediyoruz.
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
xtr_grid şablonunda resim yolları görünmektedir. Örnekte vermiş olduğumuz resimleri ve resim yollarını kendinize göre değiştiriniz. Ayrıca linkler de yer alan https://xentr.net/ bağlantı adresini de değiştirmeyi unutmayın. Bunun dışında diğer html yapısına dokunmayın.
Örnek: <a href="https://xentr.net/" target="_blank"><img src="{{ base_url('styles/default/resim1.jpg') }}" alt="resim1" /></a> sadece bu alanda yer alan link, resim yolunu ve resmi kendinize göre uyarlayın.

Linkler yeni sekmede açılacak şekilde ayarlanmıştır. Eğer linklerin yeni sekmede açılmasını istemiyorsanız target="_blank" yazan yere aşağıdaki yapıları uygulayabilirsiniz.
target="_self"
target="_parent"
target="_top"

Detaylı bilgi için HTML a target Attribute sayfasını ziyaret edebilirsiniz.

Buradaki kod içerisinde yer alan base_url sizin sunucunuzda yer alan klasörleri işaret eder. Devamında yer alan styles/default/resim1.jpg yol ise XenForo temalarına ait styles klasörünü ve bu klasör içerisinde yer alan tema klasörünü göstermektedir. /public_html/styles/default

Biz örneğimizde standart temaya ait default klasörünü kullandık ve bu klasör içerisine resimleri gönderdik. Bizim bu örnekte kullanmış olduğumuz resim boyutları 1900px x 754px boyutlarındadır. Bilerek büyük boyutlu resimler üzerinde çalışma yapılmıştır. Herhangi bir boyuttaki ve uzantıdaki resimleri otomatik olarak resize etmektedir.

Ayrıca kodlarda gördüğünüz gibi xtr_grid.less şablonumuzu da bu html şablonumuza <xf:css src="xtr_grid.less" /> kodunu kullanarak çekmiş olduk.

Daha sonra xtr_grid.less şablonunu oluşturuyor ve yine içerisine aşağıdaki kodları yapıştırıp kaydediyoruz.

Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Şimdi gelelim bu oluşturmuş olduğumuz şablonu web sitemizde göstermeye;

Bunun için aslında bir çok yol bulunmakta ama ben basit bir şekilde anlatayım.

Öncelikle kullanmış olduğumuz tema şablonlarında yer alan PAGE_CONTAINER şablonunu açıyoruz ve aşağıdaki kodu temamızın neresinde göstermek istiyorsak o alana ekliyoruz.

Bu alanlar hakkında bir bilginiz yok ise PAGE_CONTAINER şablonunda şu satırı arayın. <xf:ad position="container_breadcrumb_top_below" /> Ben burada üst breadcrumb altında göstermesini istedim. Farklı alanlarda göstermek için konu altında yorum yapabilirsiniz.

Daha sonra bulduğunuz bu kod altına aşağıdaki kodu ekleyin.
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Artık flex yapısındaki ızgara düzenlerini görüyor olmanız lazım.

Şimdi bu ızgara düzenleri hakkında bilgilendirmeler yapmak istiyorum.

Standart olarak ızgara düzenleri 4 sütun olarak gelmektedir.Hemen şu soruyu duyar gibiyim.

Soru: Peki biz bu ızgara düzenlerini masaüstü cihazlarda 3 yada 2 Sütun olarak nasıl gösterebiliriz.
Çözüm: Çok basit. xtr_grid.less şablonunu açıyoruz ve aşağıda yer alan kod içerisindeki 4 rakamını dilediğiniz bir rakam ile değiştirebilirsiniz.
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Burada gördüğünüz gibi sütün sayısını dilediğiniz gibi belirleyebilirsiniz.

Soru: Peki resim yüksekliklerini nasıl ayarlarım?
Çözüm: Yine xtr_grid.less şablonunu açıyoruz ve max-height: 70px; kodunu arayın. Burada standart olarak ben 70px verdim. Siz bu değeri kendinize göre belirleyebilirsiniz.

Soru: Belirli üye grupları için nasıl gösterebilirim.
Cevap: Bunun için XenForo'nun koşullu ifadelerinden yararlanmak gerekmektedir. Örneğin sadece bir kullanıcı grubuna göstermek istersek aşağıdaki koşullu ifadeyi kullanabiliriz. Burada yer alan (x) işaretinin yerine göstermek istediğimiz kullanıcı grubu ID sini yazıyoruz.
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Birden çok kullanıcı grubuna göstermek için ise
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Yine aynı şekilde x ve y olan alanlara bu alanları görmesini istediğimiz kullanıcı grubu ID lerini yazmamız gerekmektedir.

İçeriği sadece ana sayfada göstermek istersek eğer aşağıdaki gibi bir kod kullanabiliriz.
Code:
Dear Guests, welcome! Please, Log in or Register to view hide content!
Tüm bu koşullu ifadeler XenForo'nun öngördüğü yapıya göre tercihinize göre şekillendirilebilir.

Umarım bu konu artık sizler için tam bir çözüm olmuştur. Anlamadığınız veya yapmak istediğiniz diğer işlemler için konu altında sorabilirsiniz.

Örnek resimleri ekten alabilirsiniz.


Lütfen bu konuyu web sitelerinizde yayınlarken bilgi kaynak erişimi olarak : XTR | Think Different and Make it... olarak belirtiniz.
Global Forum Bağlantısı
https://xentr.net/
Author
XenTR
Downloads
0
Views
123
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from XenTR

Top