Page 1 of 1

Custom CSS Issues

Posted: 28 Aug 2009, 19:40
by danivers
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.

Re: Custom CSS Issues

Posted: 28 Aug 2009, 20:07
by Jan
Hi,
It simply defaults to the template CSS
- yes this is the idea, to not have other style for the site and other style for the Phoca Download. The idea is, the text color should be the same for the whole site, the basic elements should be styled by template not component css

If you declare a text-background color, you should also declare a complimentary text color
Yes I see it now, this: background: #fff url('images/folder.png') 0 center no-repeat; should be changed. It is very difficult as the PNG is saved as PNG8 (GIF) and it doesn't support fully transparency as PNG32 (because of not standard browsers like IE is :-(). So the idea was add white background because of not 100% transparency of the PNG (of course if people will not use not standard browsers like IE, there can be PNG32 icon where you need not to set background :-( )


So what to do now. Support mostly used background (white) so images can be displayed OK (smooth)? Or support all backgrounds and add PNG32 images (without support for non standard browsers like IE). Or remove the background and leave PNG8 images to be not smooth or set backroung and color font so user which don't know CSS will have other color font and they color font set in template CSS :(

Re: Custom CSS Issues

Posted: 29 Aug 2009, 00:04
by danivers
That makes sense. I figured there was a good reason. As an Apple user, I often forget about the arch-enemy of every web designer, Internet Exploder.

I feel stupid now, actually, because I should have known. Before discovering Joomla, I used to build PHP sites manually. I can't tell you how many times I wanted to book a flight to Redmond, WA so I could strangle the first Microsoft programmer I met. The headaches back then were margins and padding exploding the page layout. As far as I know, those are fixed now, but I didn't know about the PNG issue. Joomla has made me a lazy programmer.

I think my new default CSS rule is: "If something seems unnecessarily complicated, it's probably because of something to do with Microsoft."

My only suggestion would be to include some default "color:" styling, and comment them out as a default. Then, if someone needs to customize the CSS, those parameters would be much easier to locate and uncomment. It's always easier to find something that's actually there, than to find what's missing.

Thanks for the info and a great component. I'm going to attempt to revise my review to include the prompt resolution to my issue.

Re: Custom CSS Issues

Posted: 08 Sep 2009, 17:12
by Jan
:wink: