Orders - Input Field Sizes

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
visualharmony
Forum Members
Forum Members
Posts: 30
Joined: Tue Dec 02, 2008 1:20 am
Location: Ocala, Florida

Orders - Input Field Sizes

Post by visualharmony »

CMSMS 1.8 / Orders 1.8.6

I am working on restyling the billing and shipping form.  The input fields are all different sizes.  I would like to make the sizes consistent.  Where do I change that?

I would prefer to control the sizing with CSS, but the generated source has the size attribute values hard-coded (ex. size="80").

Thanks for your help!
Jack
Visual Harmony, Website Design Blog

To the Devs: Thanks for making CMS Made Simple. It is great and getting better all the time!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Orders - Input Field Sizes

Post by Dr.CSS »

I change the input sizes all the time with CSS no matter what the size= says you just have to know what you can target find them by looking at the page view source...
ncd
Forum Members
Forum Members
Posts: 57
Joined: Tue Sep 29, 2009 1:12 am

Re: Orders - Input Field Sizes

Post by ncd »

Hi,

Just wondering if someone can be a bit more specific here...

I see from the source that the class is "cms_textfield" - there doesn't seem to be any specific style sheets for the Orders Module, so I tried adding the class to my main style sheet but that didn't work.

Does anyone know how to target these input fields to make them consistent?

Thanks!
uniqu3

Re: Orders - Input Field Sizes

Post by uniqu3 »

You can target these with your wrapping id or class for example if you would have something like <div class="orders">{Orders}</div>
your stylesheet could look like
.orders input.cms_textfield {
width: 100px;
}

Using only input.cms_textfield or input.cms_input would affect more modules/input/text fields then only Orders, as these classes are also used in other cmsm modules.
ncd
Forum Members
Forum Members
Posts: 57
Joined: Tue Sep 29, 2009 1:12 am

Re: Orders - Input Field Sizes

Post by ncd »

Legend! Thanks :)

I also found this work around http://forum.cmsmadesimple.org/viewtopi ... es#p180449

Basically:
{$prompt_username}
replace it to
{$prompt_username|replace:'size="25"':'size="33" '}

I think your suggestion is better though - however, I'm having one problem whereby once you proceed to the confirmation page, there's a 'back' link and if you go back all the styles are lost, yet the source is the same!?

Any ideas?

Thanks!
uniqu3

Re: Orders - Input Field Sizes

Post by uniqu3 »

My sample of wrapping orders in a div was only example how you can achieve it, best option would be doing this in Orders module templates.

If your styles are attached to template these should remain the same.
ncd
Forum Members
Forum Members
Posts: 57
Joined: Tue Sep 29, 2009 1:12 am

Re: Orders - Input Field Sizes

Post by ncd »

Yes - that was in relation to the templates, but as I mentioned, I think your way is better - more control with css!

As per your suggestion, I added the class to my style sheet, yet when you click the 'back' link, the styles are lost!

The source code displays the same, so it's quite confusing :-\

Anyone why this would happen?

Thanks!
Post Reply

Return to “Layout and Design (CSS & HTML)”