Hi Quicksketch,
I've noticed that you periodically have Webform support requests for styling issues that can be solved with CSS. Anyway, I'm not familiar with how module documentation is handled, but thought posting a screenshot (attached) and the associated CSS might save you some time and support requests in the future. 

/** WEBFORMS **/
.webform-client-form
  {
  }
.webform-client-form .form-item input.error, .form-item textarea.error
  {
    border: 1px solid #FF5C00;
	color: #494949;
  }
  .webform-client-form .form-item
  {
    margin:0px;
    margin-bottom: 7px;
  }
  .webform-client-form label
  {
    margin:0px;
    width: 30%;
    float: left;
    text-align:right;
  }
  .webform-client-form label.option
  {
    width:auto; /*we don't want radio labels to follow the same rules as component labels*/
  }
  .webform-component-textfield, .webform-component-select, .webform-component-email, 
  .webform-component-select .form-radios
  {
    overflow:auto;
    overflow:hidden;
    height:100%;
  }
  .webform-component-textarea
  {
    width:50%;
    float:right;
  }
  .webform-client-form .description
  {
    display:block;
    clear:both;
    line-height:normal;
    color: #565656;
    padding: 0px;
    margin-top: -10px;
    margin-left: 30%;
  }
  .webform-client-form .form-submit
  {
    margin: 20px;
  }

~Joy

CommentFileSizeAuthor
webform_ss.png35.02 KBsunshinee

Comments

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Reviewed & tested by the community

Excellent, thanks Joy! The screenshot should really drive it home too. I'll mark this a patch so I can add it to the Webform handbook pages. Unfortunately the entire drupal.org contributed modules handbook is totally scrambled right now so there's no point in making the new page until that gets fixed.

maxferrario’s picture

maxferrario commented

When adding the infos to the documentation, please tell drupal users that they do not have to modify the webform.css file, as I tried to do, but the style.css file of theme they use.

devloper_sumi’s picture

devloper_sumi commented

Thanx a lot... This was very much helpful for me....
But I am having one more requirement... how to add some text below the webform?

cdale’s picture

cdale commented

@devloper_sumi - Add a markup component as the last component of the form, and put your text in there. Another option is to use a block below the form.

quicksketch’s picture

quicksketch
he/him
commented

devloper_sumi, please keep conversation on-topic. See #268397: Text after form.

sunshinee’s picture

sunshinee commented

a little update:
upon using the basic CSS properties above in a couple of different drupal sites, it came to my attention that the negative margin on the form component descriptions can cause issues. If your default input filter uses Drupal's automatic line breaks (enabled by default on a new install), this is fine:

  .webform-client-form .description
  {
    display:block;
    clear:both;
    line-height:normal;
    color: #565656;
    padding: 0px;
    margin-top: -10px;
    margin-left: 30%;
  }

If you have disabled Drupal's automatic line breaks (i.e. to handle it through a wysiwyg editor), comment out or otherwise remove the negative margin as follows:

  .webform-client-form .description
  {
    display:block;
    clear:both;
    line-height:normal;
    color: #565656;
    padding: 0px;
    margin-top: 0px;
    margin-left: 30%;
  }

Hope this saves someone a headache! =)

quicksketch’s picture

quicksketch
he/him
commented
Status: Reviewed & tested by the community » Fixed

I've moved this to a handbook page at http://drupal.org/node/944430.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

kyleheney’s picture

kyleheney commented

How can I call a specific component of a specific Webform?

For example, I have this:

#webform-client-form-853 {
border: 1px solid;
}
#webform-component-to label{
border: 1px solid;
}

What I need to do is have my component "to" have a label around it, but only in the webform "853". How can I add on to the first group of code to call the "to" component of the "853" form?

I have tried this:

#webform-client-form-853 .webform-component-to label{
border: 1px solid;
}

Nothing happens.

I think I just have things mixed up a bit and it's all in the way it needs to be written. I'm very beginner with all this, so a bit of help would be appreciated. The reason I need this to work is that I have the "to" component in other webforms on my site, so if I can't specify which form ID to call, it changes all instances of "to".

Thanks!

danchadwick’s picture

danchadwick commented

Looks like you are on the right track. Inspect the HTML and CSS in your browser until you see how to achieve what you want. Try the Drupal forums or IRC for general drupal themeing support.