Class Suffix - Sonek Tanımlama (Modül Uygulaması) || Resimli Ders

[M.Enes AYDÜZ]

Joomla Sitelerinde daha önceden karşılaşmışsınızdır. Aynı modül pozisyonunda farklı arkaplan renkleri olan, yada farklı yazı stilleri olan modüller görmüşsünüzdür.

Bu özelliği istediğimiz her temada kullanabiliriz. Bu özellik için template_css.css dosyasına birkaç kod ekleyeceğiz ve Yönetici Panelinden Modülün SUFFİX değerine seçicimizi yazacağız. Sadece bu kadar :)

Öncelikle temanızın template_css.css dosyasını NOTDEFTERİ türü bir programda açınız. Aşağıda bulunan seçicileri bulunuz.

/* Joomla'da Kullanılan Standart Modül Biçimlendirmesi*/


table.moduletable {} /* klasik modül tablosunu ayarlamak için kullanılır */
table.moduletable th {} /* modül başlığını ayarlamak için kullanılan stil seçicisidir. */
table.moduletable td {} /* modülün içeriğinin stilidir. */

Bu seçicileri aşağıdaki gibi yazıp dosyamızı kaydediyoruz.

RESİM 1'de kullandığımız css ayarları

/*Temamızın template_css.css dosyası*/
/*Standart Modül Biçimlendiricisi*/
table.moduletable { margin-left: 5px; width: 95%; }

table.moduletable th {
color:#333; padding:5px 0px 5px 25px; text-align:left; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;
letter-spacing:5px; background:url(../images/tombol2.gif) no-repeat 3px; }

table.moduletable td {
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; text-align :justify;
color: #828282; background : transparent;}

/*Suffix değeri ile Modül Biçimlendirme*/
table.moduletable-yesil { margin-left: 5px;width: 95%; }

table.moduletable-yesil th {
color:#ff0000; padding:5px 0px 5px 25px; text-align:left; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;
letter-spacing:5px; background:url(../images/tombol2.gif) no-repeat 3px; }
table.moduletable-yesil td {
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; text-align :justify;
color: #000; background: #00FF00;}

/*Suffix değeri ile Modül Biçimlendirme*/
table.moduletable-mavi { margin-left: 5px;width: 95%; }

table.moduletable-mavi th {
color:#0099FF; padding:5px 0px 5px 25px; text-align:left; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;
letter-spacing:5px; background:url(../images/tombol2.gif) no-repeat 3px; }
table.moduletable-mavi td {
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; text-align :justify;
color: #fff; background: #0099FF;}

/*Suffix değeri ile Modül Biçimlendirme*/
table.moduletable-turkuaz { margin-left: 5px;width: 95%; }
table.moduletable-turkuaz th {
color:#33FFFF; padding:5px 0px 5px 25px; text-align:left; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase;
letter-spacing:5px; background:url(../images/tombol2.gif) no-repeat 3px; }

table.moduletable-turkuaz td {
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; text-align :justify;
color: #000; background: #33FFFF;}

-------------------------------------

RESİM 1
http://www.enxdesign.com/dersler/joomlada_suffix_kullanma/modullerdesuffixdegeri1.jpg


-------------------------------------


Daha sonra Yönetici Paneline giriyor ve herhangi bir modüle tıklıyoruz. Modülün "Module Class Suffix" değerine resim2'deki gibi bir değer yazıyoruz. Aynı şekilde istediğimiz tüm modüllere template_css.css dosyasında atadığımız değerleri yazabiliriz.

RESİM 2
http://www.enxdesign.com/dersler/joomlada_suffix_kullanma/modullerdesuffixdegeri2.jpg

-------------------------------------

Temamızın görünüşü bu şekilde olacaktır.

RESİM 3
http://www.enxdesign.com/dersler/joomlada_suffix_kullanma/modullerdesuffixdegeri3.jpg

-------------------------------------


Konu ile yardımcı olabilecek diğer bir ders.


Joomla da CSS Başlıkları ve Standart Stil Seçicileri Dersi (http://www.cmsturk.net/forum/showthread.php?t=1484)

--

[Akar]

Evet; net ve doyurucu bir anlatım olmuş.

Ellerine sağlık.

[Fatih TOPRAK]

way ! Mükemmel Dostum .
benim için mi hazırladın :)
teşekkür ettim hemen uygulayalım bakalım bu sefer becerebilecekmiyiz:)

[Fatih TOPRAK]

Yok malesef yine olmadı
aynen yazılanları tek tekuyguladım sorun nerde anlayamadım :(

[cemil]

TEŞEKKÜRLER bende bu temaların tanıtım resimlerine bakıyordum bir türlü farklı rente modül olayını çözememiştim ...çok yardımınız oldu saolun

[Ashton]

Paylaşım için teşekkürler, yararlı bir yazı olmuş. ;)

[Pentacle]

@tprkslsmsxyz

table.moduletable yerine
.moduletable veya div.moduletable olarak dene

[Ashton]

Bir deneme yapmak istedim fakat başarılı olamadım. <div> içerisindeki herhangi bir modüle suffix atayamıyor muyuz? ".moduletable" ve "div.moduletable" olarak da denememe rağmen olumlu sonuç alamadım. :confused:

[Ashton]

Tamam problemi şimdi hallettim fakat ben Top Menu için suffix tanımlamak istiyorum, bu mümkün mü? Başka bir yol ile de yapılabiliyorsa onu da yapabilirim. Top Menu'nün görünümünü ayarlamak istiyorum. Suffix kullanarak bunu yapabilir miyim, yoksa nasıl Top Menü görünümünde değişiklikler yapabilirim?

[sakkaya]

default olarak gelen -nav stuffixleri editlemek sanırım en kolay yolu ;)

[SanalCizgi]

Teşekkürler elinize sağlık çalışmalarınzda başarılar...

[revel]

resimler yenilenebilirse çok iyi olur...

[M.Enes AYDÜZ]

Resimler yenilendi.

[bdonbay]

bu konu sanırım temalarla da çok başlantılı. pek bilgim yok ama biraz uğraşınca çıkamadım işin içinden. yazdığım suffix leri madeyourweb temasında çalıştıramıyorum. başka temalarda kullanabiliyorum.

bu yüzden en başında temaların dikkatle seçilmesi gerektiğini düşünüyorum. yoksa benim gibi sonradan pişman olabilirsiniz.

[recepalgul]

sanırım bu konu ile alakalı... ama bir türlü çözemediğim bir sorunum var... sitede mint-fresh teması kullanıyorum...
http://www.bestofjoomla.com/index2.php?option=com_bestoftemplate&task=demo&no_html=1&id=967
temanın demo sayfası yukarıdadır
1. demoda da açıkça görülebileceği gibi user2 ve user3 ün üzerinde bir boşluk var... bu boşluğu iptal etmek istiyorum...
2. ha bir de user1 in boyutları ile oynamak istiyorum...

lütfen yardım edin...

[okyanus41]

hocam çok güzel ve faydalı bir ders çok teşekkürler. acaba yeşil ve mavi ve tukuaz dışında başka tonda renkleri nasıl ekleyebiliriz? oradaki kodları mı ayarlayacağız? saolun

[Şafak Gümüş]

Aynı kodları kopyalayıp isimlerini değiştirerek kullanabilirsiniz.

[TurKa]

Ellerinize sağlık.Bende diyorum bu menüler nasıl da renkli yapılıyor diye uzun uzun düşünüyordum.

[UnFaitHfuLL]

Pekiya Kullanılan modülün parametrelerinde Suffix değeri yoksa napcaz :)

[M.Enes AYDÜZ]

Pekiya Kullanılan modülün parametrelerinde Suffix değeri yoksa napcaz :)
modülün xml dosyasındaki params kodları arasına kırmızı ile yazılı yeri kopyalayın. Modülünüzde suffix değeri yazma yeri çıkacaktır.
<params>

<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling" />

</params>

[çılga]

teşekkürler. çok işime yaradı...

[çılga]

modülün xml dosyasındaki params kodları arasına kırmızı ile yazılı yeri kopyalayın. Modülünüzde suffix değeri yazma yeri çıkacaktır.
<params>

<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling" />

</params>

Süpersin. Çok işime yaradı.

[e-balli]

enes eline sağlık een kısa zamanda deniyecem temayı hareketlendirmek isteyenler için birebir bir anlatım olmuş... Gerçekten çok teşekkürler

[ahmetodabasoglu]

Ya ben temamda bazı değişiklikler yaptıktan sonra index.php dosyasını var olan ile değiştirmek istiyorum fakat tema dosyamdaki hiçbirşeyi ne sileibliyorum ne değiştireiliyorum " The filename provided is not being accepted by the server. Please check for invalid characters and try again. Click Details>> to see the exact server response. " bu şekilde bir hata veriyor.Sprun ne olabilir.

[fantom16]

güzel anlatım olmuş enxdesigN emeğine sağlık.

[bahisci]

selam..
cssdeki önceki modlue tableri silip yerine sizin verdiklerinizi koydum..
sitemde kırmızı modül başlıklarıda gitti.

ben sadece içeriğin renkli olmasını istiyorum.
bunun için ne yapmam lazım
table.contact td.details {
width: 100%;
background-color: #F3F3F3;
font-size: 11px;
font-family: Arial, Verdana, sans-serif, Helvetica;
}

table.moduletable {
width: 100%;
margin: 0px 0px 0px 0px;

}

table.moduletable ul {
color: #000000;
}

div.moduletable {
padding: 0;
margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
background: url(../images/moduleheader.png) repeat-x;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #FCFCFC;
text-align: left;
text-indent: 15px;
width: 100%;
height: 24px;
text-transform: uppercase;
}

table.moduletable td {
font-size: 11px;
/*background: #FCFCFC;*/
padding: 2px;
font-weight: normal;
}

table.pollstableborder td {
padding: 2px;
}

.poll {

aşağıdaki adresteki de buna benzer bir sorun
ikisinden birini halettsemde olur
yardımcı olursanız memnun olurum
saygılar
http://www.cmsturk.net/forum/showthread.php?t=20329

[M.Enes AYDÜZ]

ben sadece içeriğin renkli olmasını istiyorum.

demişsiniz. Yani modüllerin içinin mi renkli olmasını istiyorsunuz yoksa ana gövdede yer alan içeriklerin mi?

[bahisci]

ben içerikleri kaldrıdım..
ne yazarsam modüllerde yazıyorum..
modüllerde yazacağım yazının altı renkli olsun.

mesela resim ekledim hemen yanında veya altında yazı var ya
o yazının zemini renkli yapıcam..

çeşit çeşit reklerde yapmak istiyorum..
uzun süredir aklımdaydı forumda ararken buldum yardımcı olursan memnun kalırım..

modüllerin içi..

[bahisci]

2 gündür bekliyorum.. çğlen burdaydınız unuttunuz sanırım..
yerinize başka bir arkadaşta cevaplarsa memnun olurum..

[Akar]

2 gündür bekliyorum.. çğlen burdaydınız unuttunuz sanırım..
yerinize başka bir arkadaşta cevaplarsa memnun olurum..Siz deniyor musunuz bu arada yoksa sadece biri yapsın diye bekliyor musunuz ?

[bahisci]

evet denedim kendim yapamadım..

[M.Enes AYDÜZ]

Yukarıda verilen kodları aynen .css dosyanıza kopyalayın. Sonrasında ise göstermek istediğiniz modülün -suffix alanını resimdeki gibi doldurun.

Eğer ücretli son çıkan temalardan kullanıyorsanız yukarıdaki taktik işe yaramayabilir. Çünkü onların bir çoğu table değil div ile hazırlanmış temalardır. Ayrıca kendilerine özel suffixleri vardır. Temanızın özelliklerine bakın, büyük ihtimal orada belirtilmiştir.

[Hasan]

Ayrıca eğer class suffix yapcaksanız css dosyasında istediğiniz şeyi yaparsınız. Modül başlıklarına uygulamak istemiyorsanız h3 alanlarını boş bırakırsınız veya h3 için herhangi bir işlevde bulunmazsınız.

Eğer beğendiğin bir yerde varsa css dosyalarına bakarak kendine suffix oluşturmak için örnekleme yapabilirsin. Ben bir örnekleme yapayım sana hemen.

-kirmizi isminde bir modül class suffix oluşturalım hemen.

moduletable-kirmizi h3 {
background:red;
color:blue;
}


bu verdiğim kod h3 den anlaşıldığı gibi modülün başlığına css işleyecektir. Css içeriğine bakarsakta modül başlığının arkaplanı kırmızı ve başlık yazısı mavi olacaktır.


moduletable-kirmizi{
background:green;
color:yellow;
}

burdaki kod ise modülün tamamen kendisi kaplar bu class suffix'i uygulamış olduğun modülün arkaplanı yeşil olur ve içindeki yazıların rengide sarı olur. Bu css özelliklerini çoğaltmak ve temanın en uygun haline getirmekte senin elinde. Sağdan boşluk soldan boşluk veya modül başlığının arkaplanı resim olsun başında ok vs. sana kalmış artık. Mesela diyelimki bu suffix'lerin linkleride farklı renkte olmasını istiyorsan eğer


moduletable-kirmizi a {
color:black;
}

moduletable-kirmizi a:hover {
color:white;
text-decoration:underline;
}


Bu şekilde de farklı link renkerlide verebilir bu durumda sonuç ne olucaktır. Modül içindeki link durağan şekildeyken siyah görünecektir. Mouse ile üzerine geldiğin zaman linkin rengi beyaz olacak ve alt çizgili olacaktır. Bunun benzeri şeyleri modül içindeki bir çok html koduna uygulayabilirsin. Modül içine gelecek olan resimlerede farklı uygulamalarda yapabilirsin.

Zenginlik açısından bir örnek daha eklicem. Bundan sonrasıda senin yapacak olduklarına bağlı yani benden buraya kadar ^_^

moduletable-krimizi img {
border:red 1px solid;
padding:3px;
background:black;
}

burada ise modülün içine gelecek olan her resime css uyguluyoruz. Resme 1 piksellik çerçeve uyguluyoruz ve çerçeve biçimini düz çizgi olarak solid ile belirliyoruz. Dışardan içe 3 piksellik bir boşluk verip arkaplanını siyah yapıyoruz. Kolay gelsin

[bahisci]

enxdesigN bey aynen pastle dediğini yaptım explorer 6 dn bakarsanız .. başlıktaki fontları bozdu

[bahisci]

enxdesigN kod bilgim olsa günlerce ceavp vermenizi beklemezdim..

aynen pastleyince sorun oluyor zaten asıl sorun burda..
sitedeki tüm fontları bozdu ...
soruma bakmaya bile tenezzül etmeiniz.. modlar sizden daha ii ilgileniyorlar..

__________________________________________


hasan bey şimdi sizin yönetmi deniycem..
bu yöntemi temamın css dosyasındamı yapıcam..
yayınlayacağım modülün xml e dosyası ve ya hangisine pastlenem lazım.

[M.Enes AYDÜZ]

www.bahisspor.com sitesi için mi yapmaya çalışıyorsunuz?

Bu arada tam bakacaktım sitenize ama ,
www.bahisspor.com sunucusu çok geç cevap veriyor.

[bahisci]

evet hostta sorun var sanırım gelir birazdan

[bahisci]

evet site geldi.. bakın fontları büyülttü ve aralık oluşturdu gördünüzmü?

belki bakarsınız diye.. site yi bozuk haliyle tutuyorum..
üyeler şaşırmadan hemen düzeltmem lazım
ayrıca o zemin fontları explorerda gösteriyor. mozillada göstermiyor.

[M.Enes AYDÜZ]

table.moduletable th, div.moduletable h3 başlıklı olan yerdeki kodları silip aşağıdaki kodları yapıştırır mısınız template_css.css dosyasından.

Tabi öncelikle template_css.css dosyanızın bir yedeğini alın.

table.moduletable th, div.moduletable h3 {
background: url(../images/moduleheader.png) repeat-x;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #FCFCFC;
text-align: left;
height: 20px;
text-transform: uppercase;
}

[bahisci]

evet yaptım bir değişiklik olmadı.. halen fontylar bozuk
dosyanın ilk hali yukarda ..
sizin dediğinizi yaptığım hali bu linkte..

siteyi eski döndürcem şimdilik.. üyeler bolzuldu sanacaklar yoksa :(
http://www.dosya.cc/template_css_1.rar.html


bahisspor.com

[bahisci]

Ayrıca eğer class suffix yapcaksanız css dosyasında istediğiniz şeyi yaparsınız. Modül başlıklarına uygulamak istemiyorsanız h3 alanlarını boş bırakırsınız veya h3 için herhangi bir işlevde bulunmazsınız.

Eğer beğendiğin bir yerde varsa css dosyalarına bakarak kendine suffix oluşturmak için örnekleme yapabilirsin. Ben bir örnekleme yapayım sana hemen.

-kirmizi isminde bir modül class suffix oluşturalım hemen.

moduletable-kirmizi h3 {
background:red;
color:blue;
}


bu verdiğim kod h3 den anlaşıldığı gibi modülün başlığına css işleyecektir. Css içeriğine bakarsakta modül başlığının arkaplanı kırmızı ve başlık yazısı mavi olacaktır.


moduletable-kirmizi{
background:green;
color:yellow;
}

burdaki kod ise modülün tamamen kendisi kaplar bu class suffix'i uygulamış olduğun modülün arkaplanı yeşil olur ve içindeki yazıların rengide sarı olur. Bu css özelliklerini çoğaltmak ve temanın en uygun haline getirmekte senin elinde. Sağdan boşluk soldan boşluk veya modül başlığının arkaplanı resim olsun başında ok vs. sana kalmış artık. Mesela diyelimki bu suffix'lerin linkleride farklı renkte olmasını istiyorsan eğer


moduletable-kirmizi a {
color:black;
}

moduletable-kirmizi a:hover {
color:white;
text-decoration:underline;
}


Bu şekilde de farklı link renkerlide verebilir bu durumda sonuç ne olucaktır. Modül içindeki link durağan şekildeyken siyah görünecektir. Mouse ile üzerine geldiğin zaman linkin rengi beyaz olacak ve alt çizgili olacaktır. Bunun benzeri şeyleri modül içindeki bir çok html koduna uygulayabilirsin. Modül içine gelecek olan resimlerede farklı uygulamalarda yapabilirsin.

Zenginlik açısından bir örnek daha eklicem. Bundan sonrasıda senin yapacak olduklarına bağlı yani benden buraya kadar ^_^

moduletable-krimizi img {
border:red 1px solid;
padding:3px;
background:black;
}

burada ise modülün içine gelecek olan her resime css uyguluyoruz. Resme 1 piksellik çerçeve uyguluyoruz ve çerçeve biçimini düz çizgi olarak solid ile belirliyoruz. Dışardan içe 3 piksellik bir boşluk verip arkaplanını siyah yapıyoruz. Kolay gelsin

http://www.dosya.cc/template_css.rar.html

hasan usta 1 haftadır sitede ağaç oldum..
bu verdiğini zkodları temam css yemi ayzıcaz kodlama bilgim.. yok
yoksa kulancam modülün stil dosyasınamı
sen bari.. yardımcı olursan memnun olurum saygılar.

[Akar]

enxdesigN kod bilgim olsa günlerce ceavp vermenizi beklemezdim..

aynen pastleyince sorun oluyor zaten asıl sorun burda..
sitedeki tüm fontları bozdu ...
soruma bakmaya bile tenezzül etmeiniz.. modlar sizden daha ii ilgileniyorlar...1 gün istirahat edin, ndan sonra yardım istemeye devam edebilirsiniz.

Ayıp...insan biraz utanır !

[MAJESTE]

10 numara paylaşım olmuş

[josereyes]

Enxdesing..
dostum temam farklı olduğu için css dosyam joomla.css ve costum.css olarak ayarlanmış ancak ben iki dosyadada denedim başaramadım.

[josereyes]

yardım edecek yok galiba....

[Moskovic]

merhabalar kendi yapmis oldugum bi modulun control panelinde Module Class Suffix seceginin olmasi icin asagidaki kodu </files> tagin altina ekledim ama gene olmadi neden olabilir?

<params>

<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling" />

</params>

[emre_0119]

bu ayarlama Joomla 1.5 de olurmu ?

[nikefootball]

arkadaşlar ben bu anlatımdaki gibi aynen yapıyorum ama hiç bir deişiklik olmuyor niye acaba mesela module suffix değerine -kirmizi yazıoyrum, table.moduletable-kirmizi adında css stili oluşturuyorum ve değerini veriyorum ama tık yok joomla 1.5 kullanıyoru

[Hektor78]

moduletable suffix oluşturuyorsanız uygulamaya çalıştığınız modul pszisyonunun index.php de style="xhtml" olup olmadığını kontrol ediniz. Başka bir style değeri tanımlanmışsa xhtml yazınız