Kullanım tekniği Stil Özelliklerine Nasıl Seçenek Eklenir?

Kullanım tekniği Stil Özelliklerine Nasıl Seçenek Eklenir?
1
3K

XenMake

Active member
Katılım
3 Şub 2019
Mesajlar
135
Tepki puanı
124
Puanları
43
Merhaba arkadaşlar;

Bir önceki dersimizde Stil Özellikleri Grubu Nasıl Oluşturulur? konusunu ele almıştım. Şimdi ise oluşturduğumuz bu grup içerisine yönetilebilir seçenekler eklemek istiyorum.

Nasıl yapılır hep birlikte görelim...

Öncelikle daha önce oluşturduğumuz grup linkine tıklıyoruz.

470

Açılan sayfada Add property butonuna tıklıyoruz.

471

Dilerseniz yine burada Edit butonuna tıklayarak daha önce oluşturduğumuz grubu yeniden de düzenleyebilirsiniz. Neyse Add property butonuna tıkladıktan sonra açılan sayfada aşağıdaki gibi bir ekran gelecektir.

472

Hemen bunların neler olduğu konusunda bilgiler vereyim.

Property name: Özellik adı, Burada aslında tasarım aşamasında kullanacağımız benim tanımladığım biçimi ile stil özellikleri ID si de diyebiliriz. Çünkü ilerleyen derslerde de göreceğiniz üzere buraya verdiğimiz ismi kullanarak şablonlara uygulayacağız. Bu ad benzersiz olmalıdır. Aynı ad ile iki kez stil özelliği oluşturamazsınız. O yüzden vereceğiniz isimler benzersiz olmalıdır.
Title: Burada stil özelliğimize bir başlık belirtebilirsiniz.
Description: Oluşturulan stil özelliğine bir açıklama girebilirsiniz.
Type: Bu alan fonksiyoneldir. Yani Type alanında eğer CSS seçili ise burada css kodlarımızı gireceğimiz bir panel yaratılır. Yok burada Value değeri seçilirse o zaman da tema için seçenekler oluşturacağımız bir panel açılır. Biz her ikisini de kullanacağız. Tabii sırası ile.

Öncelikle bu değerleri açıklayayım.

Type alanı eğer CSS seçili ise:

473

Bu şekilde göreceksinizdir. Burada bulunan ifadeler oluşturulacak less (css) seçenekleri paneline yansıyacaktır. İfadelerin neler oldukları zaten görünmektedir. Burada bulunan ifadelerin yanındaki kutucukları işaretleyerek oluşturduğunuz css kalıbının hangi değerler içinde olmasını belirleyebilirsiniz.

Type alanı eğer Value seçili ise:

474

Resimde görmüş olduğunuz gibi başka bir biçimde açılmaktadır. Hemen bunların neler olduğunu açıklayayım.

Burada oluşturulacak stil özelliği için bir Value type yani Değer türü seçmemiz gerekir. Bu değer türleri stil özelliğinin nasıl çalışacağını belirtir. Aşağıdaki değerleri daha iyi açıklama için isterseniz bir özellik oluşturalım. Ben temada yer alan breadcrumbs özelliğini devre dışı bırakmak için bir özellik ekleyeceğim.

Aşağıdaki resimde görebilirsiniz.

475

Sonuç:

476
 
Bilgi Kaynak Erişimi
https://xentr.net/

En Çok Tepki Alan 5 Mesaj

Evet arkadaşlar buraya kadar stil özelliklerine seçenek eklemeyi anlatmış oldum. Şimdi sıra geldi bu seçeneklerin tema üzerinde uygulanma aşamasına.

Öncelikle ne yaptığımızı tekrar gözden geçirin. Bir stil özelliği ekledik ve bu özelliğin tema üzerinde nasıl çalışacağı konusunu ele alıyoruz.

Başlıyoruz,

Bu yapmış olduğumuz özelliği isterseniz .less uzantılı şablonlarda yada direk olarak şablonların kendisinde kullanabiliriz. Benim genel tercihimi soracak olursanız ben zorunlu kalmadıkça şablonlar üzerinde bir değişiklik yapma taraftarı değilim. Ama icap ettiği taktirde de yaparım. Sebebi ise sistem güncellemelerinde değişiklik yaptığınız şablonlar güncelleme ve yükseltme dosyalarını otomatik olarak almazlar, bu nedenle extra.less şablonunda çalışmak daha mantıklıdır. İleri ki derslerde sadece extra.less şablonu yerine kendi oluşturduğumuz .less uzuantılı şablonlarda çalışma mantığını da anlatacağım. Ama bu genel bir ders olduğu için şimdilik extra.less şablonu üzerinde çalışacağız.

extra.less şablonu üzerinde yaptığımız stil özelliğini uygulamaya geçelim.

Bizim stil özelliği için atamış olduğumuz isim breadcrumbsKapat bunu nasıl kullanabiliriz.

Ekli dosyayı görüntüle 477

Biz burada web sitemizde görmüş olduğumuz breadcrumbs yapısını istersek tüm kullanıcıların görmesini engelleyebilir istersek gösterebiliriz.

Bunu için yapmamız gereken basit bir şekilde koşullu bir ifade kullanmak bunu yaparken koddaki şu alana dikkat ediniz.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Evet yapmak istediğimiz kod aşağıdaki gibidir. Burada biz sitemizin üstünde ve altındaki breadcrumbs alanlarını kaldırmış olduk.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Bu kodu extra.less şablonuna yapıştırıyoruz. ve kaydediyoruz.

Sonuç:

Oluşturduğumuz stil seçeneği pasif iken breadcrumbs alanları tüm kullanıcılar tarafından görülebilmektedir.

Stil özellikleri sayfası

Ekli dosyayı görüntüle 478

Forum sayfası:

Ekli dosyayı görüntüle 479

Oluşturduğumuz stil seçeneği etkin iken breadcrumbs alanları tüm kullanıcılara gizlenecektir .

Stil özellikleri sayfası

Ekli dosyayı görüntüle 480

Forum sayfası:

Ekli dosyayı görüntüle 481
Evet arkadaşlar buraya kadar stil özelliklerine seçenek eklemeyi anlatmış oldum. Şimdi sıra geldi bu seçeneklerin tema üzerinde uygulanma aşamasına.

Öncelikle ne yaptığımızı tekrar gözden geçirin. Bir stil özelliği ekledik ve bu özelliğin tema üzerinde nasıl çalışacağı konusunu ele alıyoruz.

Başlıyoruz,

Bu yapmış olduğumuz özelliği isterseniz .less uzantılı şablonlarda yada direk olarak şablonların kendisinde kullanabiliriz. Benim genel tercihimi soracak olursanız ben zorunlu kalmadıkça şablonlar üzerinde bir değişiklik yapma taraftarı değilim. Ama icap ettiği taktirde de yaparım. Sebebi ise sistem güncellemelerinde değişiklik yaptığınız şablonlar güncelleme ve yükseltme dosyalarını otomatik olarak almazlar, bu nedenle extra.less şablonunda çalışmak daha mantıklıdır. İleri ki derslerde sadece extra.less şablonu yerine kendi oluşturduğumuz .less uzuantılı şablonlarda çalışma mantığını da anlatacağım. Ama bu genel bir ders olduğu için şimdilik extra.less şablonu üzerinde çalışacağız.

extra.less şablonu üzerinde yaptığımız stil özelliğini uygulamaya geçelim.

Bizim stil özelliği için atamış olduğumuz isim breadcrumbsKapat bunu nasıl kullanabiliriz.

477

Biz burada web sitemizde görmüş olduğumuz breadcrumbs yapısını istersek tüm kullanıcıların görmesini engelleyebilir istersek gösterebiliriz.

Bunu için yapmamız gereken basit bir şekilde koşullu bir ifade kullanmak bunu yaparken koddaki şu alana dikkat ediniz.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!
Evet yapmak istediğimiz kod aşağıdaki gibidir. Burada biz sitemizin üstünde ve altındaki breadcrumbs alanlarını kaldırmış olduk.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Bu kodu extra.less şablonuna yapıştırıyoruz. ve kaydediyoruz.

Sonuç:

Oluşturduğumuz stil seçeneği pasif iken breadcrumbs alanları tüm kullanıcılar tarafından görülebilmektedir.

Stil özellikleri sayfası

478

Forum sayfası:

479

Oluşturduğumuz stil seçeneği etkin iken breadcrumbs alanları tüm kullanıcılara gizlenecektir .

Stil özellikleri sayfası

480

Forum sayfası:

481
 
Quick Jump
2,671Konular
12,571Mesajlar
1,448Kullanıcılar
BaKaBSon Üye
Geri
Üst