Added a <tr> and several css classes

[jeffmcneill]

I found this hard to style out-of-the-box, so I made it two < tr >s instead of one, and added several style classes at various points.

Here is the style I then used to get the look/feel I needed:

.variations { width:90%!important; margin: 0px 10px 0px 10px; }

.variations-head { background-color:#808080!important; }

.variations-data { display:block; color:#808080!important; padding: 0px 10px 0px 10px; }

.variations-radio { text-align:left; display:block; }

.variations-label { text-align:left; display:block; margin: -12px 0px 0px 0px; padding: 0px 0px 14px 20px; }

[Mantish]

Hi, why weren't you able to apply the CSS with the provided class? I'd like to keep the templates as close to the original

[jeffmcneill]

I couldn't figure out how to style with only one class. I needed to apply styling to different parts to get the layout looking good. I tried to do it without a second <tr> which is the only html difference (besides additional classes that could be ignored by other users). There is only a single table row in the original, but that doesn't make sense when there are many, one for the header (label), and one each for each variation. Semantically it makes more sense to have the table rows represent rows, rather than table data cells that are then aligned.

[Mantish]

You can totally do it with one class. For example change .variations-radio to .variations input

As for the table rows, I get your point and I think it would work for some people, but not for everybody, so I won't change it and keep it like the original.

Remember you can customize the templates by copying them into your theme and modifying the copy.