DERS 1 : Stylesheet.css'in Önemi ve CSS ile OpenCart Tasarımı

[MasterBora]

Merhaba Arkadaşlar...

Daha Önce Kendi Temanızı Yapabilmenizi Sağlayacak Derslere Yer Vereceğimi Buradaki Konu ile Duyurmuştum. Uzun Bir Aradadan Sonra Derslere Başlamaya Karar Verdim..

Başlamadan Önce Bir Kaç Konu Hakkında Sizleri Bilgilendirmek İstiyorum. Öncelikle İyi Bir OpenCart Teması Hazırlayabilmeniz İçin Öncelikle CSS'e Hakim Olmanız Gerekiyor. Bunu Ne Kasdar iyi Öğrenirseniz O Kadar Başarılı Sonuçlar Elde Edebilirsiniz...

Ders Boyunca Yapacağınız Çalışmaları Silmeyiniz. Ortaya Çıkaracağınız Çalışmaları Ders Sonunda Burada Yayınlayın...

Şimdi Sözü Fazla Uzatmadan Dersimize Geçelim..
------------------------------------------------------------------------------------------------
Dersimizi 1.4.9.1 Sürüme Göre default Tema Baz Alınarak Anlatacağım..

Başlangıç Olarak Nelere İhtiyacımız Var Bi Göz Atalım :

• Dreamwaver yada Notepad++ (CSS Dosyamızı Editleyebilmemiz içi Gerekli Olan Yazılım)

Başlangıç : Stylesheet.css Başlangıç

catalog/view/theme/default/sylesheet/stylesheet.css Yolunu İzleyerek CSS Dosyamızı DW yada Notepad++ ile Açalım.. El Değmemiş Bir CSS Dosyasında Toplamda 575 Satır Bulunmaktadır.. Ben İlk Satırdan Başlayarak Neyin Ne İşe Yaradığını Anlatmaya Çalışacağım.

Konu 1 : Arkaplan Rengini Değiştirme ve Arkaplana Resim Atama..

Bu Değişklikleri Yapmak İçin CSS Dosyamızın ilk 5 Satırını Kullanacağız..

html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
}

Yukarıdaki Kod CSS Dosyamızın Orjinal Satırlarıdır. Öncelikle Arka Planın Rengini gRİ Yapalım . Bunun için 4. Satırın Hemen Altına : backgraund-color: #a0a0a0; Ekleyin ve Kaydedin. Satırı Ekledikten Sonraki Hal Aşşağıdaki Gibi Olacak..

html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
        background-color: #a0a0a0;
}

Evet Arkaplan Rengi Değiştirmeyi Öğrendik .. Diyelim Arkaplan Rengi Yerini Bir Resim Koymak İstiyorsunuz.. Hadi Yapalım, Öncelikle Bir Arkaplan Resmine İhtiyacmız Var. Sıradan Bir Arkaplan Kullanmak İstemiyorum Bu Sebeble Arkaplan Resmini Kendim Hazırladım..

catalog/view/theme/default/image Klasörünün İçine Ekte Vermiş Olduğum arkaplan.jpg Resmini Yapıştıralım. Daha Sonra CSS Dosyamıza Geri Dönerek Az Önce Verdiğimiz Renk Komutunun Hemen Altına Şu Komutu Verelim. background: url('../image/arkaplan.jpg') #a0a0a0 no-repeat fixed center;

Buradaki background Komutu Hedef Yeri Gösterir. url Hedef Resmimizin Yolunu Gösterir. #a0a0a0 ise Arka Plan Rengini Verir. no-repeat Komutu Resmin Tekrarlanmamasını Sağlar. fixed Komutu ise Sayfa Kaydırılsa Bile Resmin Sabit Kalmasını Sağlar. center komutu ise Resmin Ortalanmasını Sağlar.

Evet Arkadaşlar En Son Yaptığımız Değişikliklerden Sonra CSS Dosyamızın ilk Satırı Aşağıdaki Gibi Olacaktır.

html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
	background: url('../image/arkaplan.jpg') #a0a0a0 no-repeat fixed center;
}

Sitemizin En Son Görüntüsü ise Aşağıdaki Gibi Olacaktır:

Evet Arkadaşlar Bu Dersimizde Arkaplan Rengini Değiştirmeyi ve Arkaplan Resmi Yerleştirmeyi Öğrendik.. Rahat Çalışabilmeniz için kte Arkaplan Resmini Veriyorum..

Bir Dahaki Derse Kadar Görşmek Üzere..

Not: Arkaplan Resmi Rapidshare'den Anlamsız Bir Şekilde Silinmiş Yedeği Bulup Tekrar Koyacağım.. Daha Önce Indiren Arkadaşım Varsa Bana PM'den Ulaşırsa Sevinirim


Şu Anki Görüntü Sizi Aldatmaz Umarım.. Çünkü Ders Sona Erdiğinde Nasıl Bir Tasarım Ortaya Çıkacağı............. Neyse Söylemeyeyim Hep Beraber Görelim

Ders Vermek Haddime Değil Sadece Bildiklerimi Paylaşıyorum

 

[MAXHBMAX]

ARKADAŞIM EMEĞİNE VE ELLLERİNE SAĞLIK DOSTUM BU YARARLI PAYLAŞIM İÇİN BU ŞEKİLDEKİ AÇILIMLI PAYLAŞIMLARININ DEVAMINI BEKLİYORUZ SABIRSIZLIKLA ÇOOOK TEŞEKKÜR EDERİM

DEVAMI GELECEKMİ GELECEK İSE NEZAMAN GELECEK BİZE BİR BİLGİ VERİRMİSİNİZ LÜTFEN:huh:

 

[MasterBora]

Allah Cümlemizden Razı Olsun..

Konu Yeterince İlgi Görmediği için Devamını Şimdilik Yazmıyorum. Bir iki Kişi Dışında Böyle Bir Anlatıma Ihtiyaç Yok Sanırım..

 

[sabitertan]

Allah Cümlemizden Razı Olsun..

Konu Yeterince İlgi Görmediği için Devamını Şimdilik Yazmıyorum. Bir iki Kişi Dışında Böyle Bir Anlatıma Ihtiyaç Yok Sanırım..

Üstad bu anlatıma herkesin ihtiyacı var sadece henüz farkında olmayanlar vardır. Çok güzel bir konu başlatmışsın devamını bekliyoruz emeğine sağlık

 

[ozgurcelen]

üstadım devamını bekliyoruz lütfen..

 

[amca]

Download mevcut değil
Aşağıdaki indirme mevcut değildir:

http://rapidshare.com/files/426700349/arkaplan.rar

 

[MasterBora]

Download mevcut değil
Aşağıdaki indirme mevcut değildir:

http://rapidshare.com/files/426700349/arkaplan.rar

Teşekkür Ederim Uyarınız için. Dün Bende Farkettim. Arkaplanın Yedeğini Arıyorum Bulduğum An Linki Yenileyeceğim..

 

[bilgikur]

Tşkler devamını beklıyoruz kardes.

 

[SiuBa]

Böyle anlatımlara her zaman ihtiyaç vardır.Forum kullanıcılarını bilirsiniz çoğu isteiği şeyi alır ve hiç bir yorumda bulunmaz kendi sitelerimden dolayı çok iyi biliyorum.Çalışmalarınızın devamı bu konularda becerikli arkadşaları ateşler ve onlarda konu anlatım paylaşımlarına başlaya bilir.

 

[ozansenkal]

Sevgili üstadım MasterBora;
Harika eserlerle gönülleri fethetmeye devam ediyorsun. Gerçekten ortada takdire şayan bir emek var, devamını dört gözle bekliyorum mirim.

 

[katrankor]

Hocam Eline sağlık ,Çok iyi anlatmışsın,Devamını bekliyorum sabırsızlıkla.

 

[MasterBora]

İşlerimin Yoğunluğundan Dolayı Şu Sıralar Ilgilenemiyorum.. Ama Mutlaka Devamı Gelecek.. Sabrınız ve Anlayışınız için Teşekkür Ederim..

 

[byturel]

gerçekten süpersin çalışmaya devam işlerini aksatmama kaydıyla güzel bir çalışma teşekkürler

 

[muratdemir]

ya aslıda ne zamandır böyle bir konu arıyordum ki??ya tam söylediklerinizi yapmaya basladım
büyük bir hevesle ama??? hepsi yarım kaldı.bu işe gönül vermiş biri nasıl biri nasıl böyle bir konuyla ilgilenmezki
kendi adıma söylüyorum.cok güzel anlatım devamını bekliyorum
tesekkurler

 

[MasterBora]

Arkadaşlar Uzun Zamdır İşlerimin Yoğrunluğundan Forum ile İlgilenememiştim..

Daha 2 Gün Oldu Online Olalı... Merak Etmeyin Çalışmalara Başladım Bile. Ama Tüm Mesaimi Buna Harcıyorum Diye Bir Şeyde Söyleyemem.. 1 Hafta İçinde Dersin 2. Kısmını Burada Paylaşacağım..

 

[ucuzcdkey]

Eline sağlık üstad

 

[Zamir]

eline sağlık, yeni başlayanlar için güzel bir başlangıç olmuş.

 

[pandor]

eline sağlık çok işime yaradı

 

[satisci]

teşekkürler devamını bekliyoruz