Resolved - category view with icons instead of list

[Guest irrimiri]

Hi everyone,

I couldn't find any tips on this topic yet, so I started a new thread for it

Perhaps there is someone who can help me with this issue.

At the moment I am customizing my shop and I was wondering how I could get the same category view of the Nota skin for my Mican based skin.

I found the content.category.php templates of both skins and kinda hoped I could go from there..

What I did was the following: I tried to simpy copy/paste the information from the Nota template to the Mican template, but that of course didn't work. Too simple a solution I guess, haha.

But from here I am out of ideas. I know a basic bit of customizing, but when it comes to making bigger changes I am just guessing and trying out.

Does anyone know if there is something I should look at as well next to a change to the content.category.php file of my current skin? Or does anyone know what the right change would be?

I added an image to the attachment to show you what I would like to see as a result.

Is there anybody who can give me a tip or knows what to change? Is it simple or perhaps quite complicated?

Thanks very much in advance!!

Kind Regards,

Miriam

- - - - -- - - - -- - - - -- - - - -- - - - -- - - - -- - - - -- - - - -

This is the content.category.php code from the Nota skin:

<div class="title_swipe"><h2>{$category.cat_name}</h2></div>

{if isset($category.image)}

<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>

{/if}

{$category.cat_desc}

{if $SUBCATS}

<div id="subcategories">

{foreach from=$SUBCATS item=subcat}

<div class="subcategory">

<a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" />

</a>

<a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a>

</div>

{/foreach}

</div>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

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

</a>

<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name}</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}

<!--

<div class="details">

{if $product.review_score}

<p class="rating">

{for $i = 1; $i <= 5; $i++}

{if $product.review_score >= $i}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star.png" alt="" />

{elseif $product.review_score > ($i - 1) && $product.review_score < $i}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_half.png" alt="" />

{else}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_off.png" alt="" />

{/if}

	 {/for}

</p>

<p class="rating-info">{$LANG_REVIEW_INFO}</p>

{/if}



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

<p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" /></p>

{elseif $product.out}

<p class="buy_button">{$LANG.catalogue.out_of_stock_short}</p>

{/if}

</div>

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

-->

</div>

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

This is the content.category.php code from the Mican skin in which I am currently working:

<h2>{$category.cat_name}</h2>

{if isset($category.image)}

<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>

{/if}

{$category.cat_desc}

{if $SUBCATS}

<div id="subcategories">

{foreach from=$SUBCATS item=subcat}

<div class="subcategory">

<p><a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /><br />

</a><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>

</div>

{/foreach}

</div>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

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

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

</a>

<div class="details">

{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}

{if $product.review_score}

<p class="rating">

{for $i = 1; $i <= 5; $i++}

{if $product.review_score >= $i}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star.png" alt="" />

{elseif $product.review_score > ($i - 1) && $product.review_score < $i}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_half.png" alt="" />

{else}

<img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_off.png" alt="" />

{/if}

	 {/for}

</p>

<p class="rating-info">{$LANG_REVIEW_INFO}</p>

{/if}



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

<p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_default" /></p>

{elseif $product.out}

<p class="buy_button">{$LANG.catalogue.out_of_stock_short}</p>

{/if}

</div>

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

</div>

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

[bsmither]

Keeping everything else untouched in the Mican skin file, grab just this part from the Nota skin:

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

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

</a>

<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name}</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}

</div>

</form>

{/foreach}

and replace the same range of code in the Mican skin.

It still won't look like Nota because you also need to copy over the Nota CSS for 'category_product' replacing 'category_product' in the Mican CSS.

(Assuming Nota actually looks like the right-hand image of your screenshot.)

[Guest irrimiri]

Thanks very much for posting bsmither!

I tried copying that particular part of the php code earlier, but indeed it didn't look correct yet . The products and product images were still arranged in a list build underneath each other, instead of a list of thumbnails.

But I was wondering about that. You say I also need to make changes in the common.css. But how can the Css change the way this page was build up?

I thought CSS was only about styling, changing colours and sizes of images for example. And the php is partly showing how a page is actually build up right? Or maybe I am misunderstanding.

Also, I tried to see how I could change the category_product info from the common.css file, but it looks like it can't be done without major changes of the skin how it currently looks.

Both common.css files are build up completely different at some parts.

For example, a lot of the 'category_product' parts in the Nota skin are combined with other parts of the site for styling.

Hmm I am not sure if I can do this. Pity

Thanks very much though.

[bsmither]

"I tried copying that particular part of the php code earlier, but indeed it didn't look correct yet . The products and product images were still arranged in a list build underneath each other, instead of a list of thumbnails."

When messing about with the skins, you should always Clear the Cache (admin, Maintenance, Rebuild tab, Clear cache). This will remove copies of the skin files that the templating engine (called Smarty) builds for itself. Also, in admin, Store Settings, Advanced tab, Performance group, Disabling the Cache may save you some grief about always clearing the cache.

Looking carefully at the relevant sections of code for the Nota and Mican skin file, we see no evidence of breaks, tables, alignments, or anything else that would cause 'position'. What we do see is only content about the product: title, link, image, price, etc.

Everything is in a div tag with a class, and we instruct the browser how to display that div.

By replacing the relevant section of code as discussed - which gives us a different selection of the product's content (that is, no brief description, no Add to Basket, no review score), and then also use Nota's CSS for div.category_product{float:left; height:225px; margin-right:5px; width:181px;} replacing that for Mican's div.category_product at line 492 in Mican's common.css file.

There can be CSS rules in the Mican common.css file that you can leave alone. For example:

div.category_product div.details (line 507)

Using the section of code from the Nota skin, we see there doesn't exist a div with class details. So that CSS rule won't be used.

[Guest irrimiri]

Dear bsmither,

Thanks so much for this help.

I kinda managed to make it look the way I wanted it (stupid to forget about the caching), though for some reason the bottom 'pagination / sort order' part has now expanded and is showing behind the products

I am not sure if it's floating behind the images.

You can see it here:

http://boskaartjes.n...cat_id=6&page=2

I tried changing the height of pagination in common.css but that didn't do a thing.

Not sure if I should change something there.

And I also need to see if I can get the titles of the products to float underneath the images instead on the right to the image. (found it)

This is the current php code. I think it's now correct?

Again thanks so much for assisting me. I am finally getting somewhere!!

-Miriam

<h2>{$category.cat_name}</h2>

{if isset($category.image)}

<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>

{/if}

{$category.cat_desc}

{if $SUBCATS}

<div id="subcategories">

{foreach from=$SUBCATS item=subcat}

<div class="subcategory">

<p><a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /><br />

</a><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>

</div>

{/foreach}

</div>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

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

</a>

<p class="title"><a href="{$product.url}" title="{$product.name}">{$product.name}</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}

</div>

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

[bsmither]

I would like for you to find this - currently below the second pagination block:

<p style="clear: both; height: 1px;">&nbsp;</p>

And move it above that second instance of the pagination block - it begins with:

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

[Guest irrimiri]

Hi bsmither,

I can't find any code that looks like

<p style="clear: both; height: 1px;">&nbsp;</p>

It's not in the php file, nor the common.css style.

In what file did you think this code would be?

Sorry for the confusion. I simply can't find it *^^*

thanks!

Miriam

[bsmither]

I looked at the HTML source as it was delivered to my browser.

If that paragraph is not in the content.category.php file, then it must be in the main.php file. Well, leave it there.

Then just add that paragraph where I mentioned.

[Guest irrimiri]

Thanks again!

EDITED this post: (I noticed that I didn't add the piece of code after the last {/if} tag and fixed that)

But adding the bit of code still didn't do the trick. It gave an extra change to the layout. (see image).

I added the part to the content.category.php file, but it made the products change place and start under the featured image.

The pagination part still hoovers behind the product images the way it did before.

And the site document box widened.

And is there any way to add the buy-now button to it again?

Thanks again for your time!

[Guest irrimiri]

edited previous post *^^*

[Guest irrimiri]

Hi again bsmither,

I hope it's okay to bump this topic.

Just now I realized I didn't read your instructions correctly. What I did now is change the place of the code you gave me just ABOVE the 2nd pagination block.

It did the trick for the pagination block itself. But there is one thing it also did.

It moved the entire block of images underneath the featured image. (like in the image I send in the previous post).

http://boskaartjes.n...xample-shop.jpg

It also removed the whole block with the site documents.

This is the new code of content_category.php

I hope you have some time for me to solve this (hopefully) one last thing.

It's really appreciated that you helped me in the first place

<h2>{$category.cat_name}</h2>

{if isset($category.image)}

<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>

{/if}

{$category.cat_desc}

{if $SUBCATS}

<div id="subcategories">

{foreach from=$SUBCATS item=subcat}

<div class="subcategory">

<p><a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /><br />

</a><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>

</div>

{/foreach}<br />{/if}

</div><br />

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

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

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

{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}

</div>

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

<p style="clear: both; height: 1px;">&nbsp;</p>

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

[bsmither]

Find this at about line 9:

<div class="subcategory">

<p><a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /><br />

</a><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>

</div>

{/foreach}<br />{/if}

</div><br />

Remove the very last </div> that you see in the above code snippet.



Then find this about 20 lines up from the bottom:

<p>{$LANG.category.no_products}</p>

{/if}

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

<p style="clear: both; height: 1px;"> </p>

Make it look like this:

<p>{$LANG.category.no_products}</p>

{/if}

<p style="clear: both; height: 1px;"> </p>

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

Then find this at the bottom:

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}

