Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Evet arkadaşlar güzel bir css3 arama kutusu modifiyesiyle daha karşınızdayım. Şimdi Değişen dosyaları sırasyıla açıklayalım . ekteki css dosyasını header da beirtilen yere atınız.

Demo:

1. Header da css you eklenecek ve text kutuarında class ve id tanımlamaları yapılacak
2. Sistemin kendisine ait css dosyasında header search bloklarında değişimler yapılacak.
3. Ajax search kullanan varsa o siyah açılan liste yeni modifiyeli arama kutusuna nasıl uyumlu hale geitirilir gösterilecek.


Başlayalım

Şimdi Dosyamızı Açalım : catalog/view/theme/seninteman/styleesheet/ styleesheet.css dosyanızda ki header serach bloklarını aşıdaki gibi düzenleyiniz.


Dosyamızı Açalım : [/b]catalog/view/theme/seninteman/template/common header.tpl

Bulalım :


Üstüne Ekleyelim :



Yine aynı dosyada Bulalım :

Başlayıp dahil kısmına kadar seçelim ve aşağıdaki ile değiştirelim.


Eğer Ajax search kullanan arkadaşlar varsa dosyamızı açalım : catalog/view/theme/default/stylesheet/ livesearch.css Belirttiğim yerlerde kendinize göre düzenleme yapınız.

Alıntı:#livesearch_search_results {
margin:0px;
padding:5px;
position: absolute;
top: 50px; ==>> Burası konumu alt yada üste çıkarmak için
left: 15px; ==>> Burası yeri sola yada sağa çekmek için
min-width: 370px;==>> Burasıda o siyah listenin uzunluğu ayarlandığı yer

ve son olarakta faklı kullanabileceğiniz dier stilleri yazayım :

<input type="text" class="search-field" />
<input type="submit" class="search-button light" />

<input type="text" class="search-field" />
<input type="submit" class="search-button dark" />

<input type="text" class="search-field" />
<input type="submit" class="search-button ocean" />

<input type="text" class="search-field strawberry-glow" />
<input type="submit" class="search-button strawberry" />

<input type="text" class="search-field tangerine-glow" />
<input type="submit" class="search-button tangerine" />

<input type="text" class="search-field fern-glow" />
<input type="submit" class="search-button fern" />

kiroglu kardeşim ellerine emeğine sağlık.bende küçültme ve büyülme için sana destek olayım

Dış Çerçeve

.search-wrapper {
width: 300px; ( genişlik burdan )
height: 20px; yükseklik burdan )
background: #E0E0E0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
padding: 8px;
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
margin-bottom: 20px;
}


İç Çerçeve

input.search-field {
display: block;
width: 205px; ( genişlik burdan )
height: 20px; ( yükseklik burdan )
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #ACACAC;
text-align: left;
line-height: 34px;
text-decoration: none;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
border: none;
font-weight: normal;
float: left;
padding: 0 10px;
background: #F5F5F5;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F3F3', endColorstr='#FFFFFF');
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#FFFFFF));
background: -moz-linear-gradient(top, #F3F3F3, #FFFFFF);
-webkit-box-shadow: inset 0px 1px 1px #9A9A9A;
-moz-box-shadow: inset 0px 1px 1px #9A9A9A;
-o-box-shadow: inset 0px 1px 1px #9A9A9A;
-khtml-box-shadow: inset 0px 1px 1px #9A9A9A;
box-shadow: inset 0px 1px 1px #9A9A9A;
}


iki tafaıda eşit oranda yapmanız gerekiyor.örnek birinden 10 eksilttiniz diğerinden de 10 eksiltirseniz orantılı oluyor bilginize.