seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-09-2016, 01:00 AMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Eklenti Css Search Arama Kutusu Görselleri -3

Konuyu görüntüleyenler: 1 Misafir
 
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
%
Cevapla  Gönder 
v  v
Yazar  Kıroğlumarket - Görüntüleme - Okunma  1434 - Yorum  1

Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,965
Konular: 475
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1107
965 Mesajına, 1979 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 09-13-2012 11:16 PM
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.

PHP Kod:
#header #search {
    
positionabsolute;
    
top9px;
    
right10px;
    
    
z-index15;
}
#header .button-search {
    
positionabsolute;
    
left287px;
    
top9px;
    
    
height24px;
        
cursorpointer;
}
#header #search input {


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

Bulalım :

PHP Kod:
</head

Üstüne Ekleyelim :

PHP Kod:
<link href="catalog/view/javascript/js/global.css" rel="stylesheet" type="text/css" media="screen" /> 


Yine aynı dosyada Bulalım :

PHP Kod:
<div id="search"
Başlayıp
PHP Kod:
</div
dahil
PHP Kod:
<div id="welcome"
kısmına kadar seçelim ve aşağıdaki ile değiştirelim.

PHP Kod:
<div id="search">
    <
div class="button-search"></div>
    <?
php if ($filter_name) { ?>
      <div class="search-wrapper"><input type="search"class="search-field" name="filter_name" value="<?php echo $filter_name?>" /><div class="button-search"><input type="submit" class="search-button ocean" value="search" /></div>
</div>
    <?php } else { ?>
    <div class="search-wrapper"><input type="text" class="search-field" name="filter_name" value="<?php echo $text_search?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" /><div class="button-search"><input type="submit" class="search-button ocean" value="search" /></div></div>

    <?php ?>
  </div> 

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" />


Ekli Dosya(lar) Önizleme(ler)
Resmi Büyütmek İçin Tıklayın   
.rar global.rar Eklentiyi indir...
Boyut: 3.36 KB İndirme: 7
Telif Hakkı için Rapor Edin...
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: yusuf_07 , ITECHINN , nokta , fe_odaliz
opencart temaları
yusuf_07v
Üye
***
V.İ.P Premium user avatar
Çevrimdışı

Mesajlar: 152
Konular: 35
Katılma Tarihi: Jun 2012
Rep Puanı: 3
Teşekkürler: 257
62 Mesajına, 123 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 09-13-2012 11:21 PM
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.
yusuf_07
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: Kıroğlumarket , ITECHINN , nokta

« Önceki | Sonraki »
Cevapla  Gönder 

Css Search Arama Kutusu Görselleri -3 Konusunun Linki Direk Link
Css Search Arama Kutusu Görselleri -3 Konusunun HTML Kodu HTML Link
Css Search Arama Kutusu Görselleri -3 Konusu BBCode Linki BBCode Link
Css Search Arama Kutusu Görselleri -3 Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  index.php?route=product/search kısmını nasıl SEO url haline getirebilirim nahita 2 479 09-07-2016 12:41 AM
Son Mesaj: secretcode
  Sesli Arama Yapmak BLaDe 6 1,683 07-12-2016 02:18 AM
Son Mesaj: martin_8525
  Kategorilerde Arama Sayfasında Stok Miktarın Gösterme Kıroğlumarket 6 1,871 06-10-2016 10:25 AM
Son Mesaj: furkanyvz
  [Mod] Admin sayfasında resim yükleme penceresi arama yaptırmak vqmod Kıroğlumarket 4 2,313 04-10-2016 09:08 PM
Son Mesaj: emrecanaaa
  [Modifikasyon] 1.5.5.x Ve 1.5.6.x Etiket Arama Sorunu Çözümü Kıroğlumarket 3 1,320 03-21-2016 01:46 AM
Son Mesaj: bluemonday
  OC. 1.5.6.4 arama sonuçlarında boşluklar tuncaksoy 2 207 03-10-2016 06:13 PM
Son Mesaj: tuncaksoy
  arama kısmında hata alıyorum OzanDogu 2 566 02-21-2016 10:42 PM
Son Mesaj: OzanDogu
  Opencart anasayfadaki görselleri nasıl büyütebilirim emir28 3 287 02-05-2016 11:04 AM
Son Mesaj: osdem66
  [Eklenti] Opencart Auto suggest product vQmod (Ajax arama tarzı resimli arama) Kıroğlumarket 24 4,274 11-25-2015 07:02 PM
Son Mesaj: fakir
  [Modifikasyon] Ajax Arama - Resimli Sürüm ITECHINN 60 15,738 08-22-2015 11:02 PM
Son Mesaj: redwhite27

Css Search Arama Kutusu Görselleri -3 indir, Css Search Arama Kutusu Görselleri -3 Videosu, Css Search Arama Kutusu Görselleri -3 online izle, Css Search Arama Kutusu Görselleri -3 Bedava indir, Css Search Arama Kutusu Görselleri -3 Yükle, Css Search Arama Kutusu Görselleri -3 Hakkında, Css Search Arama Kutusu Görselleri -3 nedir, Css Search Arama Kutusu Görselleri -3 Free indir, Css Search Arama Kutusu Görselleri -3 oyunu, Css Search Arama Kutusu Görselleri -3 download


Forum Atla: