Bilgi Style Switcher eklenti geliştirme

[XenTR]

Herkese merhaba,

XenTR.Net olarak stiller üzerinde kullanıcıların kendi tercihlerini kullanabilmeleri için ücretsiz bir eklenti geliştirmeyi düşünüyorum. Bu doğrultuda fikir ve önerilerinizi almak istiyorum.

Eklenti klasik stil değiştirici özellikleri ile gelecektir. Örneğin ziyaretçiler siteyi tam genişlikte (Wide) yada kutulu (Boxed) düzende görüntüleyebileceklerdir. Ayrıca arka plan renkleri veya arka plan görüntülerini seçebileceklerdir.

Ön tanımlı olarak şu anda 8 renk seçeneği var bu artırılabilir yada azaltılabilir. Yine ön tanımlı olarak 9 pattern ve yine 9 arkaplan görüntü seçebilme özelliklerine sahip olacaktır. Cookies özelliği sayesinde seçilen özellik sayfa yenilense dahi kullanıcı değiştirmediği sürece aynı kalacaktır.

Şu anda renk seçimi için ben Gradient seçimini kullandım ama bu seçim sadece herhangi bir renk olarak da verilebilir. Gelen yorumlar doğrultusunda bu seçim belirlenecektir.

Tabi renk seçimleri ile ilgili olarak kişisel tercihleri de göz önüne alarak ilgili alanlara ait "class yada ID" lere bağlı stiller için panel üzerinden ekleme yada çıkarma seçenekleri olacaktır. Çünkü kimin hangi alanları renklendirmek istediği konusu tercih meselesi olacağından dolayı bu seçenek kullanıcı tercihine bırakılacaktır.

Ayrıca seçilen kullanıcı gruplarının kullanımı ile istediğiniz kullanıcı grubuna bu seçenekleri sunabilirsiniz.

Bir ekran görüntüsü ile görüş ve önerilerinizi almak istiyorum.



Genel hatları ile bu şekilde soldan açılan bir menüye bağlı olarak işlevselliğini yerine getirecektir. Eklemek istediğiniz yada olmasını istediğiniz yapıları belirtirseniz geliştirme aşamasında bana da yardımcı olabilirsiniz.

 

[XDinc]

Osman Bey merhabalar,
Eklenti sürecinde düşündüğümüz gibi benim önerimlerim şu şekilde;

• Daha fazla renk seçeneğini sunmak.
• Switcher butonunun sadece belirtilen kullanıcı grupları bazında seçilebilir/yönetilebilir olması. (Bir nevi user_permis eklenmesi)
• Kullanıcılar kendi bg (background) yönetimini yapabilir olmalı.
• Renk değişimi sonrası logonun ilgili renk seçimine göre uyarlanabilmesi adına alternatif logo ekleme alanlarının bulunması.

vb. kullancı deneyimini/özelleştirmesini artırabilecek seçenekler eklenebilir.

 

[XenTR]

Öneriniz için teşekkür ederim Övünç Bey;

Daha fazla renk seçeneğini sunmak.

Bu konuyu dile getirdim renk seçenekleri artırılabilir yada azaltılabilir.

Switcher butonunun sadece belirtilen kullanıcı grubları bazında seçilebilir olması.

Yönetici tarafından Switcher özelliği istenilen kullanıcı grupları için ayarlanabilir olacaktır.

Kullanıcılar kendi bg (background) yönetimini yapabilir olmalı.

Bu konu admin taraflı olarak değerlendirilebilir. Ziyaretçilerin kendi arka plan görüntülerini değiştirmeleri bu sürüm için planlanmamaktadır. Zaten ziyaretçi için yönetim panelinden seçenekler sunulmaktadır. Belki ziyaretçilerin kendi arkaplan görüntülerini ekleyebilmeleri için bir background URL verilebilir.

Renk değişimi sonrası logonun ilgili renk seçimine göre uyarlanabilmesi adına alternatif logo ekleme alanlarının bulunması.

Renk seçimleri zaten açılan Switcher alanında bulunan logoya otomatik uygulanmaktadır. Farklı logo derken sistemin kendi logosu bu alanda görüntülenmektedir. Yine bunun için de bir logo alanı yaratılabilir ama çok hoş olacağı düşüncesinde değilim.

 

[Levi45]

Bence super olur, calismalarinizda basarilar dilerim.

 

[Hasip]

Hocam benim gibi otomobil sitesine sahip olanlar için müthiş bir eklenti olacaktır. Düşünsenize beğendiğiniz arabanın arka planda resmini görüyorsunuz

 

[mkucuksari]

Şu aşamada ilave bir şey aklıma gelmiyor. Bu hali ile bence süper, ellerinize emeklerinize sağlık

 

[XenTR]

Talepler doğrultusunda geliştirmeler devam edecektir.

 

[XenTR]

Herkese merhaba,

Gradient renk seçimi stil özelliklerinde çok fazla yer tutması nedeni ile normal renk paletleri ile devam etmeyi uygun gördüm. Her yöneticinin rahatlıkla yönetebileceği bir yapı olması için herhangi bir kod ile uğraşmadan direk panel üzerinden yönetilebilir olması için çalışıyorum. Aksi taktirde basit bir şekilde kodlanabilirdi.

Örnek yapı sadece renk biçimlendirmeleri için diğer özellikler üzerinde çalışmaktayım.



Resimde de gördüğünüz gibi arka plan rengi ve bu rengin içerisinde yer alan linkler ve açıklamaların olduğu alanlar için renk seçimleri yapılabilmektedir. Kod parçalarını sayfa kaynak kodu üzerinden bulabilirsiniz. Her temanın yapısı farklı olabileceği için burada ilgili alanlara ait ID ve class lara denk gelen css yapısını girmeniz için alan yaratılmıştır.

Her renk kodu kendi değerini alacağı için kodlarınızı yazarken şu hususa dikkat etmeniz gerekir. Örneğin header alanını kırmızı yapmak isterseniz panel üzerindeki alana şu şekilde yazmanız yeterli olacaktır.

Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Dikkat ederseniz html.red kodu mevcut. Bu kodu kırmızı olarak yapmak istediğiniz tüm css kodlarınızın başına getirmelisiniz. Ayrıca eklediğiniz her kod sonrasında virgül , olmalıdır. Sadece virgül son kodunuz da olmayacak. Yukarıdaki koda bakarsanız daha net anlayabilirsiniz.

Yakın zamanda bitirmeyi planlamaktayım. Umarım herkes için faydalı bir eklenti olur.

 

[Levi45]

Kolay gelsin sadece renk adimi olacak yoksa colour code da kullanabilirmiyiz?

 

[XenTR]

Kolay gelsin sadece renk adimi olacak yoksa colour code da kullanabilirmiyiz?

XenForo temel renk paletleri kullanılabilir. Dilerseniz sistemin kendi renklerini dilerseniz özel renkleri verebilirsiniz. Umarım doğru anlamışımdır.

 

[Levi45]

Html renk kodu demek istedigim. Ama renk secici ile de iyi olur sagolasin.

 

[XenTR]

Html renk kodu demek istedigim. Ama renk secici ile de iyi olur sagolasin.

Zaten html renk kodunu eklediğinizde bu şekilde rgb değerini almaktadır. Sorun değil olması gerektiği gibi yani...

 

[XDinc]

Son 48 saat Çok yakında sizlerle...
Çok güzel oldu arkadaşlar herkesin beğeneceğine eminim.

XenMake ???

 

[XenTR]

Herkese merhaba arkadaşlar;

Bu konuda gelinen son durum ile ilgili olarak bilgilendirme yapmak istiyorum. Sürecin biraz uzadığının farkındayım kusura bakmayın.

Öncelikli olarak basit gibi görünmüş olsa da göründüğü gibi değil. Çünkü XenForo tema yapısı iki renkten oluşmuyor. Dolayısı ile değiştirici yapısına göre üçüncül renklerin de tamamlanması gerekmektedir. Kullanıcılar için mümkün olduğunca kod yapısı ile uğraşmadan değiştirilebilir bir eklenti hazırlamaya çalışıyorum.

Övünç Bey son 48 saat demiş ama ben biraz daha uğraşmak istiyorum. Doğal olarak stil değiştirici için üçüncül renk biçimlerini ayarlamam gerekiyor. Buda stil özelliklerine yeni alanların oluşturulması anlamına geliyor benim için.

