tr-opencart

     
avatar Şuanki Zaman: 10-15-2018, 12:02 PMHoş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  e-ticaretdersleri - Görüntüleme - Okunma  2828 - Yorum  6

e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,174
Konular: 509
Katılma Tarihi: Jan 2012
Rep Puanı: 99
Teşekkürler: 1142
1027 Mesajına, 2076 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: 123
Telif Hakkı için Rapor Edin...
.png share-img.png Eklentiyi indir...
Boyut: 972 bytes İndirme: 122
Telif Hakkı için Rapor Edin...
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: TECHNOLOG , nokta , eka7a , byduman , fe_odaliz
eka7av
openix.io
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 245
Konular: 14
Katılma Tarihi: Apr 2013
Rep Puanı: 5
Teşekkürler: 33
99 Mesajına, 157 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: e-ticaretdersleri
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,174
Konular: 509
Katılma Tarihi: Jan 2012
Rep Puanı: 99
Teşekkürler: 1142
1027 Mesajına, 2076 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
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,174
Konular: 509
Katılma Tarihi: Jan 2012
Rep Puanı: 99
Teşekkürler: 1142
1027 Mesajına, 2076 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
e-ticaretdersleri
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ş!
e-ticaretdersleriv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 3,174
Konular: 509
Katılma Tarihi: Jan 2012
Rep Puanı: 99
Teşekkürler: 1142
1027 Mesajına, 2076 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>
e-ticaretdersleri
Alıntı Yaparak Cevapla
Paylaş!
aksoy520v
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 2
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 14,780 04-16-2016 01:42 AM
Son Mesaj: tekinsaka
  [Modifikasyon] Opencart modullerde yada kategorilerde arttırma azlatma butonları Yayınlandı e-ticaretdersleri 7 2,284 06-07-2015 06:24 PM
Son Mesaj: turkojen34
  [Mod] Opencart Detayda Ve Modullerde Kampanya Tarihi e-ticaretdersleri 0 1,080 01-11-2015 01:46 PM
Son Mesaj: e-ticaretdersleri
  [Modifikasyon] Modullerde Lazyload ve Rollover Modifiyesi - Yayında e-ticaretdersleri 11 5,704 04-02-2014 08:24 PM
Son Mesaj: nokta
  havale eft indirimini anasayfadaki modüllerde gösterme osman 30 10,179 04-02-2014 01:37 PM
Son Mesaj: emremix
  Modüllerde Kategori ADINI GÖsterme e-ticaretdersleri 2 1,753 03-16-2014 08:24 PM
Son Mesaj: e-ticaretdersleri
  Modullerde Css Görselliği -2 Eka7 Yayımda e-ticaretdersleri 4 2,688 07-13-2013 01:32 PM
Son Mesaj: nokta
  Opencart 1.5.versiyonlarda özellikleri ve Secenekleri modüllerde göstermek osdem66 0 2,049 06-19-2013 12:24 PM
Son Mesaj: osdem66
  [Modifikasyon] Modüllerde Tooltip Eklentisi Bu Farklı e-ticaretdersleri 0 1,557 06-10-2013 09:51 AM
Son Mesaj: e-ticaretdersleri
  Anasayfadaki modüllerde ürünlerde kategori adı göstermek sekhil 4 2,149 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: