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?
It's tedious, but you can do
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
what css file do i need to edit?
Eureka-- you CAN do it once
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.
===
"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
that did it. Wow, that was
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
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
#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
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.
===
"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
I can't seem to get what you
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
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.
===
"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