Şöyle bir örnek veriyim.
Standart tema üzerinden gittiğimi varsayarak Staff Bar, Header, Navigasyon alanlarını ele alalım. Stil değiştirici de renk değerleri standart olarak 2 renk tanımlaması ile gelmektedir. Header alanı için vereceğimiz arka plan rengi kırmızı olsun. Navigasyon alanı için de kırmızı arka plan rengini verirsek tek bir değiştirici renk kırmızı olduğuna göre burada staff bar alanı ayrı bir renk yapısı içermektedir. Ayrıca navigasyon alanı açılır menüleri de düşünürsek burada farklı bir tonlama yapılmalıdır sistem üzerinden her bir alan için renk vermektense tek bir renk seçimi ile bahsi geçen tüm alanların kontrolünden söz ediyorum. Bunların tamamlanması ile belki de kendi renk seçiminiz ile özel tema kullanmak yerine standart temayı kullanırsınız. Bu şu demek değil sadece standart temada çalışır diye algılanmasın. Tasarlarken sistem yapısını kullandığım için tüm temalarda sorunsuz olarak kullanılabilir.

Normal olarak bu ve benzeri bir çok değiştirici var ama genelde javascript alanında renk değiştirmek için verilmiş olan dosya yolları sunucu üzerine yüklenerek çalıştırılmakta. Buda doğal olarak manuel olarak bir işlemden öteye gitmeyecektir. Burada kullanıcıların yönetebilmeleri için panel üzerine stil dosyalarını entegre ederek daha fazla özelleştirme imkanı sunmaya çalıştım. Sadece kolay bir şekilde site sahipleri tarafından yönetilebilecek, ziyaretçi tarafından seçilebilecek bir eklenti oldu.

Şimdilik mevcut son haline ait ekran görüntüsü



Özellikleri konusuna gelecek olursam

• Custom Logo alanı aktif yada pasif edilebilir,
• Wide ve Boxed seçenekleri ile ister geniş isterseniz kutulu düzen seçenekleri kullanılabilir,
• Stil değiştirici de görülebilir tüm yazılar dil dosyasına yazdırılmıştır.
• Stil değiştirici paneline ait arka plan rengi yazı tipi, font biçimleri tamamen yönetilebilir.
• Ön tanımlı olarak her bir seçenek için 8 er tane seçenek konulmuştur. Örneğin renk değiştirmek için 8, Pattern değiştirmek için 8 Background değiştirmek için 8 seçenek bulunmaktadır.
• Tek bir tuş ile anında orijinal temanızın ayarlarına dönebilirsiniz. Reset Color ve Reset Background butonları ile her şeyi sıfırlayabilirsiniz.
• Arka plan ve pattern resimlerinizi sunucunuza aşağıdaki yolu kullanarak aynı isim ve uzantı ile yüklemeniz yeterli olacaktır.
  Arkaplan Resimleri için sunucu yolu
  styles/xtr/style-customizer/bg/01.jpg
  Pattern görüntüleriniz için sunucu yolu
  styles/xtr/style-customizer/pattern/1.png

Basit şekliyle bu şekilde resimlerinizi yükleyebilirsiniz. Dikkat etmeniz gereken tek husus resimlerinizi aynı isim ve uzantı ile sunucunuza yüklemeniz. Zaten eklentiyi indirdiğinizde bu klasör ve dosyaları göreceksiniz. Daha sonra vay benim resimler görünmüyor vay şöyle olmuş kabul etmem "Görüyorsunuz anlatmaya gerek yok görüyorsunuz"

Panel Ayarlarına gelince

Öncelikle eklentinin çalışması için hangi kullanıcı gruplarının kullanacağını seçmeniz gerekir.



Şekilde görüldüğü gibi göstermek istediğiniz kullanıcı gruplarını seçerek kaydedin.

Renk değerlerini ayarlamak için stil özellikleri sayfasından aşağıda resimde gösterildiği gibi stile ait css kodlarınızı ilgili alanlara gösterildiği gibi girmeniz gerekir. Bu sayede stilinizin tamamını kontrol edebileceğiniz bir alan yaratılmıştır. Ben örnek olması açısından blue (mavi) renk seçeneğini kullandım.


Burada stilin renk değerlerini algılaması için js tabanlı bir class eklenmektedir. Sistemde kullanılan renk classları aşağıda yer almaktadır.
Örnek kodlar:

Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Ben yukarıdaki resimde [xf="blue"] kodunu örnek olarak gösterdim. Burada dikkat etmeniz diğer bir husus ise normal css yazım kuralımıza dikkat etmemiz gerekmektedir. Aşağıdaki kodlar örnektir. Siz stilinize ait hangi alanların belirtilen renk biçiminde olması gerektiğine sayfa kaynağından bakarak kolayca bulabilirsiniz.

Bu şekilde yapmış olmamın sebebini sanırım anlamışsınızdır. Çünkü herkesin kullandığı sitilin css biçimlerini bilmem mümkün değildir.

Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Her bir css yapımızın sonunda , olduğunu görüyorsunuz. Sadece en son yazdığımız [xf="blue"] .p-body-main .block-header css yapısından sonra virgül bulunmamaktadır.

Anlaşıldığı gibi aslında çok basit ama anlatmak beni yordu. Şimdi bir sigara molası...

 

[XenTR]

Arkadaşlar üzülerek belirtmeliyim ki daha önce bahsetmiş olduğum tertiary (üçüncül) renk planlamasını şimdilik kaldırmış bulunuyorum. Açıkça söylemek gerekirse neredeyse tüm temayı yeniden kodlamak gibi bir durum söz konusu olmaktadır. Bunu birde 8 ayrı renk tonu için düşünürseniz ne denli uğraş verilecek bir şey olduğunu görebilirsiniz. Bir çok alana ait farklı renk tonlamaları söz konusu. Biliyorum bu konuda geliştirmeleri sürdürdüğümü yazdım, ancak yapılmayacak bir şey değil fakat bunun için çok fazla zaman harcamayı açıkçası şimdilik uygun görmüyorum.

Bir alana ait border color , hover color, selected color, transparent color vb değerleri ile birleşince bu eklentinin hemen yayınlanması zaman alacak. Şimdilik şu anki hali ile yayınlamayı düşünmekteyim. Gelecek sürümler için alternatif seçenekleri değerlendirebilirim.

Umarım eklentiyi beğenirsiniz. Sanırım yarın hazır olacaktır.

 

[XDinc]

Arkadaşlar üzülerek belirtmeliyim ki daha önce bahsetmiş olduğum tertiary (üçüncül) renk planlamasını şimdilik kaldırmış bulunuyorum. Açıkça söylemek gerekirse neredeyse tüm temayı yeniden kodlamak gibi bir durum söz konusu olmaktadır. Bunu birde 8 ayrı renk tonu için düşünürseniz ne denli uğraş verilecek bir şey olduğunu görebilirsiniz. Bir çok alana ait farklı renk tonlamaları söz konusu. Biliyorum bu konuda geliştirmeleri sürdürdüğümü yazdım, ancak yapılmayacak bir şey değil fakat bunun için çok fazla zaman harcamayı açıkçası şimdilik uygun görmüyorum.

Bir alana ait border color , hover color, selected color, transparent color vb değerleri ile birleşince bu eklentinin hemen yayınlanması zaman alacak. Şimdilik şu anki hali ile yayınlamayı düşünmekteyim. Gelecek sürümler için alternatif seçenekleri değerlendirebilirim.

Umarım eklentiyi beğenirsiniz. Sanırım yarın hazır olacaktır.

Ben mevcut durumu ile bir çok kullanının beğenisini kazanacağına eminim.
İllaki mevcut sürüm yayınlandıktan sonra üzerinde yeni geliştirmeler olacaktır, sonuçta tüm eklentiler onları kullanan kullanıcıların sayesinde gelişir.
Geri bildirimler olumlu yada olumsuz her geliştirici için önemsenecek-beslenecek en değerli kaynaktır.

@XenTR eklentinin türkçe dil paketini ek olarak siteye eklemeliyiz. (Burdan bize çıkan bir iş paketi daha )

 

[Hasip]

En iyi demo müşteridir diyorsun yani

 

[XDinc]

En iyi demo müşteridir diyorsun yani

Selam Hasip,
Müşteriye demo demek ayıp olur ben bilgi kaynağı dedim ...
Şaka bir yana zaten ücretsiz bi eklenti olacağı için gelişmesinde herkesin yorumu önemli olacak.
Saygılar.

 

[XenTR]

Umarız beğenerek kullanacağınız bir eklenti olmuştur. Kaynaklar alanından indirebilirsiniz. Konu ile ilgili olarak artık geri bildirimlerinizi lütfen eklenti konusu altında belirtiniz.

Buradaki konu artık kapatılmıştır.