Specific css class for each category

[Mathis Neumann]

Hi there,
it's a very small idea, but you could add a css class for each category to enable special css designs for special categories.

It could look like this: (from a single showcase item)

<div id="item-1" class="showcaseItem showcaseCategory-ExampleCategory" data-author="Maddis1337">

By adding that I could use css code like:

.showcaseCategory-ExampleCategory.showcaseItemTabs {
background: url(an Image);
}

(Maybe even on the main page)


Thanks

 

[Bob]

ya, I can probably start adding in more complex stuff like that soon.

 

[Bob]

I added this to the item template:

<div id="item-{$item.item_id}" class="showcaseItem showcaseCategory-{$item.category_id}" data-author="{$item.username}">

btw, it uses the Category ID (not the category name) ie... showcaseCategory-10

Same class is also added to all the item listings (for each item) (Index, Category, Member etc)

Grid:

<div class="showcaseItemContainer showcaseCategory-{$item.category_id} {$item.item_state} {xen:if $item.featured, featured}" id="item-{$item.item_id}">

List:

<li class="showcaseListItem showcaseCategory-{$item.category_id} {$item.item_state} {xen:if $item.featured, featured}" id="item-{$item.item_id}">