Custom CSS Issues
Posted: 28 Aug 2009, 19:40
Hi Jan, thanks again for a great component. I will certainly recommend it.
The CSS, however, gave me fits. The main issue I had was the text background styling. The CSS specifically calls for a light background for the text elements of the component. Why then, wouldn't the CSS also include an instruction for the text on top of that light background to be dark? There are no "color:" parameters for most of the text elements in the CSS file. It simply defaults to the template CSS.
And wading through all the variations of "pd-section(s)-xxx" searching for those parameters made my head spin. The comments get you close, but with so many "pd-section(s)-xxx", it took quite a few tries to get everything configured. Mostly, because I was looking for "color:" parameters to change, where there were none. When I finally realized they were simply missing, I was able to insert them myself and move on.
Basically, I have always regarded this as a rule of thumb: If you declare a text-background color, you should also declare a complimentary text color, to completely avoid the "invisible" text problem that can arise if you don't. I can't think of a reason not to do it this way.***
If the template calls for a dark colored font, then it doesn't matter. But if the template uses a light colored font, then the "default" setting for your component becomes a light colored font over a light colored background. I certainly can't change the site-wide template CSS to make a single component readable.
***But, honestly, I would never claim to be an "expert" on CSS styling. I've written and worked with it for years, but never had any formal training. Perhaps there are reasons I'm not aware of for structuring it the way you did. I always try to consider the possibility that I'm completely full of you-know-what.
So. Am I?
Thanks again (again) for an extremely cool component, and for taking the time to reply to my review. If it turns out that I'm simply an idiot, I'll happily rewrite it.
The CSS, however, gave me fits. The main issue I had was the text background styling. The CSS specifically calls for a light background for the text elements of the component. Why then, wouldn't the CSS also include an instruction for the text on top of that light background to be dark? There are no "color:" parameters for most of the text elements in the CSS file. It simply defaults to the template CSS.
And wading through all the variations of "pd-section(s)-xxx" searching for those parameters made my head spin. The comments get you close, but with so many "pd-section(s)-xxx", it took quite a few tries to get everything configured. Mostly, because I was looking for "color:" parameters to change, where there were none. When I finally realized they were simply missing, I was able to insert them myself and move on.
Basically, I have always regarded this as a rule of thumb: If you declare a text-background color, you should also declare a complimentary text color, to completely avoid the "invisible" text problem that can arise if you don't. I can't think of a reason not to do it this way.***
If the template calls for a dark colored font, then it doesn't matter. But if the template uses a light colored font, then the "default" setting for your component becomes a light colored font over a light colored background. I certainly can't change the site-wide template CSS to make a single component readable.
***But, honestly, I would never claim to be an "expert" on CSS styling. I've written and worked with it for years, but never had any formal training. Perhaps there are reasons I'm not aware of for structuring it the way you did. I always try to consider the possibility that I'm completely full of you-know-what.
So. Am I?
Thanks again (again) for an extremely cool component, and for taking the time to reply to my review. If it turns out that I'm simply an idiot, I'll happily rewrite it.