Sub Categories

Hi,

Anyone any idea on how to have a different style for Sub Categories? Even if it is just a different background image or color?

Thx

Hi,

You will have to customize your selected theme for achieving this. Look for the "Subcategory" section in category.css

it can look something like

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  SUB CATEGORIES - PRODUCTS IN GRID TEMPLATE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.CategoryPage .SubCategoryGrid
{
background:transparent url(images/newbackground.png) repeat scroll 0 0 !important;
}


I highly recommend using FireFox and FireBug to understand and edit/preview your css. Once you are satisfied with the results in firebug, you will have to edit the category.css yourself in some editor. Firebug unfortunately doesnt support saving your changes.

Thanks Zeeshanejaz.

That looks to be more for the Sub Category page. I was hoping to modify the menu on the side to have a different background color/image for the Sub Categories. This is to distinguish a Sub Category from a main Category selected.

Any ideas on that?

Thx!

Hi,

This you can do by setting a new style class for the sub category links as they are set as the category links e.g(li_selected,li_unselected) You will need to modify the code behind to change this property as the menu is rendered dynamically.

if you need further assistance just ask.

mike..

Hi guvnor,

Mike is right but there is a small problem. NOPCommerce CategoryNavigation control does not assign seperate css classes for root categories and sub categories.

however this can be achieved as follow

edit like 144 and line 146 of CategoryNavigation.ascx.cs

FROM

144.  link.CssClass = "li_selected";

146.  link.CssClass = "li_unselected";

TO

144.  link.CssClass = "li_selected_" + padding.ToString();

146.  link.CssClass = "li_unselected_" + padding.ToString();


this will generate new css classes tag for sub categories

parent categories will have a class="li_selected_0" tag and next level sub category will have class="li_selected_15"

now u can define these classes in category.css hand have different style of all levels of category

cheers,

Thanks guys.

Will have a play with that.

Cheers.

Thanks Zeeshanejaz.

I like the idea of having different styles for each category but as I have ~70 of them I think it would be too much hard work to do it that way.

@ Mike,

What do I need to update in the code so I can have a separate style for sub-categories?

Thks!

Hi,

as zeeshanejaz posted in his code you will need to edit the code behind and add a new style for sub categorys and this will allow you to restyle the sub categorys.

Have you tried the code? did it work for you?

mike..

Hey Mike,

I tried the code alright and rebuilt my site but I couldn't get it to work. Not 100% sure about how to add the style for the sub categories to the stylesheet. If you had a short example it would be great and then I could play with the style.

Apologies but this stuff is pretty new to me.

Thks.

what you will need todo is implement code as metioned before,

then goto your App_Themes/(theme you are using)/master.css

find this section:

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  CATEGORY NAVIGATION

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.category-navigation
{
  margin-bottom: 15px;
  padding-bottom: 5px;
  padding-left: 0;
}

.category-navigation li
{
  list-style: none;
}

.category-navigation a
{
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
}

.category-navigation .li_selected_0 a
{
  color: #ff9933;
  font-weight: bold;
  text-decoration: none;
}

.category-navigation .li_selected_15 a
{
  Whatever you want
}
.category-navigation .title
{
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 7px 10px;
  color: #ff9933;
  background: #333 url(images/bg_sidebar_title.gif) no-repeat;
}

.category-navigation .treeview
{
  font-size: 11px;
  padding: 5px 10px 10px;
  line-height: 18px;
  background: #404040 url(images/bg_sidebar_block.gif) no-repeat left bottom;
  margin: 0px;
}

.category-navigation .treeview ul
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  color: #3664A5;
  background-color: inherit;
}

.category-navigation .treeview ul .li_selected_0
{
  font-weight: bold;
}

.category-navigation .treeview ul .li_unselected_0
{
}

.category-navigation .treeview ul .li_selected_15
{
  Whatever
}

.category-navigation .treeview ul .li_unselected_15
{
               Whatever
}

Hope this helps.

mike..