SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for Image Alignment and Resize

    Hi all,

    I am thrown into this whole junk of coding, hope I am able to seek some sort of help here, any help is greatly appreciated.

    Please reference to this link.

    There are basically 2 things I wanted to achieve here.

    1. I want to have 4 items listed per row instead of the 3 items now.

    2. I wish to increase the size of the image(667 x 1001) but to no avail.

    I wanted to paste the CSS code here but it is too long for a post. So I hope you can view the page source or from firebug.

    Let me know if anyone needs further information.

    Thank you and looking forward to favourable replies, have a nice day!

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi kianboon.

    I want to have 4 items listed per row instead of the 3 items now.
    What access do you have to the code? It's easy enough to add an extra <li> to each row, but then you need to resize everything (images, widths etc.) to fit on one line.

    I wish to increase the size of the image(667 x 1001) but to no avail.
    Which image?

    And how are you trying to resize it?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for the reply.

    I have full access to the code, including FTP credentials.

    I am trying to achieve something like this.

    Let me know what else you need, I will be very glad to be of help.

    Regards,
    Chris.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here's a stripped down version of your page with an extra item added in. I've made some CSS changes (using !important, but just change them in the actual style sheet) and made some changes to the size of images, though it would be best to change the actual size of the images too.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/styles.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/widgets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/print.css" media="print" />
    
    <style>
    .products-grid li.item {
    float: left;
    width: 175px !important; /* was 200px */
    padding: 20px 0 !important;  /* was 20px 10px */
    border: 0px solid #DDD;
    margin-right: 0 !important; /* was 16px */
    margin-bottom: 16px;
    }
    
    .products-grid .product-image {
    display: block;
    width: 175px; /* was 225px */
    height: 175px; /* was 225px */
    margin: 0 auto;
    }
    </style>
    
    </head>
    <body class=" catalog-category-view categorypath-shop-new-arrivals-mens-html category-mens">
    
    
    <div id="wrapper"> <script type="text/javascript" src="https://www.clothingrepublic.com/skin/frontend/clothing/default/chromejs/chrome.js"></script>
    
      <div id="catalog-holder">
        
        <div id="catalog-list-holder">
          <div id="catalog-list-left" style="width: 150px; height: 320px; background: #e7e7e7;">
    		<div id="catalog-categories-holder">       
    	
    </div></div>
    <div id="catalog-list-right">
    <div class="page-title category-title">
            <h1>Mens</h1>
    </div>
    
    
    <div class="category-products">
         
    	<ul class="products-grid" style="padding-top:16px;">
    		<li class="item first">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_white.jpg" width="175" height="175" alt="COOL HEAD IN WHITE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    											
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)">COOL HEAD IN WHITE (MENS)</a></h2>
    			      
    			<div class="price-box">
    			<span class="regular-price" id="product-price-564">
    			<span class="price">S$25.00</span></span>         
    			</div>
    			</div>	                				
    			<div>
    			</div>
    		</li>
    	                                    
    	                                    
    		<li class="item">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>								
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
    			<div class="price-box">
    			<span class="regular-price" id="product-price-569">
    			<span class="price">S$25.00</span></span>                   
    			</div>
    			</div>                				
    			<div>
    			</div>				
    		</li>
    	                 
    	      
    		<li class="item">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->				
    							
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    											
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
    			       
    			<div class="price-box">
    			<span class="regular-price" id="product-price-569">
    			<span class="price">S$25.00</span> </span>
    			</div>
    			</div>
    			<div>
    			</div>
    		</li>
    	
    		
    		<li class="item last">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/u/r/urt.jpg" width="175" height="175" alt="URT"/></a>
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT">URT</a></h2>
    			<div class="price-box">
    			<span class="regular-price" id="product-price-780">
    			<span class="price">S$25.00</span>                </span>
    			</div>
    			</div>
    			<div>
    			</div>
    		</li>
    	
    	</ul>
                                    
    </div>
    </body>
    </html>
    To test this code, make up a .html page on your desktop, paste in this code, and open the page in your browser. See if that's what you want.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Here's a stripped down version of your page with an extra item added in. I've made some CSS changes (using !important, but just change them in the actual style sheet) and made some changes to the size of images, though it would be best to change the actual size of the images too.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/styles.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/widgets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/print.css" media="print" />
    
    <style>
    .products-grid li.item {
    float: left;
    width: 175px !important; /* was 200px */
    padding: 20px 0 !important;  /* was 20px 10px */
    border: 0px solid #DDD;
    margin-right: 0 !important; /* was 16px */
    margin-bottom: 16px;
    }
    
    .products-grid .product-image {
    display: block;
    width: 175px; /* was 225px */
    height: 175px; /* was 225px */
    margin: 0 auto;
    }
    </style>
    
    </head>
    <body class=" catalog-category-view categorypath-shop-new-arrivals-mens-html category-mens">
    
    
    <div id="wrapper"> <script type="text/javascript" src="https://www.clothingrepublic.com/skin/frontend/clothing/default/chromejs/chrome.js"></script>
    
      <div id="catalog-holder">
        
        <div id="catalog-list-holder">
          <div id="catalog-list-left" style="width: 150px; height: 320px; background: #e7e7e7;">
    		<div id="catalog-categories-holder">       
    	
    </div></div>
    <div id="catalog-list-right">
    <div class="page-title category-title">
            <h1>Mens</h1>
    </div>
    
    
    <div class="category-products">
         
    	<ul class="products-grid" style="padding-top:16px;">
    		<li class="item first">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_white.jpg" width="175" height="175" alt="COOL HEAD IN WHITE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    											
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)">COOL HEAD IN WHITE (MENS)</a></h2>
    			      
    			<div class="price-box">
    			<span class="regular-price" id="product-price-564">
    			<span class="price">S$25.00</span></span>         
    			</div>
    			</div>	                				
    			<div>
    			</div>
    		</li>
    	                                    
    	                                    
    		<li class="item">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>								
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
    			<div class="price-box">
    			<span class="regular-price" id="product-price-569">
    			<span class="price">S$25.00</span></span>                   
    			</div>
    			</div>                				
    			<div>
    			</div>				
    		</li>
    	                 
    	      
    		<li class="item">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
    							
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->				
    							
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    											
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
    			       
    			<div class="price-box">
    			<span class="regular-price" id="product-price-569">
    			<span class="price">S$25.00</span> </span>
    			</div>
    			</div>
    			<div>
    			</div>
    		</li>
    	
    		
    		<li class="item last">
    			<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/u/r/urt.jpg" width="175" height="175" alt="URT"/></a>
    			<!--div class="out-stock-label">
    			<div class="out-label">
    			<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
    			</div>
    			</div-->
    			<div class="out-stock-label">
    			<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
    			</div>
    			<div style="display:block" class="gridli">
    			<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT">URT</a></h2>
    			<div class="price-box">
    			<span class="regular-price" id="product-price-780">
    			<span class="price">S$25.00</span>                </span>
    			</div>
    			</div>
    			<div>
    			</div>
    		</li>
    	
    	</ul>
                                    
    </div>
    </body>
    </html>
    To test this code, make up a .html page on your desktop, paste in this code, and open the page in your browser. See if that's what you want.
    Hi Ralph,

    This works perfectly as usual. However, I notice that the images are grabbed from the Magento backend whereby I upload the products.

    This is the code for the actual page for listing of the products.

    Code:
    <?php
    /**
     * Magento
     *
     * NOTICE OF LICENSE
     *
     * This source file is subject to the Academic Free License (AFL 3.0)
     * that is bundled with this package in the file LICENSE_AFL.txt.
     * It is also available through the world-wide-web at this URL:
     * http://opensource.org/licenses/afl-3.0.php
     * If you did not receive a copy of the license and are unable to
     * obtain it through the world-wide-web, please send an email
     * to license@magentocommerce.com so we can send you a copy immediately.
     *
     * DISCLAIMER
     *
     * Do not edit or add to this file if you wish to upgrade Magento to newer
     * versions in the future. If you wish to customize Magento for your
     * needs please refer to http://www.magentocommerce.com for more information.
     *
     * @category    design
     * @package     base_default
     * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
     * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
     */
    ?>
    
    <?php
    /**
     * Product list template
     *
     * @see Mage_Catalog_Block_Product_List
     */
    ?>
    <?php
        $_productCollection=$this->getLoadedProductCollection();
        $_helper = $this->helper('catalog/output');
    ?>
    
    <?php if(!$_productCollection->count()): ?>
    <p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
    <?php else: ?>
    <div class="category-products">
        <?php echo $this->getToolbarHtml() ?>
        <?php // List mode ?>
        <?php if($this->getMode()!='grid'): ?>
        <?php $_iterator = 0; ?>
        <ol class="products-list" id="products-list">
        <?php foreach ($_productCollection as $_product): ?>
            <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
                <?php // Product Image ?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <?php // Product description ?>
                <div class="product-shop">
                    <div class="f-fix">
                        <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                        <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product) ?>
                        <?php endif; ?>
                        <?php echo $this->getPriceHtml($_product, true) ?>
    					
    					<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
    	                <?php if($_productTmp->getData('reward_point_product')):?>
    					<p style="clear:left;">
    						<?php echo Mage::helper("rewardpoints")->__("Earn %s",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
    					</p>
    	                <?php endif;?>
    					
                        <?php if($_product->isSaleable()): ?>
                            <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <div class="desc std">
                            <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="link-more"><?php echo $this->__('Learn More') ?></a>
                        </div>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
            </li>
        <?php endforeach; ?>
        </ol>
        <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
    
        <?php else: ?>
    
        <?php // Grid Mode ?>
    
        <?php $_collectionSize = $_productCollection->count() ?>
        <?php $_columnCount = $this->getColumnCount(); ?>
        <?php $i=0; foreach ($_productCollection as $_product): ?>
            <?php if ($i++%$_columnCount==0): ?>
            <ul class="products-grid" style="padding-top:16px;">
            <?php endif ?>
                <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>" width="200" height="200" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/></a>
    				
    				<?php //if($_product->getnewlabel ()): ?>
    				<!--div class="out-stock-label">
    					<div class="out-label">
    						<img src="<?php echo $this->getSkinUrl('images/newtag.png'); ?>" alt="" title="" border="0">
    					</div>
    				</div-->
    				<?php //endif; ?>
    				
    				
    				<?php if ($_product->getnewlabel()):?>
    					<?php $img_ico = $_product->getResource()->getAttribute('newlabel')->getFrontend()->getValue($_product); ?>
    					<div class="out-stock-label">
    					<div class="out-label"><img src="<?php echo $this->getSkinUrl('images/'.$img_ico.'.png'); ?>" /></div>
    					</div>
    				<?php endif;?>
    				
    				<div style="display:block" class="gridli">
                    <h2 class="product-name" align="center"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>
                    <?php echo $this->getPriceHtml($_product, true) ?>
    				</div>
    				
    				<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
                    <?php if($_productTmp->getData('reward_point_product')):?>
    				<p>
    					<?php echo Mage::helper("rewardpoints")->__("Earn <b>%s</b>",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
    				</p>
                    <?php endif;?>
    				
                    <div>
                        <?php if($_product->isSaleable()): ?>
                            
                        <?php else: ?>
                            <div class="out-stock-label">
    							<div class="out-label">
    								<img src="<?php echo $this->getSkinUrl('image/outstock.png'); ?>" alt="" title="" border="0"/>
    							</div>
    						</div>
                        <?php endif; ?>
                    </div>
    				
                </li>
            <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
            </ul>
            <?php endif ?>
            <?php endforeach ?>
            <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
        <?php endif; ?>
    
        <div class="toolbar-bottom">
            <?php echo $this->getToolbarHtml() ?>
        </div>
    </div>
    <?php endif; ?>
    Let me know if you need anything else, thanks for the great help so far.

    Chris


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •