No way to target just category page with CSS

jfriend

I wasn't sure exactly where to post this. It isn't technically a bug, though it's a small miss in the CSS design. I don't want to put it in the feedback site because it won't be a popular issue and won't garner a lot of votes. It's just one of those things that would take about 5 minutes to fix and would clean up the CSS design and enable some CSS customizations that aren't easy now.

If you have a category and a sub-category within it, there is currently no way to target JUST the category with CSS without also getting the sub-category. That leads the work-around anti-pattern of having to specify what you want for the category and then unspecify it for the sub-category which can lead to problems when the underlying CSS changes. It would take minutes to add a unique class to a category page so it could be uniquely targeted with CSS without also including the sub-category.

Right now, a category looks like this:

<div id="category" class="tempClass category category_Sports 
notLoggedIn bodyColor_Black smugmug-pro">

and a subcategory below it looks like this:

<div id="category" class="tempClass category category_Sports 
subcategory subcategory_Palo_Alto_Rowing_Club_-_2011 notLoggedIn bodyColor_Black smugmug-pro">

One can target the sub-category uniquely, but not the category because every class in the category is also in the sub-category.

If the category looked like this, we could target it uniquely:

<div id="category" class="tempClass category [COLOR=red] category_page[/COLOR] category_Sports 
notLoggedIn bodyColor_Black smugmug-pro">

Though this change won't win any popularity contest (as it's only useful to advanced CSS customizers), it wouldn't take more than a few minutes to implement and it would fix the purity of the CSS design where every page on the site is uniquely targettable with CSS. This is the only case I know of where that design goal is currently broken.

FYI, I discovered this because my slideshow takes a CSS3 selector to determine the page you want it inserted on and a customer was trying to insert it on a category page, but not on the subcategories of that category and there was no way to do it by specify an appropriate selector. Everything we tried also ended up on the subcategory page (because it's CSS classes are a superset of it's parent category).

I hope this can get shown to some sorcerer at Smugmug who might care to fix the purity of the CSS design so there isn't this one design hole.

Allen

What happened to targeting the category page like this? This has been used
in the past and worked, not targeting any underlying sub-cats.

.category.category_xxxxxx ...

Actually just looked and use this.

#category.category.category_Birds ....

jfriend

Allen wrote: »

What happened to targeting the category page like this? This has been used
in the past and worked, not targeting any underlying sub-cats.

.category.category_xxxxxx ...

Actually just looked and use this.

#category.category.category_Birds ....

That selector hits both the category page and the subcategory page. It won't hit the gallery page in that category, but it hits the subcategory page too because the subcategory has all those tags too. It has a few additional tags, but the category doesn't have any tags that aren't also in the sub-category.

docwalker

Thanks guys. I have sent this to get some attention on it.