0 (555)1062345

Opencart CSS Kullanma Klavuzu

/* stylesheet.css Türkçe Kullanma Klavuzu by MasterBora
/* CSS Kodlari ve Özellikleri için – http://forum.opencart-tr.com/thread-1241.html
/* OpenCart© Türkiye Toplulugu – http://www.opencart-tr.com
/* OpenCart© Türkiye Destek Forumu – http://forum.opencart-tr.com */
/* ÖNEMLI : Varolan Pembe Renkli Pozisyonlarda Degisiklilik Yapmayiniz */
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
* {
font-family: Arial, Helvetica, sans-serif; /* Sitenizde Kullaninlan Fontlari Belirler, Font Isimlerini Dilediginiz Sekilde Düzenleyebilirsiniz */
}
body {
margin: 0px; /* Sitenizi Belirli Ölçülerde Asagi Dogru Kaydirir Örn: 20px */
padding: 0px;
text-align: center;
}
body, td, th, input, textarea, select, a { /* Sitenizdeki Fontlarini Boyutunu Belirler. */
font-size: 12px; /* Örn: 14px */
}
form { /* Sitenizin Üye Girisi. Kayit Gibi Formlarin Özelliklerini Belirler */
padding: 0;
margin: 0;
display: inline;
}

input, textarea, select { /* Arama ve Seçenek Kutucuklarinin Durumunu Belirler */
margin: 3px 0px; /* Örn: 3px Degeri Kutucuklarin Alt ve Üst Bostlularini Büyütür/Azaltir, 0px Degeri ise Sag yada Sola Dogru Kaydirir */
}
a, a:visited { /* Genel Link Özelliklerini Belirler */
color: #1B57A3; /* Tüm Linklerin Rengini Belirler */
text-decoration: underline; /* Linkin Altinin yada Üstünün Çizgili Olup Olmayacagini Belirler */
cursor: pointer; /* Bu Komut imlecin Link Üzerindeki Seklini Belirler Örn : move */
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
p {
margin-top: 0px;
}
/* layout */
#container { /* Genel Özellikler Alani */
width: 960px; /* Sitenizin Genisligini Belirler Örn: 1200px, Burada px Degeeri Yerini %100 Kullanir iseniz Siteniz Ekran Çözürlügünü Baz Alarak Yayilacaktir */
margin-left: auto; /* Sitenizi Sola Dogru Kaydirir Örn 50px */
margin-right: auto; /* Sitenizi Saga Dogru Kaydirir Örn 50px */
text-align: left; /* Sitenizdeki Tüm Yazilari Saga, Sola Yaslar yada Ortalar. Örn: right */
}
#header .div2 { /* Header Özellikleri */
float: left; /* Logonuzu Saga, Sola Kaydirir Yada Ortalar Örn : center */
padding-top: 15px; /* Logonuzu Asagi Dogru Kaydirir */
padding-left: 15px; /* Logonuzu Saga, Sola Dogru Kaydirir */
}
#header .div3 {
float: right; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi Linklerini Saga, Sola Dogru Yaslar yada Ortalar */
padding-top: 7px; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi Linkleri ile Logonuz Arasindaki Boslugu Belirler Örn 50px */
height: 38px; /* Logonuz, Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi ile Ana Blok Arasindaki Boslugu Belirler. Logo Sabit Kalir Örn : 70px*/
}
#header .div3 a {
margin-left: 15px; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi Linklerinin Arasindaki Boslugu Belirler Örn: 70px */
padding: 1px 0px 2px 20px; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi iconlarinin Durumunu Belirler Örn: 1px inonlari Yukari Kaydirir, 0px Link ve iconlari Sola Kaydirir, 2px iconlari Asagi Kaydirir, 20px icon ve Linklerin Arasinda Bosluk Birakarak Sola Kaydirir*/
background-repeat: no-repeat; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi Linklerinin iconlarinin Çogaltir Örn : repeat */
background-position: left center; /* Kampanyalar, Siteyi Ekle, Iletisim ve Site Haritasi Linklerinin iconlarinin Nerede Duracagini Belirler Sag, Sol */
}
#header .div4 {
width: 510px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarinin Durumunu Belirler Örn: 510px Degerini 710px Yaptiginizda Butonlarin Orantili Sekilde Sola Dogru Kaydigini Göreceksiniz. */
clear: right;
float: right; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarini Saga, Sola Dogru Kaydirir Yada Ortalar */
height: 32px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlari ile Header Arasindaki Boslugu Belirler */
padding-right: 14px;
}
#header .div4 a {
float: left; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarinin Siralamasi ile Alakali Bir Durum Örn : left Degerini right Yaparsaniz Butonlar Ana Sayfadan Degil Kasaya Git’den Baslayacaktir */
margin-right: 2px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarin Arasinda Saga Dogru Bosluk Açar Örn: 10px */
width: 100px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarin Genisligini Belirler */
height: 18px;
padding-top: 9px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarini Sabit Birakir Linkleri Asagi Dogru Kaydirir */
padding-bottom: 9px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/tab_1.png) no-repeat; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Buton Resimlerinin Yolunu ve Durumunu Belirler */
text-align: center; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Linklerini Saga Sola Yaslar Yada Ortalar */
color: #333333; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Linklerinin Rengini Belirler */
text-decoration: none; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Linklerin Alti Çizgili, Üstü Çizgili v.s Gibi Özellik Ekler */
font-size: 14px; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Linklerinin Font Ebatini Belirler */
font-weight: bold; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Linklerini Kalin, Normal v.s Yapar */
position: relative; /* Katmanin Yerinin Belirlenmesini Saglar Örn : inhert */
z-index: 1; /* Katmanlarin Alttan Üste Dogru Hangi Sira ile Gösterecegini Belirler. Örn : 1 Degeri Katmanin En Altta Olacagini Belirler */
}
#header .div4 a.selected { /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlarin Seçili Durumu */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/tab_2.png) no-repeat; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Buton Resimlerinin Yolunu ve Durumunu Belirler */
color: #FFF; /* Headerdaki Ana Sayfa, Üye Girisi, Hesabim, Sepetim, Kasaya Git Butonlari Seçili iken Linkin Ne Renk Olacagini Belirler */
padding-bottom: 10px;
z-index: 3;
}
#header .div5 {
clear: both;
}
#header .div5 .left { /* Headerdaki Mavi Kismin Özellikleri “SOL” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_1_left.png) no-repeat; /* Mavi Kismin Sol Kösesinin Yolunu ve Tekrarlanma Durumunu Belirler */
width: 5px; /* Mavi Kismin Genisligini Belirler. Eger Daha Genis Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Genisligine Paralel Bu Degeri Ayarlamalisiniz */
height: 40px; /* Mavi Kismin Uzunlugunu Belirler. Eger Daha Uzun Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Uzunluguna Paralel Bu Degeri Ayarlamalisiniz */
float: left; /* Mavi Kismin Nerede Duracagini Belirler */
}
#header .div5 .right { /* “SAG” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_1_right.png) no-repeat; /* Mavi Kismin Sag Kösesinin Yolunu ve Tekrarlanma Durumunu Belirler */
width: 5px; /* Mavi Kismin Genisligini Belirler. Eger Daha Genis Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Genisligine Paralel Bu Degeri Ayarlamalisiniz */
height: 40px; /* Mavi Kismin Uzunlugunu Belirler. Eger Daha Uzun Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Uzunluguna Paralel Bu Degeri Ayarlamalisiniz */
float: right; /* Mavi Kismin Nerede Duracagini Belirler */
}
#header .div5 .center { /* “ORTA” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_1_center.png) repeat-x; /* Mavi Kismin Ortasinin Yolunu ve Tekrarlanma Durumunu Belirler */
height: 40px; /* Mavi Kismin Genisligini Belirler. Eger Daha Genis Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Genisligine Paralel Bu Degeri Ayarlamalisiniz */
margin-left: 5px; /* Mavi Kismi Soladn Içeriye Dogru Kirpar */
margin-right: 5px;/* Mavi Kismi Sagdan Içeriye Dogru Kirpar */
}
#header .div6 {
clear: both;
margin-bottom: 10px; /* Buradaki 10px Degerini Arttirirsaniz Header ile Orta Bloklar Arasina Boslik Verebilirsiniz. Eger Dogru Kullanir iseniz O Bosluga Slayt Ekleyebilir Yada Baska Görevler Verebilirsiniz. Bu Sizim Yaratciliginiza Kalmis */
}
#header .div6 .left { /* Headerdaki Gri Kismin Özellikleri “SOL” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_2_left.png) no-repeat; /* Gri Kismin Sol Kösesinin Yolunu ve Tekrarlanma Durumunu Belirler */
width: 5px; /* Gri Kismin Genisligini Belirler. Eger Daha Genis Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Genisligine Paralel Bu Degeri Ayarlamalisiniz */
height: 32px; /* Gri Kismin Uzunlugunu Belirler. Eger Daha Uzun Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Uzunluguna Paralel Bu Degeri Ayarlamalisiniz */
float: left; /* Gri Kismin Nerede Duracagini Belirler */
}
#header .div6 .right { /* “SAG” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_2_right.png) no-repeat; /* Gri Kismin Sag Kösesinin Yolunu ve Tekrarlanma Durumunu Belirler */
width: 5px; /* Gri Kismin Genisligini Belirler. Eger Daha Genis Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Genisligine Paralel Bu Degeri Ayarlamalisiniz */
height: 32px; /* Gri Kismin Uzunlugunu Belirler. Eger Daha Uzun Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Uzunluguna Paralel Bu Degeri Ayarlamalisiniz */
float: right; /* Gri Kismin Nerede Duracagini Belirler */
}
#header .div6 .center { /* “ORTA” */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/header_2_center.png) repeat-x; /* Gri Kismin Orta Kösesinin Yolunu ve Tekrarlanma Durumunu Belirler */
height: 32px; /* Gri Kismin Yüksekligini Belirler. Eger Daha Yüksek Bir Köse Kullanacaksiniz Uygun Bir Resim Kullanmali ve O Resmin Yüksekligine Paralel Bu Degeri Ayarlamalisiniz */
margin-left: 5px; /* Gri Kismi Soldan Içeriye Dogru Kirpar */
margin-right: 5px; /* Gri Kismi Sagdan Içeriye Dogru Kirpar */
padding-left: 5px; /* Ürünlere v.s Tikladigimizda Geaderdaki Gri Alan içinde Olusan Linkleri Saga Dogru Kaydirir */
padding-right: 5px; /* Ürünlere v.s Tikladigimizda Geaderdaki Gri Alan içinde Olusan Linkleri Sola Dogru Kaydirir */
}
#header .div7 {
float: center;
padding-top: 2px; /* Headerdaki Dil ve Para Birimi Kisminin Yerini Belirler */
}
#header .div8 { /* Headerdaki “Arama:” Metninin Sola, Saga Yasalar yada Ortalar, Üste yada Asagi Dogru Kaydirir */
float: left; margin-top: 6px;
}
#header .div9 { /* Headerdaki Arama Kutularini Sola, Saga Çeker yada Ortalar */
float: left;
}
#header .div10 { /* Headerdaki Ara Butonu ile Gelismis Arama Linkini Sola, Saga Yasalar yada Ortalar, Üste yada Asagi Dogru Kaydirir */
float: left;
margin-top: 2px; }
#search { /* Arama Kismi Özelliklerini Belirler */
padding-top: 7px; /* Arama Kismin Header içindeki Yerlesim Düzenini Belirler */
padding-left: 5px; /* Arama Kismini Saga Dogru Kaydirir */
color: #FFF; /* Arama Kismindaki “Arama:” Metninin Rengini Belirler */
font-weight: bold; /* Arama Kismindaki “Arama:” Metninin Font Özelligini Belirler */
}
#search select { /* Headerdaki Kategori Seçim Kutusu Özelliklerini Belirler */
border: 1px solid #0A5391; /* Buradaki border Çerçeve Özelliklerini Belirler 1px Degeri Çerçeve Kalinligini Belirler, solid Çerçevenin Çizgili, Kesik v.s Durumunu Belirler Örn: dashed Degeri Kesik Çizgi Verir, #0A5391 ise Çerçeve Rengini Belirler */
padding: 1px; /* Bu Deger Çerçevenin Genisligini Belirler */
}
#search a {
color: #FFF; /* Headerdaki Gelismis Arama Linkinin Rengini Belirler */
}
#search input { /* Headerdaki Arama Kutusu Özelliklerini Belirler */
border: 1px solid #0A5391; /* Buradaki border Çerçeve Özelliklerini Belirler 1px Degeri Çerçeve Kalinligini Belirler, solid Çerçevenin Çizgili, Kesik v.s Durumunu Belirler Örn: dashed Degeri Kesik Çizgi Verir, #0A5391 ise Çerçeve Rengini Belirler */
padding: 2px; /* Bu Deger Çerçevenin Genisligini Belirler */
}
#breadcrumb { /* Header Link Özellikleri (Sitede Gezinirken Headerin Gri Alanindaki Yol) */
float: left; /* Link Yolunun Sag, Sol yada Ortada Olmasini Saglar */
padding-top: 7px; /* Link Yolunu eksi Degerde Yukari Arti Degerde Asagi Kaydirir Örn -7px yada 20px */
padding-bottom: 11px;
height: 13px;
margin-bottom: 10px;
color: #000000; /* Link YolununAralarinda Bulunan (>) Rengini Belirler */
}
.switcher { /* Headerdaki Dil ve Para Birimi Özelliklerini Belirler */
float: right; /* Dil ve Para Birimini Saga, Sola Yaslar Yada Ortalar*/
margin-top: 3px; /* Dil ve Para Birimini Asagi Dogru Kaydirir */
margin-left: 10px; /* Dil ve Para Birimi Arasinda Sola Dogru Bosluk Olusturur */
}
.switcher a {
text-decoration: none; /* Dil ve Para Birimindeki Metinlerin Durumunu Belirler Örn : none Yerine underline Degerini Verirseniz Metinler Alti Çizgili Olur */
display: block; /* Katman Özellikleri */
}
.switcher .selected {
background: #FFFFFF url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/switcher.png) repeat-x; /* Dil ve Para Birimi Kutularinin Arkaplan Rengini, Resmini ve Tekrarlanma Durumunu Belirler */
}
.switcher .selected a {
border: 1px solid #CCCCCC; /* Dil ve Para Biriminin 1px Çerçeve Kalinligini, solid Çerçeve Özelliklerini #CCCCCC ise ÇerçeveRengini Belirler */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/arrow_down.png) 116px center no-repeat;
color: #666666; /* Dil ve Para Birimi Fontlarinin Rengini Belirler */
padding: 2px 5px 2px 5px; /* Buradaki 2px Çerçeve Boyunu (Font Altta Kalir), 5px Çerçeve Enini, 2px Çerçeve Boyunu (Font Üstte Kalir), 5px Enini Sola Dogru Genisletir */
width: 121px; /* Çerçeve Enini Belirler */
}
.switcher .selected a:hover {
background: #F0F0F0 url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/arrow_down.png) 116px center no-repeat; /* Dil ve Para Biriminin Üzerine Mouse ile Gelindigindegi Rengi Belirler, Resmi ve Resmin Özelligini Belirler */
}
.switcher .option { position: absolute; /* Dil ve Para Birimi Kutularinin Durumunu Belirler Örn: fixed Derseniz Kutucugu Açtiginizda Altindaki Sepet Kisminin Üzerine Binmez */
z-index: 3;
border-left: 1px solid #CCCCCC; /* Dil ve Para Biriminin Açilir Durumda iken 1px Soldan Çerçeve Kalinligini Belirler, solid yerine dashed Kesik Çerçeve, #CCCCCC ise Çerçeve Rengi */
border-right: 1px solid #CCCCCC; /* Dil ve Para Biriminin Açilir Durumda iken 1px Sagdan Çerçeve Kalinligini Belirler, solid yerine dashed Kesik Çerçeve, #CCCCCC ise Çerçeve Rengi */
border-bottom: 1px solid #CCCCCC; /* Dil ve Para Biriminin Açilir Durumda iken 1px Alttan Çerçeve Kalinligini Belirler, solid yerine dashed Kesik Çerçeve, #CCCCCC ise Çerçeve Rengi */
background-color: #EEEEEE; /* Dil ve Para Birimin Açilir Durumda iken Arka Plan Rengini Belirler (Mouse Seçili Olmadan) */
display: none; /* Katman Özelligini Belirler Örn: none Yerine Marker Degerini Verirseniz Katman Sürekli Açik Olur */
width: 131px; /* Dil ve Para Birinin Açilir Durumdaki Genisligini Belirler */
}
.switcher .option a {
color: #000; /* Dil ve Para Birimi Açilir Durumdayken Fontlarin Rengini Belirler */
padding: 3px 5px 3px 5px; /* Dil ve Para Birimi Kutulari Açilir Durumdayken 3px Çerçeve Boyunu (Font Altta Kalir), 5px Çerçeve Enini, 3px Çerçeve Boyunu (Font Üstte Kalir), 5px Enini Sola Dogru Genisletir */
}
.switcher .option a:hover {
background: #FFC; /* Dil ve Para Birimi Açilir Durumdaken Mouse ile Üzerine Gelindigindeki Rengi Belirler */
}
.switcher img { /* Dil Kismindaki Imajin Durumunu Belirler */
position: relative;
top: 1px;
}
#column_left { /* Sol Blok Özelliklerini Belirler */
float: left;
width: 180px;
margin-right: 10px;
clear: left;
}
#column_right { /* Sag Blok Özelliklerini Belirler */
float: right;
width: 180px;
margin-left: 10px;
clear: right;
}
#content { /* Orta Blok Çerçeve Özelliklerini Belirler */
margin-left: 190px;
margin-right: 190px;
margin-bottom: 10px;
}
#content .top .left {
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_top_left.png) no-repeat; /* Orta Blok Headerin Sol Kösesinin Yolunu ve Durumunu Belirler */
width: 5px; /* Orta Blok Headerin Sol Kösesinin Genisligini Belirler */
height: 32px; /* Orta Blok Headerin Sol Kösesinin Yüksekligini Belirler */
float: left; /* Orta Blok Headerin Sol Kösesinin Nerede Duracagini Belirler */
}
#content .top .right {
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_top_right.png) no-repeat; /* Orta Blok Headerin Sag Kösesinin Yolunu ve Durumunu Belirler */
width: 5px; /* Orta Blok Headerin Sag Kösesinin Genisligini Belirler */
height: 32px; /* Orta Blok Headerin Sag Kösesinin Yüksekligini Belirler */
float: right; /* Orta Blok Headerin Sag Kösesinin Nerede Duracagini Belirler */
}
#content .top .center {
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_top_center.png) repeat-x; /* Orta Blok Headerin Orta Imajin Nerede Duracagini Belirler */
margin-left: 5px; /* Orta Blok Headerin Orta Imajini Soldan Saga Kirpar */
margin-right: 5px; /* Orta Blok Headerin Orta Imajini Sagdan Sola Kirpar */
}
#content .top h1, .heading { /* Orta Blok Header Özelliklerini Belirler */
padding: 8px 0px 8px 7px;
}
#content h1, .heading { /* Orta Blok Baslik Özelliklerini Belirler */
color: #000000; /* Orta Blok Basliginin Font Rengini Belirler */
font-size: 14px; /* Orta Blok Basliginin Font Boyutunu Belirler */
font-family: Arial, Helvetica, sans-serif; /* Orta Blok Basliginin Font Tipini Belirler Belirler */
font-weight: bold; /* Orta Blok Basliginin Font Kalinligini Belirler */
text-transform: uppercase; /* Orta Blok Basliginin Font Biçimini Belirler. Örn : uppercase Yerine none Derseniz Ilk Hafr Büyük Gerisi Küçük Olur*/
margin: 0px; /* Tablo ile Pencere Arasindaki Boslugu Belirler */
}
#content .middle { /* Orta Blok Çerçeve Özelliklerini Belirler */
border-left: 1px solid #DDDDDD; /* Orta Blok Çerçevenin Sol Kismim Özelligir. 1px Çerçeve Kalinligi, solid Çerve Biçimini #DDDDDD ise Çerçeve Rengini Belirler */
border-right: 1px solid #DDDDDD; /* Orta Blok Çerçevenin Sag Kisim Özelligidir. 1px Çerçeve Kalinligi, solid Çerve Biçimini #DDDDDD ise Çerçeve Rengini Belirler */
background: #FFFFFF; /* Orta Blok Arkaplan Rengini Belirler */
padding: 10px 10px 1px 10px; /* Orta Blok Çerçevenin içe Dogru Olan Özelligini Belirler */
min-height: 30px;
}
#content .bottom .left { /* Orta Blok Çerçevenin Alt Sag Kisim Özelliklerini Belirler */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_bottom_left.png) no-repeat;
width: 5px;
height: 5px;
float: left;
}
#content .bottom .right { /* Orta Blok Çerçevenin Alt Sag Kisim Özelliklerini Belirler */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_bottom_right.png) no-repeat;
width: 5px;
height: 5px;
float: right;
}
#content .bottom .center { /* Orta Blok Çerçevenin Alt Orta Kisim Özelliklerini Belirler */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/content_bottom_center.png) repeat-x;
height: 5px;
margin: 0 5px 10px 5px;
}
.box { /* Sag ve Sol Kolon Özelliklerini Belirler */
margin-bottom: 10px; /* Sag ve Sol Kolonlarin Aralarindaki Bosluklari Belirler (Asagiya Dogru) */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/box_top.png) no-repeat; /* Sag ve Sol Kolonlarin Header Resminin Yolunu ve Durumunu Belirler */
}
.box .top {
padding: 8px 0px 8px 7px; /* Sag ve Sol Kolonlarin Baslik Yazisinin Durumunu Belirler */
color: #000000; /* Sag ve Sol Kolonlarin Baslik Fontunun Rengini Belirler */
font-size: 14px; /* Sag ve Sol Kolonlarin Baslik Fontunun Boyutunu Belirler */
font-family: Arial, Helvetica, sans-serif; /* Sag ve Sol Kolonlarin Baslik Fontunun Tipini Belirler */
font-weight: bold; /* Sag ve Sol Kolonlarin Baslik Fontunun Kalinligini v.s Belirler */
text-transform: uppercase; /* Sag ve Sol Kolonlarin Baslik Fontunun Biçimini Belirler Örn : uppercase Yerine none Yaparsaniz ilk Harf Büyük Gerisi Küçük Olur */
}
.box .top img {
float: left; /* Sag ve Sol Kolon iconlarinin Yerini Belirler. Örn : left Yerine right Degerini Verirseniz iconlar Saga Yaslanir */
margin-right: 5px; /* Sag ve Sol Kolonlarin Baslik Fontlarini Saga Dogru Kaydirir */
}
.box .middle { /* Sag ve Sol Kolonlarin Çerçeve Özelliklerini Belirler */
border-left: 1px solid #DDDDDD; /* Sag ve Sol Kolon Çerçevelerin Sol Kisminin Kalinligini, Biçimini ve Rengini Belirler */
border-right: 1px solid #DDDDDD; /* Sag ve Sol Kolon Çerçevelerin Sag Kisminin Kalinligini, Biçimini ve Rengini Belirler */
background: #FFFFFF; /* Sag ve Sol Kolon Çerçevelerin Arkaplan Rengini Belirler */
padding: 10px; /* Sag ve Sol Kolon içerisindeki Elemanlarin Pozisyonunu Belirler */
}
.box .bottom {
height: 5px; /* Alt Alta Duran Sag ve Sol Kolon Arasindaki Boslugu Belirler */
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/box_bottom.png) no-repeat; /* Sag ve Sol Kolon Çerçevelerinin Al Kismidir */
}
.success {
padding: 5px 0px;
margin-bottom: 10px;
background: #E4F1C9;
border: 1px solid #A5BD71;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.warning { /* Sitenin Uyari Bölümlerinin Özelliklerini Belirler */
padding: 5px 0px; /* Uyarilarin Çerçeve Özelliklerini Belirler */
margin-bottom: 20px;
background: #FFDFE0; /* Uyarilarin Arkaplan Rengini Belirler */
border: 1px solid #FF9999; /* Uyari Çerçevelerinin Kalinligini, Biçimini ve Rengini Belirler */
font-size: 11px; /* Uyarilarinin Font Boyutunu Belirler */
font-family: Verdana, Geneva, sans-serif; /* Uyarilarin Font Tipini Belirler */
text-align: center; /* Uyari Fontlarinin Yerlesme Durumunu Belirler */
}
.wait { /* Sitedeki “Lütfen Bekleyiniz” Özelliklerini Belirler */
padding: 5px 0px; /* Uyarilarin Çerçeve Özelliklerini Belirler */
margin-bottom: 10px;
background: #FBFAEA; /* Uyarilarin Arkaplan Rengini Belirler */
border: 1px solid #EFEBAA; /* Uyari Çerçevelerinin Kalinligini, Biçimini ve Rengini Belirler */
font-size: 11px; /* Uyarilarinin Font Boyutunu Belirler */
font-family: Verdana, Geneva, sans-serif; /* Uyarilarin Font Tipini Belirler */
text-align: center; /* Uyari Fontlarinin Yerlesme Durumunu Belirler */
}
.required { /* Sitedi Zorunlu Alanlarda Bulunan (*) Isaretinin Özelliklerini Belirler */
color: #FF0000; /* Burasi Renk Özelligi */
font-weight: bold; /* Burasi Font Özelligi */
}
.error { /* Sitedeki Hata Mesajlarinin Özelliklerini Belirler */
color: #FF0000; /* Burasi Renk Özelligi */
display: block; /* Katman Özelligi */
}
.help {
cursor: pointer;
}
.tooltip {
border: 1px solid #FDDA5C;
background: #FBFF95;
padding: 5px;
font-size: 11px;
width: 250px;
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
.button { /* Sitedeki Buton Özelliklerini Belirler */
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/button_left.png) top left no-repeat;
text-decoration: none;
color:#FFF;
}
.button span { /* Sitedeki Butonlarin Link Özelliklerini Belirler */
color: #FFF;
display: block;
padding: 4px 12px 5px 5px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/button_right.png) top right no-repeat;
}
.buttons { /* Sitedeki Butonlarin Çerçeve Özelliklerini Belirler */
background: #F8F8F8; /* Çerçevelerin Arkaplan Rengini Belirler */
border: 1px solid #DDDDDD; /* Çerçevelerin Kalinligini, Biçimini ve Rengini Belirler */
padding: 15px; /* Çerçevelerin Enini Belirler */
margin-bottom: 10px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td {
vertical-align: middle;
}
.content { /* Buton Tablolarinin Özelliklerini Belirler Örn: Ürün Sayfasindaki Miktar Kismi */
background: #F7F7F7; /* Arkaplan Rengini Belirler */
border: 1px solid #DDDDDD; /* Çerçeve Kalinligini, Biçimini ve Rengini Belirler */
padding: 10px; /* Çerçeve içerisindeki Uyarilarin Konumjunu Belirler */
margin-top: 3px; /* Tablolarin content Içerisindeki Konumunu Belirler */
margin-bottom: 10px;
}
.list { /* Ürün Liste Özelliklerini Belirler */
margin-bottom: 10px;
width: 100%;
}
.list td {
text-align: center;
vertical-align: top;
padding-bottom: 10px;
}
.sort { /* Ürün Listelerinin Üstte Bulunan “Siralama” Özelliklerini Belirler */
margin-bottom: 10px; /* Konumu Belirler */
background: #F8F8F8; /* Arkaplan Rengini Belirler */
height: 30px; /* Tablo Yüksekligini Belirler. Font v.s Üstte Kalir */
width: 100%; /* Konteyner içindeki Genisligi Belirler */
}
.sort .div1 {
float: right; /* Siralama Seçim Kutusunu Saga, Sola Yaslar Yada Ortalar */
margin-left: 5px;
padding-top: 6px;
padding-right: 9px;
}
.sort .div2 {
text-align: right; /* Siralama Seçim Kutusunun Basindaki Siralama Yazisinin Konumunu Belirler */
padding-top: 9px;
}
.sort select { /* Siralama Seçim Kutusunun Içerisindeki Font Özelliklerini Belirler */
font-size: 11px;
margin: 0;
padding: 0;
}
.pagination { /* Ürün Listelerinin Altinda Bulunan Sayfa ve O Sayfada Bulunan Ürün Sayisini Gösteren Tablonun Özelliklerini Belirler */
display: inline-block; /* Katman Özelliklerini Belirler */
width: 100%; /* Genisligi Belirler */
background: #F8F8F8; /* Arkaplan Rengini Belirler */
margin-bottom: 10px; /* Tablonun Konumunu Belirler */
}
.pagination .links, .pagination .results {
padding: 7px; /* Tablo içerisindeki Metin ve Linklerin Konumunu Belirler */
}
.pagination .links {
float: left; /* Tablo Içerisindeki Metin ve Linkleri Saga, Sola Yaslar yada Ortalar */
}
.pagination .links a {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
}
.pagination .links b {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
background: #FFFFFF;
}
.pagination .results {
float: right;
}
.tabs { /* Ürün Açiklamalarinda Bulunan Tab Özelliklerini Belirler */
width: 100%; /* Tab Genisligini Belirler */
height: 31px; /* Tab Ygksekligini Belirler */
margin-bottom: 0px; /* Tab ile Yazilar Arasindaki Boslugu Belirler */
}
.tabs a {
float: left; /* Tab’lari Sola, Saga Yaslar */
display: block; /*Katman Özellikleri */
padding: 6px 15px 7px 15px; /* Tab Kenarlari ile Tab Içerisindeki Yazilarin v.s Arasindaki Boslugu Belirler */
margin-right: 2px; /* Tab’larin Aralarindaki Boslugu Belirler (Soldan Saga) */
border-top: 1px solid #DDDDDD; /* Tab Çerçevesinin Üst Kisminin Kalinligini, Biçimini ve Rengini Belirler */
border-bottom: 1px solid #DDDDDD; /* Tab Çerçevesinin Alt Kisminin Kalinligini, Biçimini ve Rengini Belirler */
border-left: 1px solid #DDDDDD; /* Tab Çerçevesinin Sol Kisminin Kalinligini, Biçimini ve Rengini Belirler */
border-right: 1px solid #DDDDDD; /* Tab Çerçevesinin Sag Kisminin Kalinligini, Biçimini ve Rengini Belirler */
background: #FFFFFF url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/tab_3.png) repeat-x; /* Tablarin Arkaplan Rengini, Imaj Yolunu ve Durumunu Belirler */
color: #000000; /* Tab Içerisindeki Fontlarin Rengini Belirler */
font-weight: bold; /* Tab Içerisindeki Fontlarin Kalinligini Belirler */
font-size: 13px; /* Tab Içerisindeki Fontlarin Boyutunu Belirler */
text-decoration: none; /* Tab Içerisindeki Fontlarin Biçimini Belirler. Alt-Üst Çizgi, Büyük-Küçük Harf v.s */
z-index: 1; /* Katmanlarin Alttan Üste Dogru Hangi Sira ile Gösterilercegini Belirler. Buradaki 1 Degeri Katmanin En Altta Olacagini Belirler */
position: relative; /* Tab’larin Yerinin Belirlenmesini Saglar */
top: 1px; /* Tab’larin Üstten Ne Kadar Asagida Olacagini Belirler */
}
.tabs a.selected {
background: #FFFFFF url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/tab_3.png) repeat-x; /* Seçili Olan Tab’in Arkaplan Rengini, Resmini ve Durumunu Belirler */
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.tab_page { /* Ürün Açiklama, Diger Resimler, Yorumlar, Benzer Ürünler Kisimlarinin Özelliklerini Belirler */
border: 1px solid #DDDDDD; /* Ürün Açiklama, Diger Resimler, Yorumlar, Benzer Ürünler Kisimlarinin Çerçeve Kalinligini, Biçimini ve Rengini Belirler */
background: #FFFFFF; /* Ürün Açiklama, Diger Resimler, Yorumlar, Benzer Ürünler Kisimlarinin Arkaplan Rengini Belirler */
padding: 10px; /* Çerçeve Içerisinde Kalan Yazilarin v.s Etrafindaki Bosluklari Belirler */
display: block; /* Katman Özellikleri */
z-index: 2;
margin-bottom: 10px; /* Çerçevelerin Alt Kismindaki Boslugu Belirler */
}
#footer { /* Footer Özelliklerini Belirler */
width: 100%; /* Footer Genisligini Belirler */
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD; /* Sitemiz ile Footer Arasinda Bulunan Çizginin Kalinligini, Biçimini ve Rengini Belirler */
}
#footer .div1 {
float: left; /* Footer’da Bulunan paypal v.s Logolarinin Konumunu Belirler */
text-align: left; /* Metinlerin Dikey Olarak Nasil Hizalanacagini Belirler */
}
#footer .div2 {
float: right; /* Footerdaki OpenCart-TR Metinlerinin Konumunu Belirler */
text-align: right; /* Metinlerin Dikey Olarak Nasil Hizalanacagini Belirler */
}
#category ul { /* “Kategoriler” Özelliklerini Belirler */
margin-top: 0px; /* Kategoriler Kolonunda Bulunan Linklerin Üst Boslugunu Belirler */
margin-bottom: 0px; /* Kategoriler Kolonunda Bulunan Linklerin Alt Boslugunu Belirler */
margin-left: 8px; /* KategorilerKolonu ile Pencereler Arasinda Birakilacak Boslugu Belirler */
padding-left: 12px; /* Kategoriler Kolonunun Sol Kenari ile Linkler Arasinda Birakilacak Boslugu Belirler */
list-style: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/bullet_1.png); /* Kategoriler Kolonunda Bulunan Linklerin iconlarinin Yolunu Belirler */
}
#information ul { /* “Bilgiler” Özelliklerini Belirler */
margin-top: 0px; /* Bilgiler Kolonunda Bulunan Linklerin Üst Boslugunu Belirler */
margin-bottom: 0px; /* Bilgiler Kolonunda Bulunan Linklerin Alt Boslugunu Belirler */
margin-left: 8px; /* Bilgiler Kolonu ile Pencereler Arasinda Birakilacak Boslugu Belirler */
padding-left: 12px; /* Bilgiler Kolonunun Sol Kenari ile Linkler Arasinda Birakilacak Boslugu Belirler */
list-style: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/bullet_2.png); /* Bilgiler Kolonunda Bulunan Linklerin iconlarinin Yolunu Belirler */
}
.cart { /* Alisveris Sepeti Çerçeve Özelliklerini Belirler “Orta Blok” */
border-collapse: collapse; /* Orta Bloktaki Alisveris Sepetinin Tablo Özelligini Belirler. Örn : Buradaki collapse Degerini seperate Yaparsaniz Tabloya Kenarlik Verirsiniz */
width: 100%; /* Orta Blok Alisveris Sepetinin Genisligini Belirler */
border: 1px solid #EEEEEE; /* Orta Blok Alisveris Sepetinin Çerçeve Kalinligini, Biçimini ve Rengini Belirler */
margin-bottom: 10px; /* Orta Blok Alisveris Sepeti Çerçevesi ile Aratoplam v.s Kisminin Arasindaki Boslugu Belirler */
}
.cart th {
background: #EEEEEE; /* Orta Bloktaki Alisveris Sepetinin Çerçeve Üst Rengini Belirler */
padding: 5px; /* Tablo ile Metinler Arasindaki Boslugu Belirler */
font-weight: normal; /* Font Durumunu Belirler */
}
.cart td {
padding: 5px; /* Orta Bloktaki Alisveris Sepetinin Iç Kisminin Bosluklarini Belirler */
}
.tags, .tags a { /* Etiket Özelliklerini Belirler */
font-style: italic; /* Etiket Font Özelligini Belirler */
font-size: x-small; /* Etiket Font Boyutunu Belirler */
}
#module_cart .middle { /* Sitenizin Sag Üst Tarafindaki Alisveris Sepetinin Özelliklerini Belirler */
padding: 5px; /* Sepet Içerisindeki Metinlerin, Linklerin v.s Kenar Bosluklarini Belirler */
}
.cart_module_total {
padding: 0 3px 0 3px; /* Alisveris Sepetindeki Ara. Toplam, Sabit Kargo Fiyati, Toplam, Metinlerinin Bosluklarini Belirler */
font-size: 0.9em; /* Alisveris Sepetindeki Ara. Toplam, Sabit Kargo Fiyati, Toplam, Metinlerinin Boyutunu Belirler */
color: #000000; /* Alisveris Sepetindeki Ara. Toplam, Sabit Kargo Fiyati, Toplam, Metinlerinin Rengini Belirler */
}
.cart_remove {
margin-top: 3px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/list_remove_btn.gif) no-repeat left center transparent; /* Alisveris Sepetindeki “SIL” Butonunun Yolunu, Durumunu, Konumunu ve Back Özelligini Belirler*/
padding-right:10px; /* Alisveris Sepetindeki “Sil” Butonu ile Ürün Adi Arasindaki Boslugu Belirler. (Buton Sabir Katil Ürün Adi Saga Kayar */
cursor:pointer; /* Alisveris Sepetindeki “SIL” Butonuna Mouse ile Gelindiginde imlecin Seklini Belirler Örn: ne-resize */
}
.cart_remove_loading { /* Alisveris Sepetinde “SIL” Butonuna Tiklandiginda Gözüken Loading Özelligini Belirler */
margin-top: 3px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/ajax_load.gif) no-repeat transparent;
padding-right:10px;
}
.button_add_small, a.button_add_small:visited { /* Sepete Ekle Özelliklerini Belirler */
margin-top: 3px;
background: url(../../../wamp/www/OpenCartDeneme/catalog/view/theme/default/image/button_add_small.png) no-repeat left center transparent; /* Sepete Ekle Butonunun Yolunu, Durumunu, Konumunu ve Back Özelligini Belirler */
padding:5px; /* Sepete Ekle Butonunu Sola Dogru Kaydirir (Fiyuat Dahil) */
text-decoration: none; /* Sepete Ekle Butonu Yerine Bir Metin Varsa Onun Durumunu Belirler. Kalin, Aldu Çizgili v.s */
cursor:pointer; /* Sepete Ekle Butonunun Üzerine Mouse ile Gelindiginde Imlecin Seklini Belirler Örn: ne-resize */
}
#content .middle .box {
float: left;
margin: 0 6px 10px 6px;
min-height: 0px;
}
#content .middle .box .middle {
width: 158px;
min-height: 0px;
}

Arama
Sosyal Medya

    

Web Tasarım Hizmetleri

Web Sitesi Tasarımı Web sitesi, işletmenizi, ürünlerinizi veya hizmetlerinizi ikna ederek ve anlatarak müşterileri size getiren, işletmenizin çevrimiçi yüzüdür. Bu nedenle, etkileşimi artırmak için mesleğiniz hakkında yaratıcı bir şekilde konuşan özel web tasarımları yapıyoruz.

Hosting Hizmetleri

Sosyal Medya yayımcısı olmak isteyen kişiler için gelişmiş içerik yönetim özelliklerine sahiptir, her ihtiyaca uygun yüzbinlerce tema ve eklenti (plug-in) seçenekleri ile dünyada 40 milyondan fazla web sitesi tarafından kullanılmaktadır. Arama motoru dostu link yapısı ile gelişmiş bir SEO omurgasına sahip olup, özgün içerik ile beslendiğinde diğer kurulumlara göre çok daha hızlı indeks alabilme kabiliyetine de sahiptir. temadunyasi.com’un WordPress yayımcıları için geliştirdiği bu özel paket, Cloud (bulut) altyapısı üzerinde en stabil veri iletişimi ve maksimum sürdürülebilirliği garanti etmek için tasarlanmıştır.

Logo Tasarım

Logo, sizi rekabetten ayıran bir marka kimliğidir. Bu nedenle, işletmenin markalaşmasına yardımcı olan ve müşterileriniz üzerinde benzersiz bir izlenim yaratan logo tasarım hizmetleri sunuyoruz. Yaratıcı grafik tasarımcılarımız, markanızı anlatan ve kullanıcılarınızın zihninde daha derinlere inen logolar tasarlıyorum.

E-Ticaret Web Tasarım

Kullanıcı dostu, çekici, kullanımı kolay ve müşterilerinizi göz atma sırasında rahatlatan önemli gezinme gibi özellikleri geliştiren bir e-ticaret web sitesi hazırlıyoruz.

İletişim

İlk Yerleşim Mah. 1994.Sk 

Metro Ucuzluk Halk Pazarı 1.Peron No: 8 

Batıkent / ANKARA / TÜRKİYE

0(555)1062345

temadunyasi@gmail.com