I've been using Drupal for a little over a year now, and while I'm getting much better there are still times I get stumped. I'm looking for someone(s) who is willing to give me some guidance periodically on what the best way is to achieve something, but something that's not related to a particular module. Is this a good place to post this type of request?
For instance, right now I'm struggling with styling a Webform. When I have my labels inline, I can consistently get all of my textfields to line up 10px to the right of the label by adding padding. I'd rather have them line up vertically as if it was in a 2-column table. The best way I can think of to do this is to somehow force a <div class="label"> around the <label> tag so I can specify a standard width for all the labels. Is this the best way to do this, or does someone have a better way?
Part 2 then is how do I do this? I'm happy enough to hack code, but that's probably not the best way since it seems I have to upgrade my modules frequently. I'm guessing a better way has to do with theming, but I know nothing about theming yet.
Help?
~cindyr
Comments
Hi Cindy - I'm a themer too
Hi Cindy - I'm a themer too (recently full time) and I can perhaps take a look at what you have going on... I have lots of questions all the time too, so I like having other people I can ask theming-specific questions!
There's a Theme Development group on g.d.o. that might be a more specific place to ask theming questions -- though I like having this sort of discussion in drupalchix too...
Are you using the webform module? If you post your setup, I'll try to replicate what you have going on... there may be a way to do what you are talking about with pure CSS without overriding anything in your template.php file, but I'd need to take a look. Or perhaps point me to a URL?
Thanks!
Amanda
Here it is...
Hi, Amanda.
Thanks for your offer! I didn't think to look for a Theming group, so thanks for that too. Yes, I'm using Webform. Here's the URL: http://www.tom4larimer.com/volunteer I'm friends with the candidate's wife, which is how I got into this one.
My goal is to line up (vertically) the text fields for City, State, Zip, Phone and Email. Here's the typical text around one of the fields:
<div class="webform-component-textfield" id="webform-component-zip"><div class="form-item" id="edit-submitted-zip-wrapper">
<label for="edit-submitted-zip">Zip: </label>
<input type="text" maxlength="128" name="submitted[zip]" id="edit-submitted-zip" size="20" value="" class="form-text" />
</div>
</div>
Since there isn't a div around the label, I figured I couldn't specify width. But one thing Drupal has taught me, there's always more than one way to do something!
Thanks,
Cindy
Hi Cindy, I can make this
Hi Cindy,
I can make this work in Firefox by doing this in this stylesheet:
#webform-client-form-28 .webform-component-textfield label,#webform-client-form-28 .webform-component-email label {
float: left;
width: 50px;
}
But I don't know if that carries over for IE or Safari. But it's worth a try!
Amanda
Useful article by Addison Berry at Lullabot
Hi cindyr,
Here is an article you may find helpful:
Modifying Forms in Drupal 5 and 6
Regards,
Phil
Thanks
Thanks, that really looks useful. I know just enough to be dangerous, but not enough to do it right the first time through! But I didn't have a clue to theming, and that article helps a lot. Think I'll try it tomorrow...