[SOLVED] Change the 'New Product' design in product list

[generalexperts]

I am have modified my New product look. And I don't like it so I am trying to shoot for something like this shown below. I actually tried this before. The main issue I'm having is when I move the "New" part it only goes as high as the image height. Shown that I outlined in red. I deleted the img border on my site. I would like the NEW to go up to the very top. Can anyone help me out on how to do that? Thanks!

 

 

Edited April 4, 2014 by generalexperts (see edit history)

[generalexperts]

Still looking for help... I'm using Prestashop 1.5.4.1.

 

Thanks

[PascalVG]

Hi GE,

 

The problem is the:

display:block

 

in the <a class="Product_img_link>

 

themes/<your theme folder>/css/product_list.css (line 148): (Backup first, just in case!)

#product_list a.product_img_link {
    overflow: hidden;
    position: relative;
    /*display: block;*/            <-- comment this line out
    border: 0 solid #ccc;
    text-align: center;
    margin: auto;
}

 

From there, you can get out of the link box and get all the way to the edge of the bordered box. For example like this:

 

themes/<your theme folder>/css/product_list.css (line 161):

#product_list li span.new {
    position: absolute;
    top: -95px;
    left: 95px;
    width: 75px;
    font-size: 30px;
    color: #25aae1;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1.3px 0.3px 0.3px #4D4D4D;
    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(45deg);
    -o-transform:rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);            /* Newer browsers */
}

 

Which results in something like:

 

Hope this is about what you want,

pascal

[PascalVG]

N.B. Off topic, saw that in the product-list your boxes aren't the same size, depending on the length of the product name:

 

 

to fix:

themes/<your theme folder>/css/product_list.css (line 138):

 

#product_list li .center_block h3 {
font-size: 16px;
padding-top: 10px;
margin-top: 10px;
display: block;
width: 100%;
clear: both;
text-align: center;
height: 40px;               <-- add this line
}

 

Hope you like it :-)

pascal

[generalexperts]

I got it solved. I removed the word 'new' from the product-list.tpl.

 

{if isset($product.new) && $product.new == 1}<span class="new">{l s=''}</span>{/if}

 

Then I went to the product-list.css and changed

 

#product_list li span.new {
    background:url("/modules/blocknewproducts/img/NEW.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display:block;
    height:62px;
    left:105px;
    position:absolute;
    top:-122px;
    width:30px;
    z-index:3;

 

and it works!! Thanks for the help!

Edited April 4, 2014 by generalexperts (see edit history)