Hi, I've been using this great plugin for sometime now and had no problem styling it for a few themes I used for my personal sites and friends' but recently I stumble on a theme that's giving me headaches.
The theme I'm referring to is Freshy, nice web 2.0 looking them I have to say however its css is messing up cform.
I can't control the list design, ol.cf-ol li seems to be overridden by the themes stylesheet and I can't find a way to fix it.
I tried to add !important to the relative classes and properties in the cform stylesheet but ie7 seems to ignore it. I rely on firbug to refine the layout of the form, when it looks good and I saved the modification to the css, in firefox everything is fine, instead no changes appear in ie7 (probably ie6 too).
Any advice or experiance with this theme, anything, is appreciated.
mmm there must be something wrong with my IE, even after cleaning the cache it still shows the numbered list and the text area shifted to the left.
Ironically, I even have a post on my site about a service to cross check a website among multiple OS and browsers, but being stressed out with this theme's css I haven't test it with that service, in fact the form reads the css correctly! At least I know it's only a problem on my side, I need a rest.
Anyway, thanks for you help and time, I really appreciate it.
The theme "wide_brown_light" contains quite a bit of custom CSS at the beginning which is tailored to only work properly with the form preset, this is what messes up your layout.
I suggest you delete the first block starting with:
/* NOTE: */
/* custom CSS settings for PRESET EXAMPLE! */
/* only works 100% with your DEFAULT FORM (#1!) */
/* */
and start from there.
If you like to do some fancy CSS like in the example, then I suggest you take a look at the fields used (& their exact ID's in the HTML code) and the corresponding CSS declarations (the ones you've just deleted :-)
Looking at your form, however, I think you'll be totally fine with just removing this top block of CSS codes.
A final though, add a line break after every 3rd item in the check box group, this will force 3 items per line and will look better.
EDIT: Also, the form preset for the above Theme that you've put into form #2 shows some errors, that's because those tailored CSS declarations only work properly if the form preset is used in slot #1 of your forms, so to speak.
Ok.. I reverted to the original wide_form.css and customised it..
I was hoping that the check boxes and the labels won't spilit but looks like I had to force line breaks between to prevent that.. One suggestion may be to put a container around each [check box + label] and thus preventing it from breaking up (or add perhaps).
By forcing line breaks, It shows up ok in Firefox now but for IE7, the margin for the firstline is different from the subsequent lines..