Styling individual category dropdown

Hi there,

In CategoryMenuTemplate.WithPictures.cshtml, is it possible to call each individual category (say by ID or name)?

@(Html.DataTable<SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel>(category.SubCategories, 4, "row", "box",
                                    @<text>

I need to style each dropdown differently. I got help with removing some divs a couple of months back by using foreach instead of the Data Table helper method (thanks Boyko - http://www.nop-templates.com/boards/topic/595/full-browser-width#2947) which gave me more flexibility in styling, but now I need to call categories individually instead of a foreach.

Thanks for any help.

Cheers!

Hi,

Sure it is possible. You can change the markup to whatever you want. You can simply add the category id as a class to each dropdown and then style them via these additional classes.

Best Regards,
Nop-Templates.com Support Team

Hey Boyko,

I'm a bit lost. Can you give me an example? I also need the subcategories associated with the category to show up the same.

Thanks for all your help!

Hi,

In order to set specific styles for each main category you need to change the code in the CategoryMenuTemplate.WithPictures.cshtml.

foreach (var category in Model.CategoriesModels)
        {
    <li><a href="@Url.RouteUrl("Category", new { SeName = category.CategoryModel.SeName })">@category.CategoryModel.Name</a>
        @if (category.SubCategories.Count > 0)
        {
            <div class="dropdown categories fullWidth @category.CategoryModel.Id">

The code in bold adds a class with the id of the category.
This way you can style the dropdown via the id of the category i.e 10, 20, 40 etc.

Thanks

You are a genius! Thank you so much!

I'm trying to do this on Nop 3.2.  We have one category under the second menu item on our mega menu. We have over a dozen sub-categories within that category that all populate as single list.

We're looking to break this list up into multiple columns (ONLY under the second menu item) and have tried this solution but even after adding the class/ID to the megamenu.css file it still does not show up when trying to add the columns css.

I tried following the above directions but am having issues Any help is appreciated.

Hi DJ_Balogh,

I am not sure I understand what exactly you are trying to do. Could you share a link to your web site and explain what you want to achieve?

It's a developmental site but here's a screenshot.

http://oi57.tinypic.com/17zwcn.jpg

Under the HOW TO PRINT menu item, I want the Items & Locations list of subcategories to go across the width of the box (to fill it in more) into multiple columns. I know this is achievable in CSS but when applied it affects lists under all the other menu items. I want to only add columns to the categories that need it.

Does that help?

Yes, it helped. So you need to add a class with the id of the main category in the markup as explained a few posts above. Then first make sure the class with the Id is present in the markup when you inspect it in the browser and then you can apply specific styling via the Id class.
For example if your category id is 25 then you can do something like this:

.dropdown.25
{
  // your specific category styling here
}

This will apply only to the category you want to be different and not to all the categories.

Hope this helps!

I'm still struggling with this:

From my screenshot above, I would only want to affect the list within the ITEMS & LOCATIONS category box (category ID 77), not everything listed under the HOW TO PRINT menu item (category ID 2)(because we may add more categories here in the future).

I couldn't get it work the way described though. I changed my code to look identical to the one above in the CategoryMenuTemplate.WithPictures.cshtml:

"foreach (var category in Model.CategoriesModels)
        {
    <li><a href="@Url.RouteUrl("Category", new { SeName = category.CategoryModel.SeName })">@category.CategoryModel.Name</a>
        @if (category.SubCategories.Count > 0)
        {
            <div class="dropdown categories fullWidth @category.CategoryModel.Id">"

But with a category ID of 77 what would the CSS code be to be added to the megamenu.css stylesheet?