Add a </div> on a new line after the bottom {/if}

[Guest irrimiri]

Hi bsmither,

Again a big thank you!!! That solved the problem immediately! I am so happy this works.

Just one more thing. I tried to add the 'buy buttons' (and perhaps the box in which you can check the amount of products you want) from the homepage, but that didn't work out right.

Could you perhaps help me with this one thing too?

Also, the block with the site documents has expanded to 100% width of the screen. Any ideas on fixing that? *^__^* (www.petitemiri.nl on the bottom)

Again thanks for your time. If not I understand and leave it this way for now.

I was trying to work with this part of code:

)

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

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

<input type="submit" value="{$LANG.catalogue.buy_now} &raquo;" class="button_default" />

{elseif !$CATALOGUE_MODE}

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

{/if}

</p>

</div>

This is my current code for content_category.php :

(writing this down might help someone else who wants to try this in the future 

<h2>{$category.cat_name}</h2>



{if isset($category.image)}

<div id="category_image"><img src="{$category.image}" alt="{$category.cat_name}" /></div>

{/if}



{$category.cat_desc}



{if $SUBCATS}

<div id="subcategories">

{foreach from=$SUBCATS item=subcat}

<div class="subcategory">

<p><a href="{$subcat.url}" title="{$subcat.cat_name}">

<img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" /><br />

</a><a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a></p>

</div>

{/foreach}<br />{/if}



{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}



{if isset($PRODUCTS)}

{foreach from=$PRODUCTS item=product}

<form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm">

<div class="category_product">

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

<br />

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

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

{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}

</div>

</form>

{/foreach}

{else}

<p>{$LANG.category.no_products}</p>

{/if}

<p style="clear: both; height: 1px;"> </p>

{if isset($PRODUCTS) && count($PRODUCTS) >= 1}

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

<div class="control">

<span class="pagination">{if isset($PAGINATION)}{$PAGINATION}{/if}</span>

{if isset($SORTING)}

{$LANG.form.sort_by}

<select name="sort" class="auto_submit">

<option value="">{$LANG.form.please_select}</option>

{foreach from=$SORTING item=sort}

<option value="{$sort.field}|{$sort.order}" {$sort.selected}>{$sort.name} ({$sort.direction})</option>

{/foreach}

</select>

<input type="submit" value="{$LANG.form.sort}" />

{/if}

</div>

</form>

{/if}</div>

[Guest irrimiri]

Hi again,

I was wondering if someone could still help me with this little issue

http://boskaartjes.n...tegory&cat_id=4

If you looke at the site documents block on the bottom of this skin it's too wide. I think it's about 100% because it's as wide as the browser page is.

Does anyone know what I need to do to make it align in width with the category block again?

I know it needs to be changed in the category_content.php but I am not sure what I need to add or to change.

(see code above).

Thanks in advance

Miriam

[bsmither]

In your skin's file main.php, find this (or something close):

</div>

<div id="documents">{if isset($SKIN_SELECT)}{$SKIN_SELECT}{/if} {$SITE_DOCS}</div>

</div>



{$COPYRIGHT}

Move the top </div> to below the second </div>. This puts it in the same width as the complete area of the store display, but not just as wide as the category section. To make it as small as the center panel, I think that would involve more than editing one file.

[Guest irrimiri]

Hi Bsmither,

That worked! Thanks for your reply!