Category Button Display on Homepage

Hey everyone, i was just wondering how to make a category image take up the entire space of the button instead of it just being a smaller central image of itself.


Basically what i want is something similar to the Alfresco image  for their categories


currently any image only fills up a small central spot on the button.

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.

Hey this was a great help, I have another quick question for you id you do not mind,  on the Alfresco demo it seems as though the Nivo Slider is being used in the Header.  It stretches across the screen.  I can position the Nivo Slider in various places throughout the page but do not see an option to enter it in as the header.  

Once i do get it in as the header will it already default to the size as shown in the demo or will i have to customize the CSS there as well.


I do have adobe photoshop so i can create images to the correct pixel size etc.   I attached the image layout i am hoping to achieve.

I'm not sure where i should be adding this in,

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

Is what i am currently looking at..


Can you provide any further direction?

Nop-Templates.com wrote:

You should have no problem with the menu showing over the main slider on the home page.
There is some styles which make it looks like that and that`s the 'margin-bottom:-45px;':

.main-slider {
    border-bottom: 1px solid #666666;
    border-top: 1px solid #666666;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    margin-bottom: -45px;
    position: relative;
    z-index: 0;
}

So if you have this code into your styles you should have this styling into your theme.

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]

The code you gave me to get the header to display over the slider is exactly how i have it and it does not give me that result.  instead the slider is below the header