SUGGESTION : categorynavigation.cshtml -- add some style rules to child categories so we can easily customise through css

currently, we can easily edit the css for the navigation but it will automatically apply to the child elements too - it would be useful to add separate styles for child elements

@model IList<CategoryNavigationModel>
@using Nop.Core.Domain.Catalog;
@using Nop.Core.Infrastructure;
@using Nop.Services.Catalog;
@using Nop.Web.Models.Catalog;
@{
    var categoryPadding = 15;
}
@if (Model.Count > 0)
{
    <div class="block block-category-navigation">
        <div class="title">
            @T("Categories")
        </div>
        <div class="clear">
        </div>
        <div class="listbox">
            <ul>
                @foreach (var category in Model)
                {
                    <li class="@(category.IsActive ? "active" : "inactive")" 
                    @if (category.NumberOfParentCategories > 0)
                    {
                        if (this.ShouldUseRtlTheme())
                        {
                        <text>style="margin-right: @(category.NumberOfParentCategories * categoryPadding)px"</text>
                        }
                        else
                        {
                        <text>style="margin-left: @(category.NumberOfParentCategories * categoryPadding)px"</text>
                        }
                    }
                    ><a href="@Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">@category.Name
                        @if (category.DisplayNumberOfProducts)
                        {
                            <text> (@(category.NumberOfProducts))</text>
                        }
                    </a></li>
                }
            </ul>
        </div>
    </div>
}

But you can always use CSS (or CSS3) to apply separate styles to the child elements

But i think we cannot give the child categories a different style to the parent category ?

in the stylesheet, for the navigation panel, we can set the style properties for the links - for example,

say we wanted a line between the category items and we wanted to change the background when we hovered :

category 1
________
category 2
________
category 3

This is easy to achieve.

but if we wanted to not apply that same style to the child categories eg no line between them then that is not so easy to achieve using the stylesheet.

if i wanted no line between the child categories and a different coloured background on hover eg

category 1
     sub1
     sub2
     sub3
________
category 2
________
category 3



then i cannot do this in the stylesheet

i must edit line 30 of categorynavigation.cshtml eg
<text>style="margin-left: @(category.NumberOfParentCategories * categoryPadding)px;border-top: none;"</text>

and i've not been able to apply all the changes i wanted here because some of the other style rules in the stylesheet  overrule them (margins, padding, background-color ...


i suggest we refactor  categorynavigation.cshtml  and apply a css class to the child categories so that we can differentiate between the first ( and maybe subsequent ?) child categories

I'm not a CSS3 expert but I'm almost sure it can achieved by editing stylesheet only. Could anybody who has good CSS3 knowledge help Hayden to write appropriate styles? Or confirm that it's not possible without editing cshtml?

Hi,

We faced the same problem. We wanted to differentiate between parent and child categories so that we can style them in a different way. But the current implementation does not set any specific identifiers to the <li> elements, so that it is almost impossible to do that because all the categories are part of one list.

The only way to achieve this(without changing the html) is using javascript that looks at the value of the "margin-left" (if LTR) or the value of the "margin-right" (if RTL) property and sets some css identifiers dynamically for each <li> element which we think is not a good approach.

So we had to overwrite the CategoryNavigation view and using the same CategoryNavigationModel render a different html, where all subcategories of a given category are in a different <ul> list with a css identifier that is a child of the parent category. This allowed us to set different styles for the top level categories and the subcategories.

You can have a look at one of our theme demos - the Nop Jewelry Theme - where you can see that the top level categories are separated with a dotted line, while the subcategories are not. This is possible because the subcategories of the "Engagement Rings" category are rendered in a separate child <ul> and not in the main <ul> in which the "Engagement Rings" category is part of.

If you are interested and this structure of the category navigation meets your requirements and can help you achieve what you want to, we can share the code.

I've just also created a work item. Please vote here

And here we go. Please see changeset 930a02cba03b

instead of adding space i.e, margin-left to the category, adding ul li is the best way

http://www.elaamart.com

elaa1979 wrote:
Agree. Thanks a lot! See changeset 471a9be9da12

Good afternoon,

I’m developing a website using NopCommerce 2.65 and the customer asked me for two style modifications that I’m unable to do so far:

1st – While the users are browsing a specific subcategory, all of the subcategories in the same level must be colored (red, in this case) except the subcategory that I’m browsing that has the inverted foreground and background colors. I’ve tried changing the CSS3 file, and even after finding these topics:

https://www.nopcommerce.com/boards/t/19630/suggestion-categorynavigationcshtml-add-some-style-rules-to-child-categories-so-we-can-easily-customise-through-css.aspx

and

http://nopcommerce.codeplex.com/SourceControl/changeset/0c83401329d9

I still haven’t solved it.

2nd – I have the NopTemplate MegaMenu Plugin installed in the site, and while browsing one of the pages associated with the MegaMenu, I want to mark that page as the currently seen placing a small arrow in it.



What is the best option to do so?
Any help would be appreciated.
Thanks