About the question with the code below, I am not sure why you want to replace it and where (actually what you are trying to accomplish)?
This code check is there some category, and in case there is at least one, it build this markup structure on the page whit all the related content.
@model IList<CategoryModel>
@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
<div class="item-grid">
@foreach (var item in Model)
{
<div class="item-box">
<div class="category-item">
<h2 class="title">
<a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
@item.Name</a>
</h2>
<div class="picture">
<a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
<img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
title="@item.PictureModel.Title" /></a>
</div>
</div>
</div>
}
</div>
</div>
}
Can you provide any further direction?
Hi there,
As far as I understand you want to stretch the category image from side to side (to take all the space) also all the surface must be clickable (it must be link leading you to the category items).
What you need to do to achieve this is simply to set proper width to the item-box elements (for example in Alfresco those items has 450px width and no height because it comes from the elements inside it) and choose right images. Once you have done with this you can use the styling below to stretch the image and make it centered:
.item-box .picture img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
}
Is quite important to choose right images for those category item boxes because you might have problems with setting the images.
Depends from the item-boxes form you might need to use one of the styles: max-width or max-height;
If there is something else you want to do please write back and I will give you advice.[/quote]