[SOLVED] homenewproducts.css

generalexperts · August 28, 2014

I made some changes to the new products module and for some reason I can click on the 1st product details but the 2nd one below it has something covering it so I can't click on it. I would appreciate any help on this, thank you!!

Edited August 30, 2014 by generalexperts (see edit history)

PSfever.com · August 28, 2014

By detail you mean the read more button?

I can click on both with no problems.

However I would fiddle around with the css, because setting negative margins and heights to some divs just to place elements correctly is a wrong way to go. Sooner or later similar problems will pop up.

generalexperts · August 28, 2014

Thanks for the reply. It works in IE and Mozilla but not in Chrome. How would I apply changes to just Chrome? Yeah negative margins was the only thing I could get to work. If you know how to clean that up, I would appreciate it!

PSfever.com · August 28, 2014

Please don't use negative margins..at least not in this context.

I would start off with you deleting the margins, then let me know, I could take a look at it.

generalexperts · August 28, 2014

I have made everything with negative margins. Can anyone take a look? Sight looks pretty bad right now

Thanks!!

My site: http://tinyurl.com/n5pfy52

PSfever.com · August 29, 2014

I've been working yesterday till late night, couldn't respond..

I would do the following - in the .tpl file, change the order of h2 and the anchor with image, by placing h2 above anchor.

Then add the view button into the anchor, below the image.

Let me know (here in this thread, no need to PM) when you recomplile the theme.

Then we can work with some css

generalexperts · August 29, 2014

Ok I made some modifications but not sure if they are 100% correct. Here is the original tpl

<!-- MODULE Home new Products -->
<div id="featured-products_block_left" class="block products_block clearfix">
	<h4 class="title_block">{l s='New products' mod='homenewproducts'}</h4>
	{if isset($products) AND $products}
		<div class="block_content">
			{assign var='liHeight' value=200}
			{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=homeNewProducts}
				{math equation="(total%perLine)" total=$smarty.foreach.homeNewProducts.total perLine=$nbItemsPerLine assign=totModulo}
				{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
				<li class="ajax_block_product {if $smarty.foreach.homeNewProducts.first}first_item{elseif $smarty.foreach.homeNewProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeNewProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeNewProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeNewProducts.iteration > ($smarty.foreach.homeNewProducts.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='' mod='homenewproducts'}</span>{/if}</a>
					<h2 class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:45:'...'|escape:'htmlall':'UTF-8'}</a></h2>
					<div class="product_desc"><a href="{$product.link|escape:'html'}" title="{l s='More Details' mod='homenewproducts'}">{$product.description_short|strip_tags|truncate:75:'...'}</a></div>
					<div>
						<a class="lnk_more" href="{$product.link|escape:'html'}" title="{l s='Read More' mod='homenewproducts'}">{l s='Read More' mod='homenewproducts'}</a>
						{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='homenewproducts'}">{l s='Add to cart' mod='homenewproducts'}</a>
							{else}
							<span class="exclusive">{l s='Add to cart' mod='homenewproducts'}</span>
							{/if}
						{else}
							<div style="height:23px;"></div>
						{/if}
					</div>
				</li>
			{/foreach}
			</ul>
		</div>
	{else}
		<p>{l s='No new products' mod='homenewproducts'}</p>
	{/if}
</div>
<!-- /MODULE Home new Products -->

Edited August 29, 2014 by generalexperts (see edit history)

PSfever.com · August 29, 2014

AS I said.

Move H2 before anchor (just switch those two)

Move the entire anchor with class lnk_more prior to the img, inside the other anchor.

generalexperts · August 29, 2014

I guess I don't understand where you want the lnk_more to go exactly.

<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='' mod='homenewproducts'}</span>{/if}<a class="lnk_more" href="{$product.link|escape:'html'}" title="{l s='Read More' mod='homenewproducts'}">{l s='Read More' mod='homenewproducts'}</a></a>

PSfever.com · August 30, 2014

Try this as homefeatured.css

#featured-products_block_left li {
padding:10px 0;
width:190px;
height:200px
}
#featured-products_block_left li.last_item_of_line  {margin-right:0;}
#featured-products_block_left .s_title_block {
height:20px;
font-size:14px;
color:#4d4d4d;
padding-left: 4px;
font-weight:bold;
width:181px;
padding-right:4px;


margin: 0 auto;
}


#featured-products_block_left .product_desc a:hover {
background:rgba(37, 170, 225, 0.8);
color:#fff;
  transition: .5s ease-in .5s;
  -webkit-transition:.5s ease-in .5s;
  padding-left:4px;
  padding-right:4px;
  text-decoration:none;
  width:181px;
}
#featured-products_block_left .s_title_block:hover {
background:rgba(37, 170, 225, 0.8);
color:#fff;
  transition: .5s ease-in .5s;
  -webkit-transition:.5s ease-in .5s;
  text-decoration:none;
  width:181px;
}




