Need unique CSS selector for category pages
jfriend
Registered Users Posts: 8,097 Major grins
On 99% of the pages on Smugmug, there is a unique way to target every single page with CSS such that you can make CSS apply to only one particular page. I assume this is a desirable goal for Smugmug.
But, there is one case, where this is not true. There is no way to uniquely target a category page, but not also get it's subcategory pages. You can target a category with a rule like this:
.category.category_Sports
But, that rule will also apply to any subcategory pages in that category. That causes you to have to double specify something that is only supposed to apply to the category page where you set it on the category and then set it back on the subcategory page. This is bad coding as it makes you specify things you didn't want to or need to and can make the code break when smugmug changes the defaults.
I would suggest that a desirable solution would be to add a new class to a category page called "categoryPage". Then, we could uniquely target the category page all by itself with CSS like this:
.categoryPage.category_Sports
Since I know that you're working on N levels rather than just two, please keep this issue in mind so that the N levels solution will still be able to uniquely target each page with CSS rules.
This issue has come up more recently because the JFriend HTML5 slideshow can be added to a category page or a sub-category page by specifying a couple lines of javascript including a CSS select for which page you want it to show on. But, when there's no such CSS selector that uniquely identifies a page (as there is on 99% of smugmug's pages), this method breaks.
But, there is one case, where this is not true. There is no way to uniquely target a category page, but not also get it's subcategory pages. You can target a category with a rule like this:
.category.category_Sports
But, that rule will also apply to any subcategory pages in that category. That causes you to have to double specify something that is only supposed to apply to the category page where you set it on the category and then set it back on the subcategory page. This is bad coding as it makes you specify things you didn't want to or need to and can make the code break when smugmug changes the defaults.
I would suggest that a desirable solution would be to add a new class to a category page called "categoryPage". Then, we could uniquely target the category page all by itself with CSS like this:
.categoryPage.category_Sports
Since I know that you're working on N levels rather than just two, please keep this issue in mind so that the N levels solution will still be able to uniquely target each page with CSS rules.
This issue has come up more recently because the JFriend HTML5 slideshow can be added to a category page or a sub-category page by specifying a couple lines of javascript including a CSS select for which page you want it to show on. But, when there's no such CSS selector that uniquely identifies a page (as there is on 99% of smugmug's pages), this method breaks.
--John
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Homepage • Popular
JFriend's javascript customizations • Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
0
Comments
Portfolio • Workshops • Facebook • Twitter
acknowledge it.
ha, found it.
http://www.dgrin.com/showthread.php?t=192768
My Website index | My Blog