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

MasterBora

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
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..
PHP:
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..

PHP:
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.

PHP:
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:
2dvmxba.png



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

OpenCart-TR
Katılım
14 Eki 2010
Mesajlar
21
Tepkime puanı
0
Puanları
0
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

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
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

OpenCart-TR
Katılım
18 Eki 2010
Mesajlar
195
Tepkime puanı
1
Puanları
0
Konum
Adana
MasterBora' Alıntı:
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
 

amca

OpenCart-TR
Katılım
14 Ocak 2010
Mesajlar
26
Tepkime puanı
0
Puanları
0
Yaş
57
Konum
BURSA
Web sitesi
www.efecam.org
Download mevcut değil
Aşağıdaki indirme mevcut değildir:

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

MasterBora

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
amca' Alıntı:
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..
 

SiuBa

OpenCart-TR
Katılım
23 Ara 2010
Mesajlar
19
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
23 Ağu 2010
Mesajlar
139
Tepkime puanı
0
Puanları
0
Yaş
39
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

OpenCart-TR
Katılım
2 Tem 2010
Mesajlar
38
Tepkime puanı
0
Puanları
0
Hocam Eline sağlık ,Çok iyi anlatmışsın,Devamını bekliyorum sabırsızlıkla.
 

MasterBora

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
İş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

OpenCart-TR
Katılım
14 Nis 2010
Mesajlar
37
Tepkime puanı
0
Puanları
0
gerçekten süpersin çalışmaya devam işlerini aksatmama kaydıyla güzel bir çalışma teşekkürler
 

muratdemir

OpenCart-TR
Katılım
12 Nis 2011
Mesajlar
2
Tepkime puanı
0
Puanları
0
Yaş
48
Konum
istanbul
Web sitesi
www.oyuncakevim.com
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

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
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..
 

Zamir

OpenCart-TR
Katılım
18 Eki 2011
Mesajlar
12
Tepkime puanı
0
Puanları
0
eline sağlık, yeni başlayanlar için güzel bir başlangıç olmuş.
 

pandor

OpenCart-TR
Katılım
1 Kas 2011
Mesajlar
6
Tepkime puanı
0
Puanları
0
eline sağlık çok işime yaradı
 
Üst