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

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 byduman oktay biraderde şahittir adım adım izledi 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) . '..',

Güzel bir düzenleme oluş. Karşılaştırma ikonu alışveriş listem için daha uygun gibi sanki

çö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

Herkese hayırlı olsun css le birazdaha geliştirilirse daha iyileştirilebilir...

Kodun Orjinali : http://cssdeck.com/labs/l6pzd5vm

çok guzel elinize sağlık ta cssdeck teki javascriptler yok değil mi ?

js kesinlikle yo ordaki sizi şaşırtmasın sakın ha bu arada koddan da sildim eğer eklemşseniz silin b satırı pek bi etkisi yok <link rel="stylesheet" href="hint.css"></link>

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?