How to change a Webform appearance?

wposey - November 28, 2008 - 15:56

http://www.panhandleumpires.com/panhandle/node/105

I basically just want to put the drop down select menu's to the side of the titles? How do I go about using templates for this? I've searched about this and tried a couple things but the guides are unclear (at least to me)...

Can anyone help?

» Login or register to post comments

It's tedious, but you can do

WorldFallz - November 28, 2008 - 16:13

It's tedious, but you can do it with css, for example:

#edit-submitted-game-information-home-team-wrapper label {
 display:inline;
}

You'll need to add the css id for each field you want displayed inline.

_{===

"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu

"God helps those who help themselves." - Ben Franklin

"Search is your best friend." - Worldfallz}

what css file do i need to

wposey - November 28, 2008 - 16:17

what css file do i need to edit?

Eureka-- you CAN do it once

WorldFallz - November 28, 2008 - 16:20

Eureka-- you CAN do it once for all of them:

.fieldset-wrapper label {
  display:inline;
}

You can stick that in the style.css file for your theme.

EDIT: or almost all of them. Seems there's a couple (date, comments) you'll have to do individually.

that did it. Wow, that was

wposey - November 28, 2008 - 16:21

that did it.

Wow, that was very fast. Thank you....

While we are on this topic...any suggestions on what I could do to make them look any better?

Maybe someway to left justify the words and right justify the select menus or something?

Ya well I like the way the

wposey - November 28, 2008 - 16:22

Ya well I like the way the comments turn out. I think it would look worse for those fields at least.

Let me try to mess with the date function.

#edit-submitted-game-informat

wposey - November 28, 2008 - 20:07

#edit-submitted-game-information-home-team-wrapper label {
display:inline;
}

going off this, would I just need to put the date in like so?

#date label {
display:inline;
}

????

You should get the firebug

WorldFallz - November 29, 2008 - 00:53

You should get the firebug plugin for firefox-- you can inspect each element easily to discover the available classes/ids. So, actually, its:

#edit-submitted-game-information-date-wrapper label {
  display: inline;
}

But it doesn't appear to work on this one. Not sure why.

As for prettying up the forms-- i'm not much of a designer. I know it's considered back practice, but i often use tables to get form elements organized the way i want.

I can't seem to get what you

wposey - November 29, 2008 - 14:09

I can't seem to get what you posted to work. I have downloaded the firebug add on for firefox and can see the fields.

This is what I see

<div id="webform-component-date" class="webform-component-date">
<div id="edit-submitted-game-information-date-wrapper" class="form-item">
<label for="edit-submitted-game-information-date">
Date:
<span class="form-required" title="This field is required.">*</span>
</label>
<div class="container-inline">
<div id="edit-submitted-game-information-date-month-wrapper" class="form-item">
<select id="edit-submitted-game-information-date-month" class="form-select" name="submitted[game_information][date][month]">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option selected="selected" value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div id="edit-submitted-game-information-date-day-wrapper" class="form-item">
</div>
<div id="edit-submitted-game-information-date-year-wrapper" class="form-item">
</div>
</div>

The 2nd line of your posted

WorldFallz - November 29, 2008 - 15:02

The 2nd line of your posted code above is where I got the date field id-- so we're looking at the same thing. However, when I took a second look I saw something I didn't see the first time.

Add this to the style.css:

.container-inline {
  display: inline;
}

There's an extra wrapper div to get the individual drop-downs to display inline as well-- i didn't see that the first time.