|
Michael Chasse
|
April 15, 2013 at 2:45 pm
I’m trying to style my registration forms so they are more effective at using the available screen real estate, instead of one input field per line. I can use CSS to style and float the event_form_field so it is 300 pixels wide, but this is a global change for all event_form_field.
How can a person style the ZIP Code form_field so it is only 100 pixels wide, but make the first name/last name form_field so that they are 300 pixels wide.
Seems kind of silly that there aren’t individual div classes for each input field so that you can more easily fine-tune the look of your forms.
|
|
Dean
|
April 16, 2013 at 1:01 am
Hi Michael,
The form fields unfortunately do not have id’s or classes, which makes targeting them a bit of a pain. They do however have name attributes so you can use the attribute selector instead.
e.g
input[name=”state”] { background-color: yellow; }
regarding the width, I had to play about with it, and you may need to as well depending on your theme but I had most luck with using the max-width rule.
I thought we had a ticket to add these, but apparently not, so I will raise something to see if we can add classes/id’s to the form fields in the future.
|
|
Michael Chasse
|
April 23, 2013 at 4:39 pm
Yep, the max-width is working for me. Thank you!
As to the ticket, I think individual classes for each registration field is a must. Would make it far easier to have granular control and really style things up. For instance, my state field only needs to be 20 pixels wide whereas the email field should be closer to 200 pixels. Would really help condense the registration dialog.
|
|
Dean
|
April 24, 2013 at 12:45 am
I agree Michael, I looked into it and as far as I can see it is unlikely this will be added to 3.1.X versions, but in the upcoming 4.0 version it should have more control.
|
