İslami bir siteniz varsa ve Kur'an dinletmek isterseniz kullanıcılarınıza size çok kısa yoldan hazırladığım şekilde bu işlemi nasıl yapacağınızı anlatacağım.
Öncelile buradan mgmediabot isimli bileşeni ve buna bağlı botu indirip kurun ve botu aktif edin ardından ister modülde ister içerik şeklinde bu aşağıdai kodu içeriğinize html butonuna basarak eleyin
KODLARI GÖRMEK İÇİN TIKLAYINIZ
Hepsi bu, Kur'an kodlarda belirtilen site üzerindeki mp3 lerden yararlandığından sizin sitenize de yük olmaz örne olara hazırladığım ve çalışan haline buradan bakabilirsiniz
cmsturk.net
23 Eylül 2007 Pazar
Sitenizde Kur'an-ı Kerim Dinletmek İsterseniz
Community Builder 1.1 Üye Yönetim Bileşeni
Gelişmiş üye yönetim bileşeni Community Builder ya da kısaca CB.
Üretici JoomlaPolis 1 Ağustos 2007 günü Joomla! 1.0.x ve 1.5 sürümlerle uyumlu (1.0.13 dahil) sürümünü yayınladı.
Bileşen bir çok Jooomla! uygulaması ile bütünleşebiliyor. (Forum, mesajlaşma, galeri eklentileri gibi)
Kendi sayfasında üyeliğe bağlı olarak paylaşılması sebebiyle biz de dosyaları doğrudan vermeyerek adreslerine yönlendireceğiz.
Genel ayarlarındaki son sekmede otomatik sürüm kontrolünü devreye almanız, bileşen yönetimine her girişte aktif sürümünüzün güncelliğini görebilmeniz açısından iyi olacaktır.
Bileşen, kurulu olduğu sunucuda ImageMagic ve GD Kütüphanesi desteği aramaktadır.
Anasayfası >>> İlk ziyaretinizde üye olmayı unutmayın!
Güncel sürüm paketi ve resmî eklentileri >>> 1 Bileşen, 3 modül ve 1 dizin paketi ile paketlenmiştir.
Üretici destekli 3. parti eklentileri >>> Sürüm uyumluluğunu kontrol etmeden kullanmayın.
Dil dosyaları >>> Plugin olarak yüklenir. Bu sürüm için Türkçe eklentisi konu ekimizdedir (aşağıda)
Derslerimiz >>> Genel Kılavuz -
Soru - Cevap Alanı >>>
cmsturk.net
Joomla Temanızdaki Resmin Yerine Flash Koymak [anlatım]
Temanızdaki her hangi bir resim dosyası, banner, vb… gibi temanın orjinalinde gelen resim dosyasının yerine flash formatında hazırladığın bir swf dosyasını nasıl koyacağınızı basit bir dille anlatmaya çalışacağım. Bu konuda gelen soruların yoğunluğu üzerine böyle bir anlatımı uygun gördüm umarım size faydalı olabilecektir. Aslında bu tip işlemler çok basit ve hızlı bir şekilde yapabileceğiniz işlemlerdir, ancak özellikle yeni joomlacılar veya web tasarım konusunda bir temeli olmayan arkadaşların zorlanması da doğaldır. Zaten bu hazırladığımız anlatımda bu yöndeki olan arkadaşlarımız içinidir
Şimdi, bu işlemi basit bir şekilde yapabilmek adına gelişmiş bir web tasarım programı olan Macromedia Dreamweaver kullanacağız ve bu şekilde anlatımımızı yapacağız, sözü bir kenara bırakıp hemen işimize başlayalım. Önce değiştirmek istediğiniz temanın index.php dosyasını temanın klasöründen bulup açalım. Biz örneğimizde joomlanın ilk kurulumunda varsayılan olarak gelen ve aktif tema olan “rhuk_solarflare_ii” teması üzerinde bu işlemi yapacağım.
Temamızın index.php dosyasını açalım ve değiştirmek istediğimiz yeri tespit edelim
Yukarıda temamızın index.php sini görüyorsunuz eğer hem kod hemde temanın görünümünü açmak isterseniz dreamweaver üst menüsünde gördüğünüz gibi “split” butonuna bamanız yeterlidir. Üst pencerede değiştirmek istediğimiz resmin kodlarını görüyorsunuz, alttada resmimizi… Zaten değiştirmek istediğiniz resme tıkladığınızda üst pencerede kodlar seçili hale gelecektir. İşte bunun yerine biz aynı ebatlarda bir swf dosyası koyacağız. Aynı ölçülerde diyorum çünkü temanızda o resmin tanımlandığı alan temanıza en uygun halde olduğundan bunu değiştirmek temanın görünümünü bozabilir. İşte biz bu kodları oradan silmemiz ve yerine koymak istediğimiz kodları koymalıyız ancak daha anlaşılır olması için ben resim dosyasını silmeden hemen yanına swf dosyasını koyacağım ve en son kaldırmak istediğimiz resmi sileceğim ki daha anlaşılır olsun. Şimdi sileceğimiz kodu yani resmi tıklayın ve kodların otomatik olarak seçildiğini görün. Resmin üzerindeyken klavyenizin sağ ok tuşuna basın ve ekranda görülen resmin hemen yanına geçelim ve buraya bilgisayarımızda kayıtlı olan flash dosyasını ekleyelim
Resimde de gördüğünüz gibi Insert=Media=Flash menü öğelerine tıklayarak ekleyeceğimiz swf dosyasını bulalım.
Örneğimizde bizim swf flash dosyamız “sc_header” olacak bunu seçip “ok” diyoruz ve içe aktarıyoruz. Karşınıza alttaki gibi bir pencere gelebilir bunu “Cancel” diyerek geçiyoruz
Ve karşımıza alt resimde gördüğünüz gibi swf dosyamız içe aktarılmış ve istediğimiz yere gelmiş görünüyor. Ancak burada bilinmesi gereken noktayı ve bu eklediğimiz swf dosyasının sorunsuz olarak sunucu üzerinde görüntülenebilinmesi için değişiklik yapacağımız küçük bir nokta var, şimdi ona bakalım.
Üst resimdeki kod penceresinde flash dosyamızın yoluna dikkat ederseniz olması gerektiği gibi gelmiyor, yani bu şekilde bilgisayarda çalışır ama sunucuya attığımızda bu yollar geçersiz olacağından (Kod satırı 102. Satırda görülen gibi) swf dosyamız görüntülenemeyecektir. Ayrıca yüklediğimiz swf dosyası değiştirmek istediğimiz resim dosyasından ebat olarak çok büyük bunuda ayarlamalıyız ancak önemli olan o kodu doğru şekle sokmak… Bunu yapmamız için kod penceresinin altında gözüken flash dosyamıza bir tık koyalım ve daha sonra dreamweaver properties alanından resmin flashın adresini değiştirelim, bunun için alt resme bakabilirsiniz.
Resmin en altında gördüğünüz ve seçili olan alana şimdi olması gereken dosya yolunu yazacağız. Bu yol tüm temaların kullandığı ve joomlanın standart yoludur, o alana yazılacak kod
Alıntı:
| sc_header.swf |
Gördüğünüz gibi iki yerde değiştirilmesi gereken boyutlar var birisi en yukarıda birisi de en aşağıda. Şimdi gerekenleri yapmışsanız artık silmediğimiz o resim dosyasını kaldıralım.
Bunu yağmak için üst resimde gördüğünüz gibi flash dosyamızın yanındaki resme bir tık koyup farenizin sağ tuşuna tıklayarak açılan menüden “kes” demek. Artık flash dosyamız resmin yerini aldı tabi biz boyutlandırmadık flash dosyasını çünkü siz bu işlemi zaten yapmış olacaksınız. Değiştireceğiniz resmin boyutlarında hazırladığınız flash olacağından sizin boyutlandırmanıza da gerek kalmayacak sadece benim anlattığım ve anlatımda kullandığım swf dosyası büyük olduğundan açıklamak durumunda kaldım. Alt resimde gördüğünüz gibi artık resmin yerini flash dosyamız aldı
Bu anlatım genel bir anlatım olduğundan sizin kafanızdakileri yansıtmıyor olabilir ancak bu anlatımla sadece olayın mantığını göstermek adına hazırlanmıştır. Amatörlüğümüzden dolayı da özür dileriz. Ancak bizim hazırladığımız her şey hemen hemen daha bu işleri hiç bilmeyen arkadaşlara yöneliktir, bilen insana bunlar çok sıradan gelecektir ancak bilmeyen için büyük bir kaynak durumundadır
cmsturk.net memoc@n
Joomla İle Entegre SMF Forum Kurulumu Nasıl Yapılır [Resimli Anlatım]
Merhaba arkadaşlar, bu yönde çok istek geldiğinden Joomla ile entegre çalışmak üzere SMF forumun nasıl lurulacağını, SMF forum kurmaya yönelik anlatacağım, zaten entegre için olan dersimiz var bu ona ön ek olarak düşünülebilecek bir anlatım olacak.
Öncelikle BURADAN SMF forumun en son sürümünü indirin ve indirdiğiniz zipli dosyayı açın, klasörünün adını Forum olarak değiştirin ve FTP den Joomlanızın bulunduğu dizine atın. Yani konumu aşağıdaki resimdeki gibi olsun sunucunuzun dizininde
Daha sonra internet tarayıcınızın adres çubuğuna, sitenizdeki dizine attığınız forumun adresini kurulumu başlatmak için yazın biz örnekteki gibi yapıyoruz http://www.siteadınız.com/forum
bu şekilde yazdığınızda aşağıdaki gibi kurulum ekranı gelmesi lazım.
Şimdi burada gördüğümüz alanlara bir gözatalım:
1 - FORUM NAME : Bu alana forumunuza vermek istediğiniz bir isim girin.
2 - FORUM URL : Bu alana forumunuzun dosyaları neredeyse aynen o adresi yazacaksınız resimde biz bu kurulumu yerel sunucuya yaptığımızdan adresini bu şekilde yazdık siz kendi kurulum yolunuzu dosyaları nereye attıysanız o adresi yazacaksınız mesela http://www.siteadınız.com/forum
3 - GZİP OUTPUT : Bu alan aynen öylece kalabilir bu bandwidth değerini sıkıştırarak daha az band ve daha hızlı kurulum için kullanılır her sunucu desteklemez buna gerekte yok zaten
4 - DATABASE SESSION : Burayı da ellemenize gerek yok
5 - UTF-8 CHARACTER SET : Forumunuzun kullanacağı veritabanındaki kullanılacak içeriklere ait tabloların yazı karakter setini eğer UTF-8 formatında olmasını isterseniz işaretleyin ancak joomla ile entegre olunca dil problemleri yaşamamak için size tavsiyem işaretlemeyin
6 - ALLOW STAT COLLECTİON : Forumun imalatçısı olan simplemachines.org sitesinin belli zamanlarda istatistiklerinize ulaşabilmesine izin vermek isterseniz işaretleyin yoksa boş kalsın
7 - MYSQL SERVER NAME : Bu alana sunucunuzun adresini gireceksiniz bu genelde "localhost"tur, böyle kalsın.
8 - MYSQL USER NAME : Bu alana joomlanızın kurulu olduğu veritabanı kullanıcı adını yazacaksınız eğer burada ve devamında yazacaklarınızı unutmuşsanız joomlanızın kurulu olduğu dizinden "configuration.php" dosyanızı açıp doğru ayarlara bakabilirsiniz.
9 - MYSQL PASSWORD : Bu kısma veritabanının şifresini yazın
10 - MYSQL DATABASE NAME : Bu alana veritabanı adını yazın
11 - MYSQL TABLE PREFIX : Bu alan forumunuzun kurulacağı veritabanında gerek karışıklığa sebep vermemek için gerekse de forumun düzgün çalışabilmesiiçin kurulumun otomatik olarak oluşturacağı veritabanı tablolarının önüne geleceği ek'i seçeceksiniz. Bu varsayılan olarak "smf_"dir ve öyle de kalması tavsiye olunur.
12 - PROCEED : Yukarıda verdiğimiz bilgilerin doğruluğundan eminsek bu butona basıp kurulumun diğer aşamasına devam ediyoruz.
Bizi bu aşamada şöyle bir ekran karşılayacak :
1 - YOUR USERNAME : Bu alana kullanıcı adını yazacaksınız ancak madem Joomla ile entegre çalışacak bir forum kuruyoruz o halde buraya bizden istenen bilgileri girerken Joomla da kayıtlı olduğu biçimde profil alanlarını girmeliyiz. Joomla da kullanıcı adınız neyse onu girin
2 - PASSWORD : Joomlanızdaki kullanıcı adınızı girdiğiniz gibi buraya da aynı şifrenizi girin
3 - PASSWORD : Şifrenizi tekrar girin
4 - E-MAIL ADRESS : Aynı şekilde joomladaki kullanıcı adınızda tanımladığınız e-mail adresinizi girin yada farklı bir adreste girebilirsiniz.
5 - MYSQL DATABASE PASSWORD : Güvenliğiniz için veritabanı şifresini bu alana tekrar girin
6 - FINISH : Eğer girdiğiniz bilgilerin doğruluğuna eminseniz bu butona basarak buradaki işlemi tamamlayın ve diğer aşamaya geçin.
Eğer herşeyi doğru yapmışsak kurulumun gayet düzgün ve hatasız gittiğini aşağıdaki resimdeki gibi bölüm gelirse anlamış olacağız.
1 - CLICK HERE TO.... : Şeklinde devam eden iletinin yanındaki kutucuğu işaretlerseniz ki her sunucuda çalışmaz forumun kurulum dosyası olan install.php dosyasını da otomatik silecektir. Eğer ileri aşamada bu dosyayı silmenize dair bir uyarı alırsanız demekki sunucunuz bu olayı desteklemiyor o halde forum klasörü içinde ftp den baktığınızda bu install.php dosyasını güvenlik açısından silmelisiniz.
2 - YOUR NEWLY INSTALLED FORUM : Bu yazıyı tıkladığınızda hem yukarıda bahsettiğimiz dosya silinmiş olacak hemde forumunuzun ana sayfasına gitmiş olacaksınız. Ve başarılı bir şekilde forumu kurmuş olacaksınız. Aşağıdaki resimde olduğu gibi.
Şimdi forumumuzu Joomlamızın bulunduğu dizine ve aynı veritabanına kurmakla entegre için gereklişartları yerine getirmiş olduk. Bundan sonrası ise, Joomla ana sayfamıza Forumu bağlamak ve kullanıcıları senkronize etmek ki Joomla dan giriş yapan üyeler foruma da giriş yapmış olsun, bunun için yapılması gereken ilk iş. Bize bu senkronizeyiyaptıracak bileşenin yüklenmesine geliyor. Bu bileşeni yüklemek için önce son entegre bileşenini görmek ve bilgisayarımıza yüklemek gerekiyor BURADAN
Hem en son versiyon entegre bileşenine bakıp ona göre indirebilirsiniz. İndirme işlemi tamamlandıktan sonra zipli dosyayı açın içinden bir çok zipli dosya çıkacak, size şu etapta lazım olan entegre bileşeni com_smf gibi de yazabilir. Bileşeni normal bileşenler gibi Joomlanın yönetim paneline girip bileşen yükleme bölümünden kurun. Kurulum bittikten sonra da hem bu entegre bileşenini tanımak işlevlerine bakmak hem de entegreyi yapabilmek adına sizin için hazırladığımız ve BURADAN elinize birbardak çay alıp keyifle izleyerek yapabilirsiniz.
cmsturk.net memoc@n
Öncelikle BURADAN SMF forumun en son sürümünü indirin ve indirdiğiniz zipli dosyayı açın, klasörünün adını Forum olarak değiştirin ve FTP den Joomlanızın bulunduğu dizine atın. Yani konumu aşağıdaki resimdeki gibi olsun sunucunuzun dizininde
Daha sonra internet tarayıcınızın adres çubuğuna, sitenizdeki dizine attığınız forumun adresini kurulumu başlatmak için yazın biz örnekteki gibi yapıyoruz http://www.siteadınız.com/forum
bu şekilde yazdığınızda aşağıdaki gibi kurulum ekranı gelmesi lazım.
Şimdi burada gördüğümüz alanlara bir gözatalım:
1 - FORUM NAME : Bu alana forumunuza vermek istediğiniz bir isim girin.
2 - FORUM URL : Bu alana forumunuzun dosyaları neredeyse aynen o adresi yazacaksınız resimde biz bu kurulumu yerel sunucuya yaptığımızdan adresini bu şekilde yazdık siz kendi kurulum yolunuzu dosyaları nereye attıysanız o adresi yazacaksınız mesela http://www.siteadınız.com/forum
3 - GZİP OUTPUT : Bu alan aynen öylece kalabilir bu bandwidth değerini sıkıştırarak daha az band ve daha hızlı kurulum için kullanılır her sunucu desteklemez buna gerekte yok zaten
4 - DATABASE SESSION : Burayı da ellemenize gerek yok
5 - UTF-8 CHARACTER SET : Forumunuzun kullanacağı veritabanındaki kullanılacak içeriklere ait tabloların yazı karakter setini eğer UTF-8 formatında olmasını isterseniz işaretleyin ancak joomla ile entegre olunca dil problemleri yaşamamak için size tavsiyem işaretlemeyin
6 - ALLOW STAT COLLECTİON : Forumun imalatçısı olan simplemachines.org sitesinin belli zamanlarda istatistiklerinize ulaşabilmesine izin vermek isterseniz işaretleyin yoksa boş kalsın
7 - MYSQL SERVER NAME : Bu alana sunucunuzun adresini gireceksiniz bu genelde "localhost"tur, böyle kalsın.
8 - MYSQL USER NAME : Bu alana joomlanızın kurulu olduğu veritabanı kullanıcı adını yazacaksınız eğer burada ve devamında yazacaklarınızı unutmuşsanız joomlanızın kurulu olduğu dizinden "configuration.php" dosyanızı açıp doğru ayarlara bakabilirsiniz.
9 - MYSQL PASSWORD : Bu kısma veritabanının şifresini yazın
10 - MYSQL DATABASE NAME : Bu alana veritabanı adını yazın
11 - MYSQL TABLE PREFIX : Bu alan forumunuzun kurulacağı veritabanında gerek karışıklığa sebep vermemek için gerekse de forumun düzgün çalışabilmesiiçin kurulumun otomatik olarak oluşturacağı veritabanı tablolarının önüne geleceği ek'i seçeceksiniz. Bu varsayılan olarak "smf_"dir ve öyle de kalması tavsiye olunur.
12 - PROCEED : Yukarıda verdiğimiz bilgilerin doğruluğundan eminsek bu butona basıp kurulumun diğer aşamasına devam ediyoruz.
Bizi bu aşamada şöyle bir ekran karşılayacak :
1 - YOUR USERNAME : Bu alana kullanıcı adını yazacaksınız ancak madem Joomla ile entegre çalışacak bir forum kuruyoruz o halde buraya bizden istenen bilgileri girerken Joomla da kayıtlı olduğu biçimde profil alanlarını girmeliyiz. Joomla da kullanıcı adınız neyse onu girin
2 - PASSWORD : Joomlanızdaki kullanıcı adınızı girdiğiniz gibi buraya da aynı şifrenizi girin
3 - PASSWORD : Şifrenizi tekrar girin
4 - E-MAIL ADRESS : Aynı şekilde joomladaki kullanıcı adınızda tanımladığınız e-mail adresinizi girin yada farklı bir adreste girebilirsiniz.
5 - MYSQL DATABASE PASSWORD : Güvenliğiniz için veritabanı şifresini bu alana tekrar girin
6 - FINISH : Eğer girdiğiniz bilgilerin doğruluğuna eminseniz bu butona basarak buradaki işlemi tamamlayın ve diğer aşamaya geçin.
Eğer herşeyi doğru yapmışsak kurulumun gayet düzgün ve hatasız gittiğini aşağıdaki resimdeki gibi bölüm gelirse anlamış olacağız.
1 - CLICK HERE TO.... : Şeklinde devam eden iletinin yanındaki kutucuğu işaretlerseniz ki her sunucuda çalışmaz forumun kurulum dosyası olan install.php dosyasını da otomatik silecektir. Eğer ileri aşamada bu dosyayı silmenize dair bir uyarı alırsanız demekki sunucunuz bu olayı desteklemiyor o halde forum klasörü içinde ftp den baktığınızda bu install.php dosyasını güvenlik açısından silmelisiniz.
2 - YOUR NEWLY INSTALLED FORUM : Bu yazıyı tıkladığınızda hem yukarıda bahsettiğimiz dosya silinmiş olacak hemde forumunuzun ana sayfasına gitmiş olacaksınız. Ve başarılı bir şekilde forumu kurmuş olacaksınız. Aşağıdaki resimde olduğu gibi.
Şimdi forumumuzu Joomlamızın bulunduğu dizine ve aynı veritabanına kurmakla entegre için gereklişartları yerine getirmiş olduk. Bundan sonrası ise, Joomla ana sayfamıza Forumu bağlamak ve kullanıcıları senkronize etmek ki Joomla dan giriş yapan üyeler foruma da giriş yapmış olsun, bunun için yapılması gereken ilk iş. Bize bu senkronizeyiyaptıracak bileşenin yüklenmesine geliyor. Bu bileşeni yüklemek için önce son entegre bileşenini görmek ve bilgisayarımıza yüklemek gerekiyor BURADAN
Hem en son versiyon entegre bileşenine bakıp ona göre indirebilirsiniz. İndirme işlemi tamamlandıktan sonra zipli dosyayı açın içinden bir çok zipli dosya çıkacak, size şu etapta lazım olan entegre bileşeni com_smf gibi de yazabilir. Bileşeni normal bileşenler gibi Joomlanın yönetim paneline girip bileşen yükleme bölümünden kurun. Kurulum bittikten sonra da hem bu entegre bileşenini tanımak işlevlerine bakmak hem de entegreyi yapabilmek adına sizin için hazırladığımız ve BURADAN elinize birbardak çay alıp keyifle izleyerek yapabilirsiniz.
Joomla tema yapimi hakkinda (ders baslangici)...
Lutfen okuyunuz:
Sevgili joomla dostlari,kullanicilari ve joomla yapimi ve gelistirilmesi konusuna gonul vermis tum arkadaslar yaklasik 1 veya 1,5 seneden beridir joomla ile ilgileniyorum ve bu sure icerisinde joomla gelisti ve sinirlari zorlar bir CMS haline geldi onunla birlikte benimde yeteneklerim gelisti ama bu demek degilki hersey burada bitmistir teknoloji,bilim vb. konularin gelisimine paralel olarak internet dunyasida hayatimizin vazgecilmez bir parcasi haline gelmis durumdadir ve kendisini devamli yenilemektedir eskiden insanlarin buyuk paralar verip'de bir internet sitesi sahibi olmasi seyrek gorunen bir olaydi ve yapanlar kendileri ile gurur duyup hatta bunu bir reklam araci olarak bile kullanirlardi , simdi ise artik durum oyle bir hal aldiki herkez kendi internet sitesini kendisi yapabilecek duruma gelmistir ve tabiki bu hayal joomla vb CMS sistemler sayesinde olmustur.
Iste bu baslik adi altinda siz sevgili forum uyelerimize elimden geldigi kadar joomla template yapimini daha dogrusu bir PSD sablonunu nasil joomla'ya uyarlayacagimizi kendi tekniklerimle anlatmaya calisacagim tabiki anlatim suresi uzun ve icerik hatali olabilir bunun icin simdiden sizlerden ozur diliyorum .
Anlatima baslamadan once kisadan gerekli olan arac ve gerecleri asagiya listeleyecegim;
a) Joomla uniform server (localhost) Bilgisayarinizda virtuel server olusturmanizi saglar...
b) Macromedia dreamweaver yada wordpad veya herhangi bir html editor ...
c) Adobe photoshop Grafik programi...
d) Nattyware renk kodu programi http://www.nattyware.com/pixie.html
e) Multiple IE's tum Internet Explorer'lar bir arada http://tredosoft.com/Multiple_IE
Onemli not: anlatimda kullanilacak olan PSD sablon sadece ve sadece bir anlatim araci olarak kullanilmistir .
Hedef sablonumuz asagidaki gibidir sonuc 100% olmayacak cunku sol menu jomlanin standart sol menusu ile uymuyor tabiki biraz ugrasilirsa 100% sonuc alinabilir onda suphe yok ama bizim amacimiz temayi 100% cevirmek degil tersine joomlaya ne sekil uyarlayabilcegimizi ogrenmek...
Bu konuda tema'yi bastan kendimiz yapmaya calisacagiz zaten temanin kendi index'i tablolar'ile cizilmis ve bizi cok ugrastirir en bastan temiz bir sekilde yapmak daha iyi olacaktir...
Bugun vaktimin yettigi kadar hazirliklar ile baslayip ilerlemeye devam edecegiz..
Ben herzaman yeni bir temaya baslarken soyle bir yol izliyorum : elimdeki herhangi bir temayi kobay olarak kullaniyorum daha dogrusu kurban ediyorum nasilmi?
mesela elimde x temasi var localhostuma bu temayi kuruyorum kurduktan sonra temalarin oldugu dizine girip kurdugum x temasinin icini oldugu gibi bosaltiyorum index'ini images klasorunun icindeki grafikleri css dosyasini yani herseyi sifirliyorum sonuc olarak elimde sifir bir tema var ve simdi calismaya baslayabilirim...
Bu arada dersleri takip etmek isteyen arkadaslar sizlere PSD sablonununda vereyim ...
http://volkann.vo.funpic.de/ders/joomladersleri.rar
simdi sirada solmenu'nun icine joomla'nin left menu icin yazdigi php tagini eklemek var...
left menu php kod asagidaki gibi;
ve gorunum soyle olmali;
simdi sablonumuza dikkat ederseniz flash animasyonun hemen altinda icerik'in oldugu kismin ust tarafinda bir bombe var asagida gostereyim;
bu bombeyi psd sablonundan kesmemiz gerekli bunun icin elinizdeki psd sablonunu adobe photoshop yardimi ile acin bu arada kucuk bir hesap yapmak istiyorum bu gerekli cunku sayfa genisligimiz 740px sol menu genisligimiz 171px olacak geriye kalan genisligi icerik bolumu icin kullanacagiz yani 569px olacak oyleyse actigimiz PSD sablonun'da bombeli bolumden 569px genisliginde bir parca kesecegiz uzunlugu ise hemen hemen bombenin bittigi yere kadar olabilir atiyorum 20px diyelim...
oyle ise PSD sablonumuzu acalim ve strg+shift+e tuslari ile grafigimizi bir tabanda sabitleyelim;
yukarida'da goruldugu gibi butun resim bir tabanda birlesti simdi kesime hazir
rectangle selection tool'u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi'de 20px olarak ayarlayalim...
rectangle selection tool'u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi'de 20px olarak ayarlayalim...
ve bombeli kismi strg+x yardimi ile keselim strg+n yeni bir tabela acalim ve ismini bombe_bg yapalim enter deyip gecelim ve acilan pncerede strg+v tuslari ile kestigimiz grafigi yapistiralim son olarak web icin kaydet diyelim ve localhost'da temalar bolumundeki temamizin icine images klasorune kaydedelim...
yapamayan arkadaslar buradan imaj'i alabilirler
imaj
ve simdi tekrar css kodlarimiza donelim yeni ekledigimiz div taglarini sekillendirelim...
tum bu yaptiklarimizdan sonra bendeki son gorunumler
HTML editor
index.php
template_css.css
tarayici
arkadaslar dunku yaptigimiz css calismalarina dair ;
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
satirlarini soyle degistirelim
#sol_con{
text-align:left;
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
eklenti olarak sadece text-align eklentisi yaptik nedeni ise #ana_con kodlarini yazarken text-align:center demistik ve diger container'lerde text-align:left demedigimiz takdirde yazilar ortada cikmaya devam edeceklerdir...
arama kutusunun container'nisini temamizin index'ine yerlestirdikten sonra simdi sirada arama kutusu var onuda herzamanki gibi onun icin hazirladigimiz container'nin icine sokacagiz yani arama_con'un icine asagidaki gibi;
arama kutumuzu'da bu sekilde ekldikten sonra simdi sirada joomlanin search kodlarini arama kutusunun icine yerlestirmeliyiz asagidaki gibi;
buraya kadar index.php ile olan isimiz simdilik bitti ve simdi css dosyamizi acalim ve yeni ekledigimiz div taglarini sekillendirelim asagidaki gibi ;
#icerik kodunu dunku calismada unutmusuz onuda simdi ekledim
beni takip eden arkadaslar farkina varmistir bizim temamiz ile sablonumuzda ki yazilarin buyuklukleri arasinda farklilik var bu farki yok etmek icin css dosyamizin e ustunde bulunan genel HTML ayarlari bolumundeki body{} kodunun font-size{} bolumundeki 0.8em komutunu 0.7em olarak degistirelim ve yazilarimizi biraz kucultelim asagidaki gibi ;
ve buna paralel olarak solmenu table.modultable kodumuzu'da su sekilde degistirelim;
yazilari kuculttugumuz icin modullerimizin uzerinde cikan yazilarda kuculmus oldu onlari biraz buyultup yukari kaydirdik degisiklleri padding ve font-size alanlarinda yaptik...
Buraya kada yaptiklarimizdan sonra bendeki durum soyle ;
HTML editor
index.php gorunumu;
HTML editor
Template_css.css gorunumu;
ekran goruntusu buraya sigmayacagi icin download edip bakabilirsiniz;
http://volkann.vo.funpic.de/ders/template_css.css
Tarayici goruntusu mozilla firefox;
Tarayici goruntusu ie6;
Tarayici goruntusu ie7;
simdi artik yavas yavas temamizin sonlarina yani footer bolumlerine dogru geliyoruz arkadaslar simdi yapmamiz gereken is PSD sablonumuzun altinda icerik bolumunde'ki notebook grafigimizi bir sekilde temamiza entegre etmektir bunun icin PSD sablonumuzu acalim ve strg+shift+e tuslari ile kesime hazir hale getirelim ve rectangle selection tool yardimi ile keselim en:740px boy:154px burada dikkat etmemiz gereken husus kestigimiz grafiklerin birbirlerine tam olarak uymalaridir yoksa bozuk bir goruntu elde ederiz ,isinizi kolaylastirmak icin sablonu iyice zoom yapabilirsiniz(alt+scroll)
asagida kesim yerini gostereyim;
yapamayan arkadaslar icin asagida tekrar imajimizi vereyim ;
simdi kestigimiz bu grafigi temamizin icine entegre edelim index.php'yi acalim ve main container bitis kismindan sonra yeni bir div tagi ekleyelim adi grafik_ust olsun simdi asagidaki gibi index.php'yi degistirelim;
ust grafigimizi temamiza ekledikten sonra simdi sirada ikinci grafigimiz var yani orta grafik onuda PSD sablonumuzdan kaldigimiz yerde en:740px; boy:80px olmak uzere keselim onceki kestigimiz yerin hemen altindan hic bosluk birakmadan ;
yapamayan arkadaslar icin imaji ben burada vereyim;
ve bu grafigimizi'de temamizin icine yerlestirelim hemen 'grafik_ust' div taginin altina yeni div acalim adi 'grafik_orta' olsun asagidaki gibi;
daha sonra bu her iki div tagimizin yani grafik_ust ve grafik_orta divlerinin css komutlarini verelim asagidaki gibi;
simdi 3.grafigimizi'de temamiza sokalim bunun icin yine PSD sablonumuzda kaldigimiz yerden kesmeye devam edelim genislik:740px; yukseklik:43px; olacak sekilde ;
yapamayan arkadaslar icin ben asagida imaji ekliyorum;
ve index.php de yine hemen grafik_orta div taginin altina bu yeni imajimiz icin bir div tagi acalim adi grafik_alt olsun ve index.php'yi su sekilde yazalim;
ve son ekledigimiz div taginin'da css komutunu verelim ve bugunu burada noktalayalim isterseniz arkadaslar;
evet bugun'de bayagi bir yol gidildi ve footer bolumune gelindi eksik kalan joomlanin kendi css komutlari var birkac guzellik makyaji ve tabiki XML dosyamiz var..
Bugun sizler ile birlikte temanmizin alt kismina yatay menumuzu PSD sablonumuzdaki sekilde entegre etmeye calisacagiz...
simdi yapmamiz gereken islem index.php'mizi acmak ve yatay menumuzu icine yerlestirebilecegimiz bir sekilde div kutusu olusturmaktir bunun icin ilk once yatay menumuzu nerede istedigimizin kararini vermemiz gerekir ben dunku calismadan hatirlayacaginiz gibi temamizin altina 3 adet grafik yerlestirmistim (grafik_ust,grafik_alt,grafik_orta) bu grafiklerden grafik_orta uygun diye dusunuyorum ayrica grafik_orta div tagi yatay menumuzede ister istemez container olacak yani isimizi kolaylastiracak ...
o zaman baslayalim yatay menumuz'un ismi
Sevgili joomla dostlari,kullanicilari ve joomla yapimi ve gelistirilmesi konusuna gonul vermis tum arkadaslar yaklasik 1 veya 1,5 seneden beridir joomla ile ilgileniyorum ve bu sure icerisinde joomla gelisti ve sinirlari zorlar bir CMS haline geldi onunla birlikte benimde yeteneklerim gelisti ama bu demek degilki hersey burada bitmistir teknoloji,bilim vb. konularin gelisimine paralel olarak internet dunyasida hayatimizin vazgecilmez bir parcasi haline gelmis durumdadir ve kendisini devamli yenilemektedir eskiden insanlarin buyuk paralar verip'de bir internet sitesi sahibi olmasi seyrek gorunen bir olaydi ve yapanlar kendileri ile gurur duyup hatta bunu bir reklam araci olarak bile kullanirlardi , simdi ise artik durum oyle bir hal aldiki herkez kendi internet sitesini kendisi yapabilecek duruma gelmistir ve tabiki bu hayal joomla vb CMS sistemler sayesinde olmustur.
Iste bu baslik adi altinda siz sevgili forum uyelerimize elimden geldigi kadar joomla template yapimini daha dogrusu bir PSD sablonunu nasil joomla'ya uyarlayacagimizi kendi tekniklerimle anlatmaya calisacagim tabiki anlatim suresi uzun ve icerik hatali olabilir bunun icin simdiden sizlerden ozur diliyorum .
Anlatima baslamadan once kisadan gerekli olan arac ve gerecleri asagiya listeleyecegim;
a) Joomla uniform server (localhost) Bilgisayarinizda virtuel server olusturmanizi saglar...
b) Macromedia dreamweaver yada wordpad veya herhangi bir html editor ...
c) Adobe photoshop Grafik programi...
d) Nattyware renk kodu programi http://www.nattyware.com/pixie.html
e) Multiple IE's tum Internet Explorer'lar bir arada http://tredosoft.com/Multiple_IE
Onemli not: anlatimda kullanilacak olan PSD sablon sadece ve sadece bir anlatim araci olarak kullanilmistir .
Hedef sablonumuz asagidaki gibidir sonuc 100% olmayacak cunku sol menu jomlanin standart sol menusu ile uymuyor tabiki biraz ugrasilirsa 100% sonuc alinabilir onda suphe yok ama bizim amacimiz temayi 100% cevirmek degil tersine joomlaya ne sekil uyarlayabilcegimizi ogrenmek...
 | This image has been resized. Click this bar to view the full image. The original image is sized 740x783. |
Bu konuda tema'yi bastan kendimiz yapmaya calisacagiz zaten temanin kendi index'i tablolar'ile cizilmis ve bizi cok ugrastirir en bastan temiz bir sekilde yapmak daha iyi olacaktir...
Bugun vaktimin yettigi kadar hazirliklar ile baslayip ilerlemeye devam edecegiz..
Ben herzaman yeni bir temaya baslarken soyle bir yol izliyorum : elimdeki herhangi bir temayi kobay olarak kullaniyorum daha dogrusu kurban ediyorum nasilmi?
mesela elimde x temasi var localhostuma bu temayi kuruyorum kurduktan sonra temalarin oldugu dizine girip kurdugum x temasinin icini oldugu gibi bosaltiyorum index'ini images klasorunun icindeki grafikleri css dosyasini yani herseyi sifirliyorum sonuc olarak elimde sifir bir tema var ve simdi calismaya baslayabilirim...Bu arada dersleri takip etmek isteyen arkadaslar sizlere PSD sablonununda vereyim ...
http://volkann.vo.funpic.de/ders/joomladersleri.rar
Yukaridaki son yaptiklarimizdan sonra simdi elimizde bombos bir x temasi ama dolu bir xml dosyasi var o su anda bizi ilgilendirmiyor xml son konumuz olacak ...
simdi index.php'yi acalim ve joomlanin header tagini ekleyelim,
bu islemden sonra devam edelim ve esas bolume gecelim, hemen bitisinden sonra asagiya ile tekrar baslayalim temamizin header kismi flash olacak bunu simdiden belirteyim .
simdi sira geldi sayfanin ana kutusunu olusturmaya unutmayalim bu anlatimda sadece div taglari kullanilacaktir bu konuyu da gectikten sonra simdi ana kutuyu asagidaki gibi olusturalim...
__________________simdi index.php'yi acalim ve joomlanin header tagini ekleyelim,
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
bu islemden sonra devam edelim ve esas bolume gecelim, hemen bitisinden sonra asagiya ile tekrar baslayalim temamizin header kismi flash olacak bunu simdiden belirteyim .
simdi sira geldi sayfanin ana kutusunu olusturmaya unutmayalim bu anlatimda sadece div taglari kullanilacaktir bu konuyu da gectikten sonra simdi ana kutuyu asagidaki gibi olusturalim...
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
flash entegrasyonu'na gecmeden evvel beni izleyen arkadaslar icin hemen buradan flash dosyamizi'da vereyim http://volkann.vo.funpic.de/ders/jd.rar
evet simdi flash entegrasyonu icin bize iki kutu gerekli birincisi container gorevini ustlenecek (flash_con) ikincisi flash'i kutulayacak (flash) ve birde flash tarzi animasyonlari joomlanin icine sokmak icin gerekli olan kodumuz var onuda asagida vereyim,
devam edelim ...
ilk once container'mizi yerlestirelim...
ve container'mizin icine flash kutumuzu ekleyelim...
dikkat ederseniz simdiye kadar daha template_css.css dosyasini hic ellemedik ama birazdan bu konuyada girecegiz. Simdi sira geldi flash dosyamizi eklemeye bunun icin sizlere yukarida verdigim kodu kullanacagiz...
not: flash genislik:740px
flash uzunluk :161px
__________________evet simdi flash entegrasyonu icin bize iki kutu gerekli birincisi container gorevini ustlenecek (flash_con) ikincisi flash'i kutulayacak (flash) ve birde flash tarzi animasyonlari joomlanin icine sokmak icin gerekli olan kodumuz var onuda asagida vereyim,
Kod:
ilk once container'mizi yerlestirelim...
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
ve container'mizin icine flash kutumuzu ekleyelim...
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
not: flash genislik:740px
flash uzunluk :161px
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
Buraya kadar yaptiklarimizdan sonra bendeki HTML editor ve tarayicimdaki goruntuleri sizlere gostereyim ve devam edelim...
tarayici goruntusu
HTML editor goruntusu
__________________tarayici goruntusu
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
HTML editor goruntusu
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
evet buraya kadar simdilik hersey yolunda gitti ama bu zaten isin kolay kismiydi ...
dilerseniz devam edelim...
simdi yapmamiz gereken yine bir container olusturmak olusturacagimiz bu container sol menumuzu (left) ve icerigimizi(mainbody) tasiyacak buna ek olarak birkac'da grafik tasiyacak container'mizin ismi 'main' olsun ...
main container'mizi yerine yerlestirdikten sonra simdi icindeki elementleri yerlestirmeliyiz ama bu bolume gecmeden once artik template_css.css dosyasina bir el atmanin zamani geldi...
css dosyamiz'daki kodlama su sekilde ;
__________________dilerseniz devam edelim...
simdi yapmamiz gereken yine bir container olusturmak olusturacagimiz bu container sol menumuzu (left) ve icerigimizi(mainbody) tasiyacak buna ek olarak birkac'da grafik tasiyacak container'mizin ismi 'main' olsun ...
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
css dosyamiz'daki kodlama su sekilde ;
Kod:
/* genel html ayarlari####################################################################################### */
/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */
body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */
/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}
Bu arada beni takip eden arkadaslar belki farkina varmislardir temamizin index.php'sinde actigimiz ve tag'larini kapatalim ben unutmusum.
index.php'deki son gorunum soyle olmali...
ve devam...
son olarak main adli container'mizi yerine yerlestirmistik ve simdi sirada onun icine girecek olan elemanlari isimlendirme ve ekleme islemi var...
solmenumuzu yine bir container icine sokalim ve bu container'mizi sol_con olarak adlandiralim daha sonra bu container'nin icine'de solmenu'yu sokalim...
__________________index.php'deki son gorunum soyle olmali...
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
ve devam...
son olarak main adli container'mizi yerine yerlestirmistik ve simdi sirada onun icine girecek olan elemanlari isimlendirme ve ekleme islemi var...
solmenumuzu yine bir container icine sokalim ve bu container'mizi sol_con olarak adlandiralim daha sonra bu container'nin icine'de solmenu'yu sokalim...
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
simdi sirada solmenu'nun icine joomla'nin left menu icin yazdigi php tagini eklemek var...
left menu php kod asagidaki gibi;
Kod:
Kod:
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
simdi sablonumuza dikkat ederseniz flash animasyonun hemen altinda icerik'in oldugu kismin ust tarafinda bir bombe var asagida gostereyim;
| This image has been resized. Click this bar to view the full image. The original image is sized 782x706. |
bu bombeyi psd sablonundan kesmemiz gerekli bunun icin elinizdeki psd sablonunu adobe photoshop yardimi ile acin bu arada kucuk bir hesap yapmak istiyorum bu gerekli cunku sayfa genisligimiz 740px sol menu genisligimiz 171px olacak geriye kalan genisligi icerik bolumu icin kullanacagiz yani 569px olacak oyleyse actigimiz PSD sablonun'da bombeli bolumden 569px genisliginde bir parca kesecegiz uzunlugu ise hemen hemen bombenin bittigi yere kadar olabilir atiyorum 20px diyelim...
oyle ise PSD sablonumuzu acalim ve strg+shift+e tuslari ile grafigimizi bir tabanda sabitleyelim;
yukarida'da goruldugu gibi butun resim bir tabanda birlesti simdi kesime hazir
rectangle selection tool'u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi'de 20px olarak ayarlayalim...
rectangle selection tool'u alalim ve yukaridan sabit buyuklugu secelim ve buyuklugu 569px genisligi'de 20px olarak ayarlayalim...
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
ve bombeli kismi strg+x yardimi ile keselim strg+n yeni bir tabela acalim ve ismini bombe_bg yapalim enter deyip gecelim ve acilan pncerede strg+v tuslari ile kestigimiz grafigi yapistiralim son olarak web icin kaydet diyelim ve localhost'da temalar bolumundeki temamizin icine images klasorune kaydedelim...
yapamayan arkadaslar buradan imaj'i alabilirler
imaj
butun bunlardan sonra yine index.php'ye geri donuyoruz ve kaldigimiz yerden devam ediyoruz en son olarak left menumuzu ekledik ve simdi sirada left menunun solunda belirecek olan alan kaldi yani icerik kismi bu alan icin yine bir container aciyoruz ismi 'icerik_con' olsun ve bu container'nin icine sirasi ile bombe'li grafigimizi ve mainbody kismini ekleyecegiz bombeli grafigimizi ekleyecegimiz div taginin ismi yine 'bombe' olsun ve mainbody'i ekleyecegimiz tagin ismide 'icerik' olsun ...
ve icerik div taginin icerisine joomlanin mainbody kodunu ekleyelim;
__________________Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
ve icerik div taginin icerisine joomlanin mainbody kodunu ekleyelim;
Kod:
Kod:
http://www.w3.org/TR/xhtml1/DTD/xhtm...sitional.dtd">
http://www.w3.org/1999/xhtml">
id ) { initEditor(); } ?>
" />
" ; ?>" ; ?>
ve simdi tekrar css kodlarimiza donelim yeni ekledigimiz div taglarini sekillendirelim...
Kod:
/* genel html ayarlari####################################################################################### */
/* html yuksekligi */
html {
height:100%;
}/* html yuksekligi bitis */
body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.8em;/* yazi buyuklugu */
}
/* genel html ayarlari bitti######################################################################################### */
/* sayfa icindeki div'lerin ayarlari baslangic ######################################################################## */
#ana_con{
border-right:1px solid #000000; /* sag taraf kanarlik siyah*/
border-left:1px solid #000000; /* sol taraf kanarlik siyah*/
background-color:#ffffff;/* arka plan beyaz*/
width:740px;/* genislik*/
text-align:center;/* hack sayfayi ortalamamizi saglar margin auto oldugu takdirde*/
margin:auto;
}
#flash_con{
width:740px;/* genislik*/
height:161px;/* yukseklik*/
}
#flash{
/* bos kalabilir*/
}
#main{
width:740px;
margin:auto;
}
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
#sol_menu{
/* bos birakiyoruz*/
}
#icerik_con{
text-align:left;/* yazilari sol'a yanastiriyoruz*/
float:right;/* bu container sag tarafa yanasik olmali*/
width:569px;
}
#bombe{
background-image:url(../images/bombe_bg.jpg);
background-repeat:no-repeat;
height:20px;
width:569px;
}
#icerik{
/* bos kalabilir*/
}
HTML editor
index.php
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
template_css.css
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
tarayici
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
arkadaslar dunku yaptigimiz css calismalarina dair ;
#sol_con{
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
satirlarini soyle degistirelim
#sol_con{
text-align:left;
width:171px;/* genislik*/
height:100%;/* yukseklik*/
float:left;/* sol tarafa yanastirmak icin*/
}
eklenti olarak sadece text-align eklentisi yaptik nedeni ise #ana_con kodlarini yazarken text-align:center demistik ve diger container'lerde text-align:left demedigimiz takdirde yazilar ortada cikmaya devam edeceklerdir...
simdi sablonu dikkatlice inceledigimiz takdirde bizim sol menu olarak kullandigimiz bolumu sablonu cizen kisi en ustte login bolumu ve onun altinda newsletter olarak kullanmis orjinalligi bozmamak icin bizde o bolumde solmenumuzun uzerine mesela arama bolumu ekleyebiliriz ne dersiniz?
o zaman baslayalim ...
kullanacagimiz alan PSD sablonumuzda login bolumu icin kulanilan alan olmaktadir ve bizim temamizda solmenumuzun ustune gelecek...
Hep birlikte PSD sablonumuzu acalim ve member login kismini oldugu gibi bosaltalim sonuc olarak asagidaki gibi bir gorunum elde edecegiz;
simdi sablonumuzu tekrar kesime hazir hale getirmek icin strg+shift+e tuslarina basalim ve sablonumuzu bir tabana sabitleyelim,
ve yine her kesimde oldugu gibi rectangle selection tool'u secelim ve sabit buyukluk kisminin genislik ayarini 171px yukseklik ayarini 110px yapalim asagidaki gibi;
bu kismi strg+x ile keselim strg+n ile yeni bir tablo acalim ve adini arama_con_bg olarak degistirelim enter ile gecelim strg+v ile acilan pencerede yapistiralim ve web icin kaydet diyelim temalar bolumundeki temamizin images klasorune yapistiralim...
yapamayan arkadaslar icin asagida tekrar bu imaj'i veriyorum ;
grafigimiz hazir simdi diledigimiz gibi bir arama alani olusturmamiz gerekli bunun icin iki kutuya ihtiyacimiz olacak birincisi container olup arama kutusunu icinde barindiracak adi 'arama_con' olsun ikincisi ise arama bolumunun kodlarini icinde barindiracak adi 'arama' olsun bu iki kutuda sol_con adli div container'mizin icinde solmenunu adli divtaginin uzerinde yer alacaklar...
simdi hepberaber arama_con adli div container'mizi yerine yerlestirelim asagidaki gibi;
__________________o zaman baslayalim ...
kullanacagimiz alan PSD sablonumuzda login bolumu icin kulanilan alan olmaktadir ve bizim temamizda solmenumuzun ustune gelecek...
Hep birlikte PSD sablonumuzu acalim ve member login kismini oldugu gibi bosaltalim sonuc olarak asagidaki gibi bir gorunum elde edecegiz;
| This image has been resized. Click this bar to view the full image. The original image is sized 740x783. |
simdi sablonumuzu tekrar kesime hazir hale getirmek icin strg+shift+e tuslarina basalim ve sablonumuzu bir tabana sabitleyelim,
ve yine her kesimde oldugu gibi rectangle selection tool'u secelim ve sabit buyukluk kisminin genislik ayarini 171px yukseklik ayarini 110px yapalim asagidaki gibi;
| This image has been resized. Click this bar to view the full image. The original image is sized 1152x864. |
bu kismi strg+x ile keselim strg+n ile yeni bir tablo acalim ve adini arama_con_bg olarak degistirelim enter ile gecelim strg+v ile acilan pencerede yapistiralim ve web icin kaydet diyelim temalar bolumundeki temamizin images klasorune yapistiralim...
yapamayan arkadaslar icin asagida tekrar bu imaj'i veriyorum ;
grafigimiz hazir simdi diledigimiz gibi bir arama alani olusturmamiz gerekli bunun icin iki kutuya ihtiyacimiz olacak birincisi container olup arama kutusunu icinde barindiracak adi 'arama_con' olsun ikincisi ise arama bolumunun kodlarini icinde barindiracak adi 'arama' olsun bu iki kutuda sol_con adli div container'mizin icinde solmenunu adli divtaginin uzerinde yer alacaklar...
simdi hepberaber arama_con adli div container'mizi yerine yerlestirelim asagidaki gibi;
Kod:
arama kutusunun container'nisini temamizin index'ine yerlestirdikten sonra simdi sirada arama kutusu var onuda herzamanki gibi onun icin hazirladigimiz container'nin icine sokacagiz yani arama_con'un icine asagidaki gibi;
Kod:
Kod:
Kod:
#icerik{
/* bos kalabilir*/
}
#arama_con{
width:171px;/* genislik*/
height:110px;/* yukseklik######## yukseklik grafigimizin yuksekligi dikkat ederseniz*/
background-image:url(../images/arama_con_bg.jpg);
background-repeat:no-repeat;
}
#arama{
width:100%;/* genislik bolumu container'nin icinde oldugu icin 100% kalabilir*/
height:auto;/* genislik orjinal olarak biraktik */
padding-top:50px;/*yukaridan 50px uzaklastirdik boylece kutunun tam ortasinda izlenimini almis olduk*/
} simdi dilerseniz yavas yavas solmenumuzu css ile sekillendirelim ama buna gecmeden once PSD sablonumuzdan bir grafik daha kesmemiz gerekecek bu grafigi modul header olarak kullanacagiz hep beaber PSD sablonumuzu acalim ve newsletter bolumunun icini bosaltalim ve bu bolumdeki grafigi keselim boyutlari en:171px boy:40px olmak uzere ve keserken yaklasik 5px kadar yukari kaydiralim yani kutuyu tam olarak degilde biraz yukari kaydirip keselim asagidaki gibi;
asagida tekrar imajimizi yapamayan arkadaslar icin vereyim;
ve simdi yine css dosyamiza donelim kestigimiz imaji yerine yerlestirelim hepimizin bildigi gibi modul sekillendirme islemleri icin kullanilan birtakim css kodlari var onlar hakkinda biraz bilgi vereyim ve devam edelim
a) table.moduletable{} : modul tablosunu sekillendirir
b) table.moduletable th{}: modul header kismini sekillendirir
c) table.moduletable td{} : modul icerigini sekillendirir
d) table.moduletable td a{}: modul icindeki linkleri sekillendirir
e) table.moduletable td a:hover{}: modul icindeki linklerin mouse uzerine geldigindeki durumu sekillendirir
f) table.moduletable td a:visited{} : modul icindeki ziyaret edilen linkleri sekillendirir,
simdi butun bu bilgilerden sonra yine css dosyamiza donup modulmuzun header kismini ayarlayalim bunun icin gerekli kodumuz neydi ?
tabiki table.moduletable th{} o halde asagidaki gibi bir ayar yapalim;
simdi dilerseniz modul tablomuzu sekillendirelim tabiki table.moduletable{} kodumuz ile asagidaki gibi ;
simdide modullerimizin icindeki elemanlari sekillendirelim bunun icin gerekli kodumuz table.moduletable td{} asagidaki gibi;
Buradan sonra geriye kalan kodlari kullanmamiza gerek yok cunku geriye kalan td:a,hover,visited kodlarini sayfanin genel ayarlari ile birlestirecegiz ama mouse linkin uzerine geldiginde grafik ciksin veya ziyaret edilmis linkler grafik ile gosterilsin istiyorsak tabiki bu kodlari kullanmamiz sart olurdu bunun yerine biz asagidaki kodlari css temamizin genel HTML ayarlari bolumune ekleyelim;
__________________asagida tekrar imajimizi yapamayan arkadaslar icin vereyim;
ve simdi yine css dosyamiza donelim kestigimiz imaji yerine yerlestirelim hepimizin bildigi gibi modul sekillendirme islemleri icin kullanilan birtakim css kodlari var onlar hakkinda biraz bilgi vereyim ve devam edelim
a) table.moduletable{} : modul tablosunu sekillendirir
b) table.moduletable th{}: modul header kismini sekillendirir
c) table.moduletable td{} : modul icerigini sekillendirir
d) table.moduletable td a{}: modul icindeki linkleri sekillendirir
e) table.moduletable td a:hover{}: modul icindeki linklerin mouse uzerine geldigindeki durumu sekillendirir
f) table.moduletable td a:visited{} : modul icindeki ziyaret edilen linkleri sekillendirir,
simdi butun bu bilgilerden sonra yine css dosyamiza donup modulmuzun header kismini ayarlayalim bunun icin gerekli kodumuz neydi ?
tabiki table.moduletable th{} o halde asagidaki gibi bir ayar yapalim;
Kod:
#solmenu table.moduletable th{/* modul header ayarlari */
text-align:left;/* yazilar solda */
color: #FFAA00;/* yazi rengi */
width: 171px;/* genislik*/
background-image:url(../images/solmenu_th_bg.jpg);
background-repeat:no-repeat;
padding:15px 0 0 10px; /* yukaridan 15px sagdan 0px asagidan 0px soldan 10px ayirik */
} Kod:
#solmenu table.moduletable {
width: 171px;
} Kod:
#solmenu table.moduletable td{
width: 171px;/* genislik*/
padding-left:5px;/* soldan 5px ayri*/
padding-bottom:2px;/* asagidan 2px ayri*/
} Kod:
a {
color: #800000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color: black;
}
evet modullerimiz hemen hemen sekillendi daha sonra belki gerek gorursek bu konuya tekrar donup bir iki degisiklik yapabiliriz... beni takip eden arkadaslar farkina varmistir bizim temamiz ile sablonumuzda ki yazilarin buyuklukleri arasinda farklilik var bu farki yok etmek icin css dosyamizin e ustunde bulunan genel HTML ayarlari bolumundeki body{} kodunun font-size{} bolumundeki 0.8em komutunu 0.7em olarak degistirelim ve yazilarimizi biraz kucultelim asagidaki gibi ;
Kod:
body {
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.7em;/* yazi buyuklugu */
} Kod:
#solmenu table.moduletable th{/* modul header ayarlari */
text-align:left;/* yazilar solda */
color: #FFAA00;/* yazi rengi */
width: 171px;/* genislik*/
background-image:url(../images/solmenu_th_bg.jpg);
background-repeat:no-repeat;
padding:10px 0 0 10px; /* yukaridan 10px sagdan 0px asagidan 0px soldan 10px ayirik */
font-size:110%;
} Buraya kada yaptiklarimizdan sonra bendeki durum soyle ;
HTML editor
index.php gorunumu;
HTML editor
Template_css.css gorunumu;
ekran goruntusu buraya sigmayacagi icin download edip bakabilirsiniz;
http://volkann.vo.funpic.de/ders/template_css.css
Tarayici goruntusu mozilla firefox;
Tarayici goruntusu ie6;
Tarayici goruntusu ie7;
simdi kucuk onizleme molamizdan sonra temamizi biraz guzellestirelim istiyorum ozellikle main kismi yani solmenu ve mainbody'i icinde barindiran kisim biraz ciplak kaldi gerci sonlara dogru guzellesecek ama simdi main bolumunu halledelim istiyorum bunun icin yine PSD sablonunumuzdan kucuk bir bolum kesmek zorundayiz sanirim beni takip eden arkadaslar sablondan grafiklerin nasil kesildigini ogrendiler bunu simdi tekrarlamayacagim ama nereden kesilecegini hemen asagida gostereyim;
bu kestigimiz grafik main container'mizin arka plani olacak ;
yapamayan arkadaslar icin asagida imaji tekrar ekliyorum;
imajimizi kestik simdi tekrar index.php dosyamizi acalim ve kucuk bir eklenti yapalim
icerik_con container bitisinden hemen sonra yeni bir div tag olusturalim adi cleaner olacak bu kodun gorevi sayfanin altini temizlemektir yani footer bolumu ve main bolumunu birbirinden ayiracak yoksa footer istedigimiz gibi cikmaz veya main bolumune istedigimiz sekli veremeyiz asagidaki gibi index.php'yi yazalim;
div tagimizi bu sekilde ekledik ve simdi onun gorevini css dosyamizda aciklayalim;
ve simdi main containermizin arka plan resmini ekleyebiliriz asagidaki gibi main{} bolumunu degistirelim;
evet simdi main bolumumuz yavas yavas bir seye benziyor...
simdi eger dikkatinizi cektiyse son grafigimizi ekledikten sonra icerigin solmenuye ne kadar yakin oldugu biraz daha belirginlesti o zaman bunu hemen degistirelim daha evvelki css kodlarimizda bildiginiz gibi #icerik{} kismini bos birakmistik simdi o bolumu soyle degistirelim;
__________________bu kestigimiz grafik main container'mizin arka plani olacak ;
yapamayan arkadaslar icin asagida imaji tekrar ekliyorum;
| This image has been resized. Click this bar to view the full image. The original image is sized 740x5. |
imajimizi kestik simdi tekrar index.php dosyamizi acalim ve kucuk bir eklenti yapalim
icerik_con container bitisinden hemen sonra yeni bir div tag olusturalim adi cleaner olacak bu kodun gorevi sayfanin altini temizlemektir yani footer bolumu ve main bolumunu birbirinden ayiracak yoksa footer istedigimiz gibi cikmaz veya main bolumune istedigimiz sekli veremeyiz asagidaki gibi index.php'yi yazalim;
Kod:
Kod:
#cleaner {/* ayirac yada temizlikci'de denilebilir*/
clear: both;/* bot temizlesin*/
margin: 0;/* yukaridan sagdan soldan asagidan sifir kayma*/
} Kod:
#main{
background-image: url(../images/main_bg.jpg);
background-repeat:repeat-y;/* y ekseninde grafigi tekrarla */
width:740px;
margin:auto;
} simdi eger dikkatinizi cektiyse son grafigimizi ekledikten sonra icerigin solmenuye ne kadar yakin oldugu biraz daha belirginlesti o zaman bunu hemen degistirelim daha evvelki css kodlarimizda bildiginiz gibi #icerik{} kismini bos birakmistik simdi o bolumu soyle degistirelim;
Kod:
#icerik{
padding-left:8px;/* soldan 8px ayir*/
} simdi artik yavas yavas temamizin sonlarina yani footer bolumlerine dogru geliyoruz arkadaslar simdi yapmamiz gereken is PSD sablonumuzun altinda icerik bolumunde'ki notebook grafigimizi bir sekilde temamiza entegre etmektir bunun icin PSD sablonumuzu acalim ve strg+shift+e tuslari ile kesime hazir hale getirelim ve rectangle selection tool yardimi ile keselim en:740px boy:154px burada dikkat etmemiz gereken husus kestigimiz grafiklerin birbirlerine tam olarak uymalaridir yoksa bozuk bir goruntu elde ederiz ,isinizi kolaylastirmak icin sablonu iyice zoom yapabilirsiniz(alt+scroll)
asagida kesim yerini gostereyim;
yapamayan arkadaslar icin asagida tekrar imajimizi vereyim ;
simdi kestigimiz bu grafigi temamizin icine entegre edelim index.php'yi acalim ve main container bitis kismindan sonra yeni bir div tagi ekleyelim adi grafik_ust olsun simdi asagidaki gibi index.php'yi degistirelim;
Kod:
yapamayan arkadaslar icin imaji ben burada vereyim;
| This image has been resized. Click this bar to view the full image. The original image is sized 740x80. |
ve bu grafigimizi'de temamizin icine yerlestirelim hemen 'grafik_ust' div taginin altina yeni div acalim adi 'grafik_orta' olsun asagidaki gibi;
Kod:
daha sonra bu her iki div tagimizin yani grafik_ust ve grafik_orta divlerinin css komutlarini verelim asagidaki gibi;
Kod:
#grafik_ust{
background-image:url(../images/grafik_ust.jpg);
background-repeat:no-repeat;
width:740px;
height:154px;
}
#grafik_orta{
background-image:url(../images/grafik_orta.jpg);
background-repeat:no-repeat;
width:740px;
height:80px;
} yapamayan arkadaslar icin ben asagida imaji ekliyorum;
| This image has been resized. Click this bar to view the full image. The original image is sized 740x43. |
ve index.php de yine hemen grafik_orta div taginin altina bu yeni imajimiz icin bir div tagi acalim adi grafik_alt olsun ve index.php'yi su sekilde yazalim;
Kod:
Kod:
#grafik_alt{
background-image:url(../images/grafik_alt.jpg);
background-repeat:no-repeat;
width:740px;
height:43px;
} Bugun sizler ile birlikte temanmizin alt kismina yatay menumuzu PSD sablonumuzdaki sekilde entegre etmeye calisacagiz...
simdi yapmamiz gereken islem index.php'mizi acmak ve yatay menumuzu icine yerlestirebilecegimiz bir sekilde div kutusu olusturmaktir bunun icin ilk once yatay menumuzu nerede istedigimizin kararini vermemiz gerekir ben dunku calismadan hatirlayacaginiz gibi temamizin altina 3 adet grafik yerlestirmistim (grafik_ust,grafik_alt,grafik_orta) bu grafiklerden grafik_orta uygun diye dusunuyorum ayrica grafik_orta div tagi yatay menumuzede ister istemez container olacak yani isimizi kolaylastiracak ...
o zaman baslayalim yatay menumuz'un ismi
olsun ve asagidaki sekilde index.php'ye bu div'imizi yazalim;
bu islemi yaptiktan sonra simdi sirada yatay menu icin gerekli olan php kodumuz var neydi bu kodumuz? yine asagida gostereyim;
php kodumuzu'da daha evvelki konularimizdaki gibi yeni yaptigimiz div tagimizin icine ekliyoruz asagidaki gibi;
simdi butun bunlari yaptiktan sonra temamiz'da yatay bolum ortaya cikti fakat yatay degil listelenmis bir sekilde simdi bu durumu css kodlari yardimi ile duzeltelim duzeltmeye gecmeden evvel PSD sablonumuzda alt kisimdaki yatay menuden genislik:5px; yukseklik:5px; olmak uzere 'li' yani listeleme imajini kesmenizi istiyorum ben size asagida kesilmis olarak vereyim yapamayan arkadaslar olabilir;
bu imajimizida temamizin images klasorune attiktan sonra simdi css kodlarimiza gecebiliriz yapmamiz gereken yatay menumuzun liste seklini degistirip yatay bir konuma getirmektir bu islem icin gerekli olan css kodu 'li' dir yani #yatay_menu li{} asagidaki gibi bir kodlama yapalim;
butun bunlari yaptiktan sonra hemen hemen istedigimiz gorunumu elde ettik sayilir simdi istedigimiz islem biliyorsunuzki yatay menu'ye daha fazla link eklenebilir ve her link eklediginde dogal olarak saga dogru kayma olacak ama sag tarafda bizim notebook imajimiz var ve yatay menumuz ile cakisacak bunu ortadan kaldirmak gerekli bunun icin yatay menumuzun genisligini sinirlandirmamiz gerekli asagidaki gibi ;
simdi dikkat ederseniz yatay menumuz hafif bir sekilde asagidaki copyright yazisina gore saga dogru kayik isterseniz bunu ortadan kaldiralim bunun icin gerekli css kodumuz 'ul'dir yani #yatay_menu ul{} ul kodu yatay menulerin kutulama sekillerini belirler asagidaki gibi;
evet arkadaslar sonlara dogru gelirken yatay menumuzu'de basari ile yerine yerlestirdik bir sonraki ders'e kadar saglicakla kalin...(aksama zamanim olursa yine devam)
Arkadaslar buraya kadar sag salim geldik ve sizlerin pozitif yondeki elestirileri beni cok mutlu ediyor insallah anlatimimizin geriye kalan kisimlari boyle gecer ...
Bugun sizler ile birlikte Adobe photoshop yardimi ile temamizin arka plani'ni cizip temeya entegre etmeye calisacagiz...
Onemli not: bendeki Adobe photoshop programi Almanca bu yuzden anlatimlarimda bazi kelimeleri yanlis tellafuz edebilirim herkezden ozur diliyorum...
Öyleyse baslayalim ...
Hep beraber Adobe photoshop programimizi acalim ve yeni bir dosya olusturalim en:840px; boy:500px; arkaplan:transparent olmak uzere neden eni 840px; yaptik onu aciklayalim temamizin eni bildiginiz gibi 740px; biz 100px daha uzerine koyduk cunku yapmak istedigimiz grafik'deki efektler yaklasik sagdan ve soldan 20px ila 25px calacakclar geriye kalan bolumu ise biz arkaplan rengi ile birlestirecegiz simdi biraz karmasik gelebilir hersey bittikten sonra daha iyi anlayabiliriz;
evet 840px eninde 500px boyunda arkaplani transparent olan dosyamizi actik asagidaki gibi;
paletimizden beyaz rengi secelim (#ffffff) ve arka planimizi boyama aracimizi kullanarak beyaz'a cevirelim, simdi rectangle selection tool'u secelim ve sabit buyuklugu en:740px boy:500px olarak ayarlayalim bu arada cetvelimiz'de acik olmali'ki pixel'lari gorelim yeni bir layout olusturalim ismi taban1 olsun ve rectangle selection tool ile cetvelimiz'in sol tarafinda 50px bir bosluk birakarak bu alani beyaz'a boyayalim; ve alan uzerine asagidaki degisiklikleri yapalim;
simdi yine rectangle selection tool'u secelim ve bu sefer sabit buyuklugu en:746px; boy:500px olarak ayarlayalim yeni bir layout olusturalim ismi taban2 olsun bu ayar ile sagdan ve soldan 3px daha buyuk bir layout olusturacagiz bunu yapmak icin tabiki grafigi buyultmek(zoom) gerekir asagidan sol tarafdan 1000% kadar buyultelim asagida sizlere gostermeye calisayim;
ve simdi taban2'yede taban1'e uyguladigimiz efektin aynisini uygulayalim yukaridaki resimde gostermistim ve taban2'nin uzerindeyken strg+# yardimi ile bu layout'umuzu bir adim arkaya atalim simdi elimizde asagidaki gibi bir goruntu olmasi gerekli;
bu islemden sonra taban2'yi secelim ve asagidaki efektleri uygulayalim;
Bu efektide basarili ile uyguladiktan sonra simdi elimizde asagidaki bir grafik olustu;
simdi elimizdeki bu grafigi kesime hazir hale getirelim strg+shift+e tuslari ile ve rectangle selection tool yardimi ile en 840px; boy:5px; olmak uzere strg+x ile keselim strg+n ile yeni bir pencere acalim adi body-bg olsun enter ile gecelim strg+v ile acilan yeni pencereye yapistiralim web icin kaydet diyelim jpg formati ile temamizin images klasorune kaydedelim...
yapamayan arkadaslar icin asagida grafigimizi ben tekrar ekliyorum ;
PSD sablonu incelemek isteyen arkadaslar asagidaki linkten indirip inceleyebilirler;
http://volkann.vo.funpic.de/ders/body-bg.rar
evet imajimiz'i olusturduk simdi sirada bu imaji temamizin arkaplani olarak kullanacagiz...
yaptigimiz grafigimizi temamizin images klasorune kaydettik yani isin zor kismi geride kaldi ve kolay kismi geldi temamizin css dosyasini HTML editor yardimi ile acalim ve body{} kismini su sekilde degistirelim;
hepsi bu kadar simdi temamiz guzel bir gorunume kavustu siz ne dersiniz?
Bugun joomla'ya ait bazi css kodlarimiz var onlari yazacagiz ve bir kucuk grafigimiz var readmore bolumune ekleyecek oldugumuz, son olarak test edip ekran goruntulerini'de buraya aktarmayi dusunuyordum fakat gerek yok galiba, merak eden arkadaslar zaten temayi indirip bakabilirler diye dusundum. Ayrica ben forumda gormemistim XML dosyasi yapimi ile ilgili bir bolumumuz zaten varmis onuda ben tekrar'dan anlatmayacagim ...
simdi hepberaber css dosyamizi acalim joomlanin componentlerinin acilisina ait olan kodumuzu yazalim kodumuz .componentheading{} ve asagidaki gibi bir css sekillendirmesi yapalim;
simdi icerik'lerin acilis'lari icin gerekli kodumuz bize gerekli oda soyleydi .contentheading{} ve yine asagidaki gibi bir sekillendirme yapalim;
simdi genellikle frontpage'de cikan yine 3 adet kodumuz var .small:icerigi hangi editor'un ekledigine dair cikan kucuk bilgi, .createdate:icerigin hangi tarihde eklendigine dair cikan kucuk bilgi, .modifydate:icerigin hangi tarihde degistirildigine dair cikan kucuk bilgi bu kodlarimizi'da asagidaki gibi yazalim;
tum doldurulabilir kutulari ayarlayalim kodumuz: .inputbox{} asagidaki gibi bir sekillendirme yapalim;
ve simdi son olarak (son degil aslinda fakat siz diger gerekli kodlari cesitli kaynaklardan bulabilirsiniz) .readon kodumuz var sirada PSD sablonunda dikkatinizi cekmistir learnmore olarak geciyor ve yaninda kucuk bir grafik var biz simdi onu joomlaya uyarlayalim PSD sablonunuzu acip o grafigin oldugu bolumu en:9px; yukseklik:7px; olmak uzere kesin ve kestiginiz grafigi gif formatinda temanizin images klasorune kaydedin yapamayan arkadaslar icin ben asagida ekledim ;
grafik
ve daha sonra css dosyamizi acip su kodlari yazalim ;
evet arkadaslar bize bu temamiz icin gerekli css kodlari bunlardi son olarak footer yada copyright 'da diyebiliriz ekleyelim ve bitirelim...
index.php'yi acalim ve su satirlari garfik_alt bitisinden sonra ekleyelim;
simdi bu kodlari css dosyamizda sekillendirelim asagidaki gibi;
Anlatimimiz burada bitiyor...
evet sevgili arkadaslar dersimiz burada son buluyor Turkiye'de joomla kaynaklari arasinda kisa zamanda insallah yerini alacak bu kaynagin olusmasinda herseyden evvel siz joomladersleri.com forum uyeleremize, site sahibi sevgili mehmet YAZICI'ya buradan icten selamlarimi ve tesekkurlerimi iletiyorum .
Herzaman bu konuya deginiyorum Türk insanin digerlerinden hicbir eksigi yoktur fazlasi vardir sadece 'armut pis agzima dus' ideolojisini kafamizdan sildigimiz takdirde bizde onlarin yaptiginin cok daha fazlasini yapabiliriz buna ben yurekten inaniyorum insallah bu kaynak iyi isler icin kullanilir insanimiza bir klavuz olur ...
Hepinize tekrar tesekkuru bir borc bilir islerinizde basarilar dilerim .
not: yakin zamanda sanirim yarin olabilir temamizin bitmis seklini, PSD sablonumuzu, Arkaplan PSD sablonunu ve anlatimda kullanilan tum resimleri buraya ekleyecegim... sorularinizi,görüslerinizi yine temalar bolumundeki baslik altina yazabilirsiniz.
arkadaslar joomla tema yapimina dair dokumanlar asagidaki gibidir;
PSD dosyalari;
a) temanin PSD sablonu http://volkann.vo.funpic.de/ders/joo...ema_sablon.rar
b) temanin arkaplan PSD sablonu
http://volkann.vo.funpic.de/ders/body-bg.rar
Tema anlatiminda kullanilan tum resimler;
1.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik_1.rar
2.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik2.rar
Bitmis olan tema JD-lesson
JD-Lesson http://volkann.vo.funpic.de/ders/jd-lesson.zip
cmsturk.net volkann
Kod:
Kod:
Kod:
bu imajimizida temamizin images klasorune attiktan sonra simdi css kodlarimiza gecebiliriz yapmamiz gereken yatay menumuzun liste seklini degistirip yatay bir konuma getirmektir bu islem icin gerekli olan css kodu 'li' dir yani #yatay_menu li{} asagidaki gibi bir kodlama yapalim;
Kod:
#yatay_menu li{
background-image:url(../images/li.png);/* psd sablonumuzdan kestigimiz kucuk imajimiz*/
background-repeat:no-repeat;/* tekrar edilsin istemiyoruz*/
background-position:left;/* ve imajimizin daima solda cikmasini istiyoruz*/
display:inline;/* listeleme seklini'de yatay olarak ayarliyoruz*/
padding:0px 20px 0px 20px; /* imajimizi sagdan ve soldan 20px ayiriyoruz*/
} Kod:
#yatay_menu{
float:left;/*sola yanasik*/
text-align:left;/* ie6'da sola yanasik*/
width:400px;/* genislik*/
height:20px;/* yukseklik*/
padding-top:40px;/* yukaridan 40px asagiya insin*/
} Kod:
#yatay_menu ul{
margin: 0px;/* sagdan soldan yukaridan asagidan kayma istemiyoruz*/
padding:0px 0px 0px 25px;/* soldan 25px uzaklas*/
} Arkadaslar buraya kadar sag salim geldik
ve sizlerin pozitif yondeki elestirileri beni cok mutlu ediyor insallah anlatimimizin geriye kalan kisimlari boyle gecer ...Bugun sizler ile birlikte Adobe photoshop yardimi ile temamizin arka plani'ni cizip temeya entegre etmeye calisacagiz...
Onemli not: bendeki Adobe photoshop programi Almanca bu yuzden anlatimlarimda bazi kelimeleri yanlis tellafuz edebilirim herkezden ozur diliyorum...
Öyleyse baslayalim ...
Hep beraber Adobe photoshop programimizi acalim ve yeni bir dosya olusturalim en:840px; boy:500px; arkaplan:transparent olmak uzere neden eni 840px; yaptik onu aciklayalim temamizin eni bildiginiz gibi 740px; biz 100px daha uzerine koyduk cunku yapmak istedigimiz grafik'deki efektler yaklasik sagdan ve soldan 20px ila 25px calacakclar geriye kalan bolumu ise biz arkaplan rengi ile birlestirecegiz simdi biraz karmasik gelebilir hersey bittikten sonra daha iyi anlayabiliriz;
evet 840px eninde 500px boyunda arkaplani transparent olan dosyamizi actik asagidaki gibi;
paletimizden beyaz rengi secelim (#ffffff) ve arka planimizi boyama aracimizi kullanarak beyaz'a cevirelim, simdi rectangle selection tool'u secelim ve sabit buyuklugu en:740px boy:500px olarak ayarlayalim bu arada cetvelimiz'de acik olmali'ki pixel'lari gorelim yeni bir layout olusturalim ismi taban1 olsun ve rectangle selection tool ile cetvelimiz'in sol tarafinda 50px bir bosluk birakarak bu alani beyaz'a boyayalim; ve alan uzerine asagidaki degisiklikleri yapalim;
simdi yine rectangle selection tool'u secelim ve bu sefer sabit buyuklugu en:746px; boy:500px olarak ayarlayalim yeni bir layout olusturalim ismi taban2 olsun bu ayar ile sagdan ve soldan 3px daha buyuk bir layout olusturacagiz bunu yapmak icin tabiki grafigi buyultmek(zoom) gerekir asagidan sol tarafdan 1000% kadar buyultelim asagida sizlere gostermeye calisayim;
ve simdi taban2'yede taban1'e uyguladigimiz efektin aynisini uygulayalim yukaridaki resimde gostermistim ve taban2'nin uzerindeyken strg+# yardimi ile bu layout'umuzu bir adim arkaya atalim simdi elimizde asagidaki gibi bir goruntu olmasi gerekli;
bu islemden sonra taban2'yi secelim ve asagidaki efektleri uygulayalim;
| This image has been resized. Click this bar to view the full image. The original image is sized 689x449. |
Bu efektide basarili ile uyguladiktan sonra simdi elimizde asagidaki bir grafik olustu;
simdi elimizdeki bu grafigi kesime hazir hale getirelim strg+shift+e tuslari ile ve rectangle selection tool yardimi ile en 840px; boy:5px; olmak uzere strg+x ile keselim strg+n ile yeni bir pencere acalim adi body-bg olsun enter ile gecelim strg+v ile acilan yeni pencereye yapistiralim web icin kaydet diyelim jpg formati ile temamizin images klasorune kaydedelim...
yapamayan arkadaslar icin asagida grafigimizi ben tekrar ekliyorum ;
| This image has been resized. Click this bar to view the full image. The original image is sized 840x5. |
PSD sablonu incelemek isteyen arkadaslar asagidaki linkten indirip inceleyebilirler;
http://volkann.vo.funpic.de/ders/body-bg.rar
evet imajimiz'i olusturduk simdi sirada bu imaji temamizin arkaplani olarak kullanacagiz...
yaptigimiz grafigimizi temamizin images klasorune kaydettik yani isin zor kismi geride kaldi ve kolay kismi geldi temamizin css dosyasini HTML editor yardimi ile acalim ve body{} kismini su sekilde degistirelim;
Kod:
body {
background-image:url(../images/body-bg.jpg);
background-position:center;/* arka plan grafigini ortada goster */
background-repeat:repeat-y;/*arka plan grafigini y ekseninde tekrarla */
background-color:#ffffff;/* arka plan rengi beyaz olsun */
font-family:Arial, Helvetica, sans-serif; /* tekst ailesi arial,helvetica */
color:#000000;/* yazi rengimiz siyah */
margin:0px;/* sagdan soldan ustten alttan bir kayma yapilmayacak */
height:100%;
font-size:0.7em;/* yazi buyuklugu */
} Arkadaslar bugunku anlatimimla birlikte yaklasik 3 gunu geride biraktik zor oldu ama cok sey ogrendik ogrendik diyorum cunku bende sizler gibi ogreniyorum hatta bir seyi anlattigim zaman kendim daha'da iyi anliyorum neyse fazla uzatmadan buraya kadar yaptiklarimizdan sonra temamiz ana hatlari ile meydana cikti ve guzel bir gorunume kavustu ve simdi sizlere bendeki son goruntuleri vereyim ;
HTML editor
Index.php;
2 parca olarak eklemek zorundayim
1.parca
2.parca
HTML editor
template_css.css
4 parca olarak ekliyorum
1.parca
2.parca
3.parca
4.parca
Tarayici Mozilla Firefox
Tarayici IE6
Tarayici IE7
_____________HTML editor
Index.php;
2 parca olarak eklemek zorundayim
1.parca
2.parca
HTML editor
template_css.css
4 parca olarak ekliyorum
1.parca
2.parca
3.parca
4.parca
Tarayici Mozilla Firefox
Tarayici IE6
Tarayici IE7
Bugun joomla'ya ait bazi css kodlarimiz var onlari yazacagiz ve bir kucuk grafigimiz var readmore bolumune ekleyecek oldugumuz, son olarak test edip ekran goruntulerini'de buraya aktarmayi dusunuyordum fakat gerek yok galiba, merak eden arkadaslar zaten temayi indirip bakabilirler diye dusundum. Ayrica ben forumda gormemistim XML dosyasi yapimi ile ilgili bir bolumumuz zaten varmis onuda ben tekrar'dan anlatmayacagim ...
simdi hepberaber css dosyamizi acalim joomlanin componentlerinin acilisina ait olan kodumuzu yazalim kodumuz .componentheading{} ve asagidaki gibi bir css sekillendirmesi yapalim;
Kod:
.componentheading {/* componentlerin acilis basliklari haberler,arama vs.*/
font-size:120%;/* yazi normal yazidan 120% daha buyuk olsun*/
color:#800000;
padding-bottom:10px;/* alttan 10px yukari kaysin*/
font-weight:bold;/* yazi tipi kalin olsun*/
} Kod:
.contentheading {
font-size:120%;/* yazi normal yazidan 120% daha buyuk olsun*/
font-weight:bold;/* yazi tipi kalin olsun*/
color:#800000;
} Kod:
.small {/*icerigi hangi editor'un ekledigine dair cikan kucuk bilgi*/
color:#666666;/* yazi rengi*/
}
.createdate {/*icerigin hangi tarihde eklendigine dair cikan kucuk bilgi*/
color:#999999;/* yazi rengi*/
}
.modifydate{/*icerigin hangi tarihde degistirildigine dair cikan kucuk bilgi*/
color:#666666;/* yazi rengi*/
} Kod:
.inputbox {/*tum doldurulabilir kutular search,contact vs.*/
background-color:#FFFFFF;/*arkaplan rengi*/
border:1px solid #CCCCCC;/*kenarlik olsun 1px genislik kesintisiz cizgi ve beyaz renk*/
color:#800000;/* yazi rengi*/
} grafik
ve daha sonra css dosyamizi acip su kodlari yazalim ;
Kod:
.readon {
background-image:url(../images/readon-bg.gif);/*arkaplan grafik*/
background-repeat:no-repeat;/*arkaplani tekrar etme*/
background-position:left;/*arkaplan grafik solda ciksin*/
float:right;/*readmore bolumu sagda ciksin*/
padding-left:15px;/*soldan 15px kaydir boylece grafik ile yazi arasi acilsin*/
font-weight:bold;/* yazi tipi kalin olsun*/
} index.php'yi acalim ve su satirlari garfik_alt bitisinden sonra ekleyelim;
Kod:
Kod:
#footer{
text-align:right;
float:right;
background-color:#F5E432;
height:20px;
width:100%;
}
#footer_icerik{
padding-right:5px;
} Anlatimimiz burada bitiyor...
evet sevgili arkadaslar dersimiz burada son buluyor Turkiye'de joomla kaynaklari arasinda kisa zamanda insallah yerini alacak bu kaynagin olusmasinda herseyden evvel siz joomladersleri.com forum uyeleremize, site sahibi sevgili mehmet YAZICI'ya buradan icten selamlarimi ve tesekkurlerimi iletiyorum .
Herzaman bu konuya deginiyorum Türk insanin digerlerinden hicbir eksigi yoktur fazlasi vardir sadece 'armut pis agzima dus' ideolojisini kafamizdan sildigimiz takdirde bizde onlarin yaptiginin cok daha fazlasini yapabiliriz buna ben yurekten inaniyorum insallah bu kaynak iyi isler icin kullanilir insanimiza bir klavuz olur ...
Hepinize tekrar tesekkuru bir borc bilir islerinizde basarilar dilerim .
not: yakin zamanda sanirim yarin olabilir temamizin bitmis seklini, PSD sablonumuzu, Arkaplan PSD sablonunu ve anlatimda kullanilan tum resimleri buraya ekleyecegim... sorularinizi,görüslerinizi yine temalar bolumundeki baslik altina yazabilirsiniz.
arkadaslar joomla tema yapimina dair dokumanlar asagidaki gibidir;
PSD dosyalari;
a) temanin PSD sablonu http://volkann.vo.funpic.de/ders/joo...ema_sablon.rar
b) temanin arkaplan PSD sablonu
http://volkann.vo.funpic.de/ders/body-bg.rar
Tema anlatiminda kullanilan tum resimler;
1.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik_1.rar
2.bolum http://volkann.vo.funpic.de/ders/anlatim_grafik2.rar
Bitmis olan tema JD-lesson
JD-Lesson http://volkann.vo.funpic.de/ders/jd-lesson.zip
cmsturk.net volkann
Kaydol:
Kayıtlar (Atom)
Hakkımda
Online Ziyaretçiler
Ziyaretçilerimizin hangi sayfalarda gezdiğini görmek için tıklayınız.