Resolved - Modifying "Latest Products" div

[M. Smith]

I would like to make a dark gray box around the Latest Products section of my home page like the one at the top of the page: http://frontline-games.com/shop/

I tried changing its div container it on the content.homepage.php page to <div id="annoucement"> to match the one I modified for the top of the page, but it only surrounds the header. I'm familiar with html/css, but not PHP. Here's what I have for the content.homepage.php:

{if isset($DOCUMENT)}

<div id="announcement">

{$document.content}

</div>

{/if}

{if isset($LATEST_PRODUCTS)}

<div id="announcement">

<h2>{$LANG.catalogue.latest_products}</h2>

{foreach from=$LATEST_PRODUCTS item=product}

<div class="latest_product">

<form action="{$VAL_SELF}" method="post" class="addForm">

<p class="image">

<a href="{$product.url}" title="{$product.name}">

<img src="{$product.image}" alt="{$product.name}" />

</a>

</p>

<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name|truncate:38:"&hellip;"}</a></p>

{if $product.ctrl_sale}

<p class="price"><span class="price_previous">{$product.price}</span> <span class="price_sale">{$product.sale_price}</span></p>

{else}

<p class="price">{$product.price}</p>

{/if}

<p class="actions">

<a href="{$product.url}" title="{$product.name}" class="button_black">{$LANG.common.info}</a>

<input type="hidden" name="add" value="{$product.product_id}" />

{if $product.ctrl_stock && !$CATALOGUE_MODE}

<input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" />

{elseif !$CATALOGUE_MODE}

<input type="submit" value="{$LANG.catalogue.out_of_stock_short}" class="button_white disabled" disabled="disabled" />

{/if}

</p>

</form>

</div>

{/foreach}

</div>

{/if}

[bsmither]

First, having more than one DOM element with the same ID is generally frowned upon. If there exists a javascript routine that wants to do something with the announcement div, there will be some consternation trying to decide which is the real div and which is the clone.

There is nothing wrong with adding CSS class announcement2 and joining them, like such:

#announcement, .announcement2 {

background: none repeat scroll 0 0 #434343;

border: 1px solid #000000;

margin: 10px;

width: 90%;

}

In the content.homepage.php file, near the end, make it look like this:

</p>

</form>

</div>

{/foreach}

<br clear='all' /></div>

{/if}

Or you can use:

<p style="clear: both; height: 1px;">&nbsp;</p> instead of the <br>.

[M. Smith]

Worked like a charm. Thanks! :-D