Search the Community

I am trying to apply CSS from a site to my homefeatured module on my homepage. http://tympanus.net/Tutorials/OriginalHoverEffects/ (Demo 1). Where it says "Hover Style 1" I'd like it to be the title of the product. Then the short description below it. And where it says "Read More" I'd like it to be the "View" link that I currently have (to view that product page). I'm using Prestashop 1.5.4.1. I like the layout of how the demo has it. I'd like 2 on top and 2 on the bottom. My site currently shows 4 products in 1 row. My Homefeatured.css is shown below: #featured-products_block_center {width:101.3%;border-radius: 0px 0px 10px 10px; border:.1px solid #ede; margin-top:11px;border-bottom:0px!important;padding:5px 0px 0px 0px;box-shadow:0 8px 6px -6px #888;-moz-box-shadow:0 8px 6px -6px #888;-webkit-box-shadow:0 8px 6px -6px #888;} #featured-products_block_center li { width: 157px; height: 242px; margin:8px 0px 1px 11px; padding: 1px 7px;border:1px dotted #ede; } #featured-products_block_center .product_image:hover {opacity: .7; transition: opacity 500ms ease-out 0s; } #featured-products_block_center p.title_block{text-transform: uppercase; border-bottom: 1px solid rgb(222, 222, 222);padding-bottom: 4px;font-weight: 400; text-shadow:0px 0px 0px!important; color:rgb(152,153,153); background: #f9fcf7; background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); font:18px Arial,Helvetica,sans-serif;background:none;} #featured-products_block_center li.last_item_of_line {margin-right:0;} #featured-products_block_center li p.s_title_block a, #featured-products_block_center li p.s_title_block{color: rgb(153, 153, 153); display: block; overflow: hidden; text-decoration: none; text-align:center; position: relative; white-space: nowrap; margin: 3px 0px; font-size: 14px; padding-bottom:3px!important; font-family: Arial,Helvetica,sans-serif;} #featured-products_block_center li:hover p.s_title_block a,#featured-products_block_center li:hover p.s_title_block a{color:rgb(26, 126, 167);} #featured-products_block_center li .product_image,.products_block li img { display:block; position:relative; overflow:hidden; border:0px!important; } img.pring { margin: 0px; padding: 0px; width: 124px; height: 124px; display: block;} .ie8 .new{top:70px;right:10;width:24px;} .ie7 .new {top:80px;right:20;width:24px;} #featured-products_block_center .product_image span.new { display:block;position:absolute;width:24px;top:10px;right:10px;padding:2px;text-align:right;text-transform:uppercase;background-color:#fff;webkit-box-shadow:1px 1px 2px rgba(50,50,50,0.3);-moz-box-shadow:1px 1px 2px rgba(50,50,50,0.3);box-shadow:1px 1px 2px rgba(50,50,50,0.3);} #featured-products_block_center li:hover .product_desc a {font:13px Arial,Helvetica,sans-serif;text-decoration:none;color: rgb(153, 153, 153);} #featured-products_block_center li .product_desc a{color:#ccc;font:13px Arial,Helvetica,sans-serif;text-decoration:none;} #featured-products_block_center li span.on_sale{position:absolute;top:0px;padding:2px;text-align:right;text-transform:uppercase;0.3);color:rgb(153,153,153)} #featured-products_block_center li:hover span.new {color: rgb(26, 126, 167);} #featured-products_block_center li:hover span.on_sale{color: rgb(26, 126, 167);} #featured-products_block_center li .lnk_more { width:30px;position:absolute;top:151px;margin-left:55px; visibility:hidden; text-transform: uppercase; font:10px Arial,Helvetica,sans-serif; background-color: rgb(255, 255, 255); text-decoration:none;padding:1px 2px; box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3); } #featured-products_block_center li:hover .lnk_more {visibility:visible;} #featured-products_block_center .price_container { margin-top:11px; background: none repeat scroll 0 0 #383838; box-shadow:1px 1px 2px rgba(50, 50, 50, 0.3);border:0px; padding:3px 0px; width:100%; } #featured-products_block_center li span.price { font-size: 12px; margin-left: 2px; color: rgb(255, 255, 255); font-family: Arial,Helvetica,sans-serif; text-shadow:.1px .3px 3px #888888; letter-spacing:.3px; font-weight:300; } #featured-products_block_center li:hover span.price {font-weight:bold;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button { visibility:hidden; position: relative; margin:-25px 8px 1px 70px; background:#25aae1; color:#fff; box-shadow:1px 1px 3px #383838; border:0px; height:12px;} #featured-products_block_center li:hover .ajax_add_to_cart_button,#featured-products_block_center li:hover.last_item_of_line {;visibility:visible} #featured-products_block_center li span.exclusive {display:none;} @media only screen and (min-width:1000px) and (max-width:1120px){ #featured-products_block_center{width:90%;} #featured-products_block_center li{width: 140px; height: 230px; margin:21px 8px 1px 12px; padding: 1px 7px} img.pring{width:124px;height:100px;} #featured-products_block_center p.title_block{font-size:14px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:12px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-left:56px;} } @media only screen and (min-width:744px) and (max-width:999px){#featured-products_block_center{width:79%;} #featured-products_block_center li{width: 120px; height: 220px; margin:15px 8px 1px 10px; padding: 1px 7px} img.pring{width:100px;height:100px;} #featured-products_block_center p.title_block{text-align:center;font-size:14px;} #featured-products_block_center li .product_desc a ,#featured-products_block_center li:hover .product_desc a{font-size:10px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{padding:2px;margin-top: -19px; margin-left: 46px;font-size:11px;} #featured-products_block_center li span.price{font-size:11px;} } @media only screen and (min-width:488px) and (max-width:773px){#featured-products_block_center{width:55%;} #featured-products_block_center li{width: 90px; height: 200px; margin:21px 8px 1px 14px; padding: 1px 7px} img.pring{width:80px;height:80px;} #featured-products_block_center li span.price{font-size:9px;} #featured-products_block_center p.title_block{text-align:center;font-size:12px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:10px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{font-size:8px;padding:1px;margin-top: -19px; margin-left: 39px;} } @media only screen and (max-width:487px) and (min-width:0px){#featured-products_block_center{width:30%; padding: 5px 0px 3px 0px;} #featured-products_block_center li{width: 80px; height: 180px; margin: 22px 7px 1px 30px; padding: 1px 7px} img.pring{width:74px;height:74px;} #featured-products_block_center p.title_block{text-align:center;font-size:10px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:9px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-top: -18px; margin-left: 29px;padding:0px;font-size:8px;} #featured-products_block_center li span.price{letter-spacing:0px;font-size:9px;margin-left:0px;} #featured-products_block_center li.last_item_of_line{display:none;} } My Homefeatured.tpl: <!-- MODULE Home Featured Products --> <div id="featured-products_block_center" class="block products_block clearfix"> <h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4> {if isset($products) AND $products} <div class="block_content"> {assign var='liHeight' value=250} {assign var='nbItemsPerLine' value=4} {assign var='nbLi' value=$products|@count} {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines} {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight} <ul style="height:{$ulHeight}px;"> {foreach from=$products item=product name=homeFeaturedProducts} {math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo} {if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if} <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}"> <a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a> <h5 class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5> <div class="product_desc"><a href="{$product.link|escape:'html'}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div> <div> {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if} {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE} {if ($product.quantity > 0 OR $product.allow_oosp)} <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')|escape:'html'}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a> {else} <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span> {/if} {else} <div style="height:23px;"></div> {/if} </div> </li> {/foreach} </ul> </div> {else} <p>{l s='No featured products' mod='homefeatured'}</p> {/if} </div> <!-- /MODULE Home Featured Products --> Thanks for your help!

I have the homefeatured module. I have edited the CSS. When going to my homepage of my site (and using any browser), if i take the corner of the browser and drag the mouse so the browser window gets larger or smaller, the 4 products in my homefeatured change sizes. I need them to stay fixed. If they become too small the rest of the buttons appear outside of the frames. My site is: http://tinyurl.com/n5pfy52

I need help with a few things. I've looked and tried just about everything. First for the Homefeatured block where it says Featured Products. I'd like to move that header over to match the content on the right side. (Shown by the red arrow). Everytime I make an edit it changes the margin for the New Products block also, I just want the featured products to change. Next The Product title that is circled in red. I need help changing that. Everytime I change that, other words change in different blocks. How do I specify just for that area that is circled? Last, When hovering over viewed products, specifically the top one, it gets really jumpy and the border bounces around. Can anyone help me fix that?

I was making changes to my Homefeatured Block. Until recently the changes I input to my css doesn't change anything. Using the inspection tool hasn't helped either. Could it be a setting in the BO with Performance? I've tried that too and it didn't help. Thanks!

On my home page I have the homefeatured module. I have a lot of transitions and it is making my site out of control. Say for example you try to hover to the Read More on one of the products. While doing so, all the text is jumping up and down. I still want transitions, but I think the areas need to be defined more so they don't make my text jump. I've tried to fix this and I can't figure it out. Can anyone help? Thanks! My site is: http://tinyurl.com/n5pfy52

I can not Increase the number of Featured Product on my home page, neither can I increase the new products, nor the special products. They all have 10 items each... which keep circulating since my theme makes them move. http://bodyvibes.org/index.php? I have currently uploaded 43 products, they are all new, and since there is a discount on most of them about 39 of them fall into the special category too. But the page has decided on the 10 it wants display under each heading, and those are the only 10 that get displayed. I want the page to display all of the items in each category as the items keep moving. What can I do?

Buenas tardes, Soy nuevo en Prestashop pero estoy aprendiendo rápido. Estoy diseñando una tienda que espero poder lanzar dentro de poco. Ayer aprendí a través de tutoriales online a "inspeccionar elementos" de mi página con Google Chrome y experimentar con modificaciones hasta obtener el resultado deseado y después trasladarlo al archivo css correspondiente mediante el Notepad++ El caso es que mientras en la mayoría de los casos de las modificaciones puedo ver en la esquina superior derecha del inspeccionador el nombre del archivo que debe modificar, en una que acabo de hacer no veo el archivo, ni la línea en la que debe ir la modiciación. Concretamente he intentado modificar el top-margin del módulo "homefeatured.css" ya que se montaba el nombre del artículo con la descripción pero no se dónde incluir la modificación del "element.style"... adjunto una foto para que podais ver a lo que me refiero... Os agradezco mucho vuestra ayuda de antemano. Un saludo