Modül Sınıf Soneki İle Yuvarlak Köşeli Kutular Oluşturma 3

  • Yazdır

Bu yazıda yine yuvarlak köşeli kutular oluşturulacaktır. Fakat yuvarlakköşeleri herhangi bir yer kullanmadan Gimp ile oluşturacağız. Oluşturduğunuz resimleri sonradan düzenleyeceğinizi düşünerek gimpin uzantısı olan "xcf" olarakta kaydetmeyi unutmayın. Şimdi Gimp'i açarak aşağıdaki adımları takip edebilirsiniz.

Sol tarafta yuvarlak köşe uygulanmamış
Sağ tarfata ise yuvarlak köşe uygulanmış
son hali bulunmaktadır.

Dosya > Yeni adımalarını takip ederek "Yeni bir resim oluştur" penceresini açın.

Genişlik : 497
Yükseklik : 997
Doldur : Arkaplan rengi

olacak şekilde bir resim oluşturun.

Oluşturduğunuz resme kenarlık eklemeden önce kenarlık rengini ayarlayın.

Renkle doldur düğmesine tıklayın ve alt tarafta bulunan ön alan rengine tıklayarak html rengini "cdcdcd" (gri) olarak ayarlayın.
Çizim olşturduğunuz pencereye dönerek Seç > All (Ctrl+A) komutunu vererek tüm resminizi seçin.

Seç > Seçimi küçült adımlarını takip ederek açılan "Seçimi Küçült" penceresine 1 değerini girip "Tamam" ile çıkın.

Seç > Rounded Rectangle adımalarını takip ederek açılan penceredeki "Radius" değerini 2 yapıp "Tamam" ile çıkın.
Şimdi boya kutusuna tıklayıp ayarladığınız cdcdcd (gri) renkle doldurmak için resminizin ortasında tıklayın.
Tekrar Seç > Seçimi küçült adımlarını takip ederek açılan "Seçimi Küçült" penceresine 1 değerini girip "Tamam" ile çıkın.
Önalan rengini beyaz yaparak tekrar resminizin ortasında tıklayın.

Şimdi Dosya > Kaydet (Ctrl+S) adımlarınızı takip ederek dosyanıza bir isim verip png olarak kaydedin ve resminizi kapatın.

Kaydettiğiniz resminizi sürükleyerek gimp üzerine bırakarak açın.

Kutu seçimi düğmesine (R) tıklayarak resminizin sol üst köşesinden bir alanı seçin.

Seç özellikleri penceresine gelerek
Position: 0 0
Büyüklük: 490 990 değerlerini girin.
Düzenle > Kopyala (Ctrl+C) adımlarını takip ederek seçtiğiniz yeri kopyalayın.
Dosya > Yeni (Ctrl+N) adımalarını takip ederek 490X990 px'lik bir dosya oluşturun.
Düzenle > Yapıştır (Ctrl+V) komutunu vererek kopyaladığınız resmi yapıştırın.
Dosya > Kaydet (Ctrl+S) adımlarını takip ederek dosyanızı "topleft.png" olarak kaydedin ve resminizi kapatarak tekrar ilk ana resminize dönün.

Seç özelliklerini
Position: 490 0
Büyüklük: 7 990 olarak değiştirin.
7X990'lık yeni bir dosya açarak seçtiğiniz resmi yine kopyala yapıştır ile aktarıp "topright.png" olarak kaydedin.

Tekrar ana pencereye dönerek
Seç özelliklerini
Position: 0 990
Büyüklük: 490 7 olarak değiştirin.
490X7'lik yeni bir dosya açarak seçtiğiniz resmi yine kopyala yapıştır ile aktarıp "botleft.png" olarak kaydedin.

Tekrar ana pencereye dönerek
Seç özelliklerini
Position: 490 990
Büyüklük: 7 7 olarak değiştirin.
7X7'lik yeni bir dosya açarak seçtiğiniz resmi yine kopyala yapıştır ile aktarıp "botright.png" olarak kaydedin.

Kaydettiğiniz bütün bu dosyaları templates/rt_rokwebify_v1.5/images/grey klasörü içine kopyalayın.
Not: Kullandığım tema rokwebify sizde burası farklı olacaktır.

Şimdi templates/rt_rokwebify_v1.5/css/template_css.css dosyanızı açarak alttaki kodları css dosyanızı en altına yapıştırın.

/*gri kutu */
div.module-grey h3, div.moduletable-grey h3 {
border-bottom:1px solid #CDCDCD; /*modul basliginin altinda bulunan cizgi genisligi ve rengi*/
color:#333333; /*modul baslik rengi*/
font-family:Helvetica,Arial,sans-serif;
font-size:1.5em; /*modul baslik font buyuklugu*/
font-weight:bold; /*modul basligina kalin ozelligi veriliyor*/
margin:-2px -8px 0; /*modul basliginin pozisyonu*/
padding-bottom:2px; /*modul basliginin alt padding degeri*/
padding-left:10px; /*modul basliginin sol padding degeri*/
}
div.module-grey, div.moduletable-grey {
background:transparent url(../images/grey/topleft.png) no-repeat scroll 0 0;
margin:0 0 20px; /*topleft resminin margin yerlesim yerleri*/
padding:0;
}
div.module-grey div, div.moduletable-grey div {
background:transparent url(../images/grey/topright.png) no-repeat scroll 100% 0;
}
div.module-grey div div, div.moduletable-grey div div {
background:transparent url(../images/grey/botleft.png) no-repeat scroll 0 100%;
}
div.module-grey div div div, div.moduletable-grey div div div {
background:transparent url(../images/grey/botright.png) no-repeat scroll 100% 100%;
padding:8px;
width:auto !important;
}
div.module-grey ul, div.moduletable-grey ul {
margin:10px 0;
padding-left:20px;
}
div.module-grey ul li a:link, div.module-grey ul li a:visited {
font-weight:bold;
}
div.moduletable-grey ul li a:link, div.module-greytable ul li a:visited {
font-weight:bold;
}
div.module-grey a.mainlevel:link, div.module-grey a.mainlevel:visited {
background:transparent none repeat scroll 0 0;
padding-left:0;
}
div.module-grey ul li a:hover {
font-weight:bold;
}
div.moduletable-grey ul li a:hover {
font-weight:bold;
}
ul.submenu ul {
margin:0 0 5px;
}
div.module-grey div div div div, div.moduletable-grey div div div div {
background:transparent none repeat scroll 0 0;
}

Şimdi ise index.php dosyamızda küçük bir değişiklik yapmamız gerekmektedir. Bunun için templates/rt_rokwebify_v1.5/index.php dosyanızı açın.

Değiştireceğiniz modül sağda veya solda ise bu duruma göre alttaki değişiklikleri index.php dosyanızda yapın.

Joomla yönetim panelinize girerek Eklentiler > Modül Yöneticisi adımlarını takip edin.
Hangi modüle bu kenarlıkları eklemek istiyorsanız onu açın. Bizim örneğimizde "Ana Menü"
Modülü açtıktan sonra sağ üst tarafta bulunan "Gelişmiş Özelliklere" tıkalyın.
"Modül Sınıf Soneki" değerini "-grey" olarak (tırnaklar olmadan) girip kaydedin ve şimdi sitenizi yenileyerek değişiklikleri görün.

Not: www.joomla.org sitesinden yararlanılmıştır.