#featured-products_block_left h2 {
padding-top:5px;
height:30px;
font-size:12px;
color:#25aae1;
padding-bottom: 0;
font-weight:bold;
margin-top:130px;
}


#featured-products_block_left .product_image {
display:block;
position:relative;
overflow:hidden; /*image height*/
margin-right:32px;
margin-top:22px;
z-index:-1;
}




/*#featured-products_block_left .product_image span.new {
display: block;
position: absolute;
top: 15px;
right:30px;
padding: 1px 4px;
width: 101px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform: rotate(45deg);
background-color: #990000;
transform: rotate(45deg);  /* Newer browsers */


#featured-products_block_left .product_desc {
height:0px;
}
#featured-products_block_left .product_desc a {
color:#666;
margin-top: 0px;
padding: 0 4px;


}
#featured-products_block_left .lnk_more {
display:block;
padding-right:10px;
font-weight:bold;
font-size:13px;
color:#fff;
background:rgba(56, 56, 56, 0.6);
box-shadow:#383838 0 2px 1px;
-webkit-box-shadow:#383838 0 2px 1px;
text-decoration:none;
padding:5px;
margin-top: 0;
text-align:center;
margin-left: 35px;
margin-right: 31px;
z-index:99;
}
#featured-products_block_left .lnk_more:hover {
background:rgba(37, 170, 225, 0.9);
transition: .5s ease-in .7s;
}
#featured-products_block_left .price_container {
visibility:hidden;
}
/*#featured-products_block_left  .price_container {
margin-top:100px;
padding:0;
margin-right:40px;
margin-left:122px;
} */
#featured-products_block_left .price {
font-weight:bold;
font-size:14px;
color:#25aae1;
}
#featured-products_block_left li .ajax_add_to_cart_button {display:none;}
#featured-products_block_left li span.exclusive {display:none;}


#featured-products_block_left .block ul {
border:3px solid #4d4d4d;
}

PSfever.com · August 30, 2014

After that you can fiddle around with css, but the general mark up is going to be fine I guess

generalexperts · August 30, 2014

Thanks for your help! I came up with...

#featured-products_block_left li {
	margin-right:10px;
	padding:5px 0;
	width:190px;
	height:250px
}
#featured-products_block_left li.last_item_of_line  {margin-right:0;}
#featured-products_block_left .s_title_block {
	margin-top:0px;
	height:20px;
	font-size:14px;
	color:#4d4d4d;
	padding-left: 4px;
	font-weight:bold;
	width:181px;
	padding-right:4px;
	
}

#featured-products_block_left .product_desc a:hover {
	color:#25aae1;
  transition: .5s ease-in .5s;
  -webkit-transition:.5s ease-in .5s;
  padding-left:6px;
  padding-right:4px;
  text-decoration:none;
  width:181px;
}
#featured-products_block_left .s_title_block:hover {

	color:#25aae1;
  transition: .5s ease-in .5s;
  -webkit-transition:.5s ease-in .5s;
  text-decoration:none;
  width:181px;
}


#featured-products_block_left h2 {
	padding-top:5px;
	height:30px;
	font-size:12px;
	color:#25aae1;
	padding-bottom: 0;
	font-weight:bold;
	margin-top:130px;
}

#featured-products_block_left .product_image {
	display:block;
	position:relative;
	overflow:hidden;
}


/*#featured-products_block_left .product_image span.new {
	display: block;
	position: absolute;
	top: 15px;
	right:-30px;
	padding: 1px 4px;
	width: 101px;
	font-size:10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform: rotate(45deg);
	background-color: #990000;
	transform: rotate(45deg);  /* Newer browsers */

#featured-products_block_left .product_desc { /*styles?*/

}
#featured-products_block_left .product_desc a {
	color:#666;
	padding-top:4px;
	padding-bottom:20px;	
	padding-left:6px;
}
#featured-products_block_left .lnk_more {
	display:block;
	font-weight:bold;
	font-size:13px;
	background:rgba(37, 170, 225, 0.9);
	color:#fff;
	box-shadow:#383838 0 2px 1px;
	-webkit-box-shadow:#383838 0 2px 1px;
	text-decoration:none;
	padding:5px;
	text-align:center;
	margin-left:33px;
	margin-right:33px;
	margin-top:0px;
}
#featured-products_block_left .lnk_more:hover {
	background: rgba(56, 56, 56, 0.6);
	transition: .5s ease-in .7s;
	color:#fff;
}
#featured-products_block_left .price_container {
	visibility:hidden;
}
/*#featured-products_block_left  .price_container {
	margin-top:-100px;
	padding:0;
	margin-right:40px;
	margin-left:122px;
} */
#featured-products_block_left .price {
	font-weight:bold;
	font-size:14px;
	color:#25aae1;
}
#featured-products_block_left li .ajax_add_to_cart_button {display:none;}
#featured-products_block_left li span.exclusive {display:none;}

#featured-products_block_left .block ul {
	border:3px solid #4d4d4d;
}

[SOLVED] homenewproducts.css

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in