seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-10-2016, 11:50 AMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Modullerde Css Görselliği -1 Yayımda

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  1491 - Yorum  6

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

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



Kişisel Bilgileri: v
Konu Tarihi: 07-01-2013 10:04 AM
Herkese selam dün cansıkıntısından bir görsel düzenleme yaptım bu seer hazıra konmadın el emeği göz nuru döküp kendim editledim Big Grin byduman oktay biraderde şahittir adım adım izledi Big Grin aslında o kadar şaaaşaalı değil ama güzel oldu şuanda videosunu yayımlıyorum akşama dğru bi iki düzenlemeden sonra yayımlyacağım ..








Evet arkadaşlar kendimin featured.tpl deki kodları veriyorum kendinize göre düzenlersiiz.


featured.tpl :

Alıntı:<style type="text/css">
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* page setup */
.wrapper{
width:100%;
max-width:1000px;
margin: 3px auto;
}
section.row{
margin:0 0 30px 0;
}
.row{
width: 100%;
display: block;
clear: both;
}
/* Actual content */


.item{
width:147px;
height:210px;

-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
position: relative;
top:0;
left:0;
z-index:5;
overflow: hidden;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.item-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxp​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0​PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZz​ZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBv​ZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwv​bGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmls​bD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */

-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxp​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0​PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZz​ZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBv​ZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwv​bGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmls​bD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
background-color: rgba(0,0,0,0.4);
}
.item-content{
position: absolute;
width:100%;
bottom: 0;
-webkit-transform: translate(0,100%);
-moz-transform: translate(0,100%);
-ms-transform: translate(0,100%);
-o-transform: translate(0,100%);
transform: translate(0,100%);

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

}
.item:hover .item-content{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.item-top-content{
position: relative;
}
.item-top-content-inner{
position: absolute;
bottom: 0;
padding:-1px 15px 10px 15px;
background: rgba(255,255,255,.85);
width:100%;
}
.item-add-content{
padding:0 15px 15px 15px;
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
opacity:1
}
.item-add-content-inner{
border:0px solid #dadada;
border-top-width:1px;
padding-top:10px;
}



/* Buttons */
.item-button{
border-radius:3px;
width:30px;
height:30px;
}
.item-button.play{
background-color:#4F4F4F;
position: absolute;
top: 15px;
left: 15px;
opacity:0;
background-image: url(image/list.png);
}
.item-button.play:hover{
background-color:#4F4F4F;
}
.container-item:hover .item-button.play{
opacity:1;
}

.item-button.share{
background-color:#4f4f4f;
position: absolute;
top: 50px;
left: 15px;
opacity:0;
background-image: url(image/share-img.png);
}
.item-button.share:hover{
background-color:#333333;
}
.container-item:hover .item-button.share{
opacity:1;
}
.btn.buy{
background-color: #4F4F4F;
text-align:center;
line-height:42px;
font-weight:700;
color:#fff;
border-radius:3px;
text-decoration:none;
opacity:1;
border:0px solid #35a76e;
border-bottom-width:2px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
background-color:#4F4F4F;
}
.expand{
display:block;
}

/* Tags */
.sale-tag{
width: 50px;
height: 100px;
background: #4FBF4F;
position: absolute;
top:-45px;
right:-10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sale-tag span{
position:absolute;
top:48px;
left:2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
font-size:11px;
color:#fff;
}

/* content */

.item-product{
width:70%;
float:left;
}
.item-product-price{
width:30%;
float:right;
text-align: right;
}
/* Style / Theming */


/*Prduct title*/
h2{
font-size:1em;
font-weight:400;
color:#222;
}

.subdescription{
font-family: 'helvetica neue';
font-size:0.8em;
font-weight:400;
color:#7d7d7d;
}

/*product price*/
.item-product-price{
color:#4F4F4F;
font-size:1em;
font-weight:700;
position:relative;
font-family:'helvetica neue'
}
.item-product-price .subdescription{
color:#7d7d7d;
}
.old-price{
border:0 solid #7d7d7d;
border-bottom-width:1px;
margin-top:-11px;
width:30px;
position:absolute;
right:-2px;
bottom:10px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}

.item-content{
background: rgba(255,255,255,.85);
}
.item-add-content{
font-family: 'Lato', sans-serif;
font-weight:400;
color:#7d7d7d;
}
.item-add-content .section{
margin-bottom:10px;
}
.item-add-content .section:last-of-type{
margin-bottom:0;
}
.item-add-content h4{
font-weight:600;
color:#222;
font-size:0.8em;
}
.item-add-content p{
font-size:0.8em;
}


/* Item menu */

</style>
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<div class="box-product">
<?php foreach ($products as $product) { ?>

<div class="wrapper">

<section class="row">
<div class="container-item">
<div class="item" style="margin-left:3px">
<?php if ($product['thumb']) { ?>
<div >

<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"class="item-overlay" ></a>
<a title="Add to Wishlist" onclick="addToWishList('<?php echo $product['product_id']; ?>');" class="item-button play"><i class="play"></i></a>
<a title="Add to Compare" onclick="addToCompare('<?php echo $product['product_id']; ?>');" class="item-button share share-btn"><i class="play"></i></a>
<div class="sale-tag"><span>SATIŞ</span></div>
</div>
<div class="item-content">
<div class="item-top-content">
<div class="item-top-content-inner">
<div class="item-product">
<div class="item-top-title">
<a href="<?php echo $product['href']; ?>"><h2><?php echo $product['name']; ?></a></h2>
<p class="subdescription">
<?php echo $product['description']; ?>
</p>
</div>
</div>
<div class="item-product-price">
<?php if ($product['price']) { ?>
<?php if (!$product['special']) { ?>
<span class="price-num"> <?php echo $product['price']; ?></span>
<?php } else { ?>
<p class="subdescription"><span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?></p>
<?php } ?>
</div>
</div>
</div>
<div class="item-add-content">
<div class="item-add-content-inner">
<!-- <div class="section">
<h4>Sizes</h4>
<p>40,41,42,43,44,45</p>
</div> -->
<div class="section">
<a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="btn buy expand"><?php echo $button_cart; ?></a>
</div>
</div>
</div>
</div>
</div><?php } ?>

</div></div>
</section> <?php } ?> <br /><br />
</div></div></div>




Birde catalog/controller/module/ featured.php dosyamızı açalım :

Bulalm :

Alıntı:'thumb' => $image,

Bi Alt Satıra Ekleyelim :

Alıntı:'description' => substr(strip_tags(html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8')), 0, 20) . '..',


Ekli Dosya(lar)
.png list.png Eklentiyi indir...
Boyut: 4.04 KB İndirme: 121
Telif Hakkı için Rapor Edin...
.png share-img.png Eklentiyi indir...
Boyut: 972 bytes İndirme: 120
Telif Hakkı için Rapor Edin...
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: TECHNOLOG , nokta , eka7a , byduman , fe_odaliz
opencart temaları
eka7av
weblenti.com
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 236
Konular: 12
Katılma Tarihi: Apr 2013
Rep Puanı: 5
Teşekkürler: 33
89 Mesajına, 143 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-01-2013 08:37 PM
Güzel bir düzenleme oluş. Karşılaştırma ikonu alışveriş listem için daha uygun gibi sanki Smile
eka7a
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: Kıroğlumarket
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

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



Kişisel Bilgileri: v
Konu Tarihi: 07-01-2013 08:38 PM
çözene kadar akla karayı seçtim abi o sebepten hemen eklemedim bu akşam bitiriyorum sonra şu bir arkadaş istemişti kayan menu biraz ona bakacam
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

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



Kişisel Bilgileri: v
Konu Tarihi: 07-01-2013 11:51 PM
Herkese hayırlı olsun css le birazdaha geliştirilirse daha iyileştirilebilir...

Kodun Orjinali : http://cssdeck.com/labs/l6pzd5vm
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
hipokondriyakv
krea-if.com
**
Üye
Çevrimdışı

Mesajlar: 37
Konular: 5
Katılma Tarihi: Jan 2012
Rep Puanı: 0
Teşekkürler: 6
1 Mesajına, 1 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-03-2013 01:34 AM
çok guzel elinize sağlık ta cssdeck teki javascriptler yok değil mi ?
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

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



Kişisel Bilgileri: v
Konu Tarihi: 07-03-2013 01:38 AM
js kesinlikle yo ordaki sizi şaşırtmasın sakın Big Grin ha bu arada koddan da sildim eğer eklemşseniz silin b satırı pek bi etkisi yok Big Grin <link rel="stylesheet" href="hint.css"></link>
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
opencart temaları
aksoy520v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 1
Konular: 0
Katılma Tarihi: Jul 2013
Rep Puanı: 0
Teşekkürler: 0
0 Mesajına, 0 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 09-22-2013 02:39 PM
ben yapamadım bana yardımcı olurmusunuz kendi temamın içindeki modüler featured.tpl ekliyorum fakat bir işlem olmuyor hiç bir degişiklik olumur 1.5.2.1 sürüm kulanıyorum bundan dolayı olabilirmi?
Alıntı Yaparak Cevapla
Paylaş!

« Önceki | Sonraki »
Cevapla  Gönder 

Modullerde Css Görselliği -1 Yayımda  Konusunun Linki Direk Link
Modullerde Css Görselliği -1 Yayımda  Konusunun HTML Kodu HTML Link
Modullerde Css Görselliği -1 Yayımda  Konusu BBCode Linki BBCode Link
Modullerde Css Görselliği -1 Yayımda  Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Opencart 1.5.1 x Ana sayfa modüllerde indirimde ve ücretsiz kargo ikonu göstermek. osdem66 28 11,336 04-16-2016 01:42 AM
Son Mesaj: tekinsaka
  [Modifikasyon] Opencart modullerde yada kategorilerde arttırma azlatma butonları Yayınlandı Kıroğlumarket 7 1,099 06-07-2015 06:24 PM
Son Mesaj: turkojen34
  [Mod] Opencart Detayda Ve Modullerde Kampanya Tarihi Kıroğlumarket 0 525 01-11-2015 01:46 PM
Son Mesaj: Kıroğlumarket
  [Modifikasyon] Modullerde Lazyload ve Rollover Modifiyesi - Yayında Kıroğlumarket 11 3,102 04-02-2014 08:24 PM
Son Mesaj: nokta
  havale eft indirimini anasayfadaki modüllerde gösterme osman 30 4,950 04-02-2014 01:37 PM
Son Mesaj: emremix
  Modüllerde Kategori ADINI GÖsterme Kıroğlumarket 2 929 03-16-2014 08:24 PM
Son Mesaj: Kıroğlumarket
  Modullerde Css Görselliği -2 Eka7 Yayımda Kıroğlumarket 4 1,262 07-13-2013 01:32 PM
Son Mesaj: nokta
  Opencart 1.5.versiyonlarda özellikleri ve Secenekleri modüllerde göstermek osdem66 0 1,236 06-19-2013 12:24 PM
Son Mesaj: osdem66
  [Modifikasyon] Modüllerde Tooltip Eklentisi Bu Farklı Kıroğlumarket 0 1,059 06-10-2013 09:51 AM
Son Mesaj: Kıroğlumarket
  Anasayfadaki modüllerde ürünlerde kategori adı göstermek sekhil 4 1,393 05-20-2013 07:00 AM
Son Mesaj: yusuf_07

Modullerde Css Görselliği -1 Yayımda indir, Modullerde Css Görselliği -1 Yayımda Videosu, Modullerde Css Görselliği -1 Yayımda online izle, Modullerde Css Görselliği -1 Yayımda Bedava indir, Modullerde Css Görselliği -1 Yayımda Yükle, Modullerde Css Görselliği -1 Yayımda Hakkında, Modullerde Css Görselliği -1 Yayımda nedir, Modullerde Css Görselliği -1 Yayımda Free indir, Modullerde Css Görselliği -1 Yayımda oyunu, Modullerde Css Görselliği -1 Yayımda download


Forum Atla: