cforms II Support Forum » delicious:days

Need help with CSS

Page: 1	Add a New Topic Reply to Post

Post

Guest

Scott

9:33 pm May 9, 2007

Quote and Reply

I'm having a little trouble figuring out the css changes need to do what I'm hoping to accomplish…

Basically, I want to change the way checkboxes and checkbox groups are displayed (including their labels). Whenever I've tried to make a change it either doesn't work at all (i.e., no change), or everything changes (i.e., all elements change according to the edits meant just for checkboxes).

What I've tried is to separate the span.cfchkboxlabel and span.cfchkboxlabelgrp from the rest of the label settings. When I do that so that those elements have their own styles, nothing happens in the form.

So, can someone give me an example of how my css should look if I want the checkboxes and their labels to have a different style than other elements?

Thanks,

Scott

Admin

Oliver

Munich, Germany

posts 6002

9:52 pm May 9, 2007

Quote and Reply

Hi Scott,

I'm just about releasing 4.2 which will come with an almost complete new and much more robust form structure (good news: no floats anymore!).

The CSS part is also revised and streamlined. If you like to beta test, I can send you 4.2 right away and we'll take it from there.

Can you post a URL and some more info on how you're planning on changing the CSS, just to better understand what your trying to do?

** cforms home page ** donations

Guest

Scott

10:28 pm May 9, 2007

Quote and Reply

Hi Oliver,

You can see an example of a form I've created here:

http://snipurl.com/1jysp

What I'm wanting to do for this particular form is make it so the "Participant preferences" checkbox labels are wider, with the checkboxes themselves remaining aligned with one another (just further to the right).

Then, on this one:

http://snipurl.com/1jyt1

I'd like to be able to change the textarea label to be above the textarea, as well as making the label for the checkbox wider, each without affecting the other types of fields present.

I'd be happy to give 4.2 a try!

Thanks,

Scott

Admin

Oliver

Munich, Germany

posts 6002

10:47 pm May 9, 2007

Quote and Reply

Based on v4.1, what I would recommend, is to first switch the checkbox label to the right: go into the admin form config and change the check box field names (I assume that's what you have) from:

"Complete and submit the survey online (i.e. via a website like this)"

"#Complete and submit the survey online (i.e. via a website like this)"

Note the # is in front of the text! If the default width (I think 250px) of the label on the right is not enough, you can modify it by adapting (in your CSS theme file):

label.cformlabelafter { …

RE: the second request

My suggestion is, to abbreviate the text-area label text to something like "Your Details" and create a new text-only field just above it and provide the detailed explanation there. E.g. for text-only field:

Please provide some details as to why you are requesting…|mystyle

mystyle will be interpreted as a CSS class, so you can add a ".mystyle" class to the theme file for proper customization.

Alternative: In order to avoid ALL labels move above the input field, you could move the text-area in its own FIELDSET and then apply CSS on the label to force it above the text-area field and give it an appropriate width.

** cforms home page ** donations

Guest

Scott

11:17 pm May 9, 2007

Quote and Reply

Thanks for the suggestions, Oliver!

I have made some of the adjustments you recommended, and I think my forms are looking much better now!

Thanks,

Scott