Column problem on product page(phOptions)

[William_firefold]

On a product page, ive been trying to make it so the swatches will fill up the space underneath the word "color" instead of the <td> beside it. I dont really understand how the product variants part of the code works.
Is there a way to do this?

[mazhar]

Locate following code in App_Code/ProductHelper.cs file's BuildProductOptions function

Code: Select all

phOptions.Controls.Add(new LiteralControl("<tr><th class=\"rowHeader\"" + (option.ShowThumbnails ? " valign=\"top\"" : string.Empty) + ">" + option.Name + ":</th>"));
                phOptions.Controls.Add(new LiteralControl("<td align=\"left\">"));

and then make it look like

Code: Select all

phOptions.Controls.Add(new LiteralControl("<tr><th class=\"rowHeader\"" + (option.ShowThumbnails ? " valign=\"top\"" : string.Empty) + ">" + option.Name + ":</th></tr>"));
                phOptions.Controls.Add(new LiteralControl("<tr><td align=\"left\">"));

[William_firefold]

Thanks mazhar, this one was tricky. The source code in the .cs doesnt look like the website source in this area. To get it looking like 7.02 I used a colspan=2.

Code: Select all

phOptions.Controls.Add(new LiteralControl("<tr><th class=\"rowHeader\"" + (option.ShowThumbnails ? " valign=\"top\"" : string.Empty) + ">" + option.Name + ":</th></tr>"));
phOptions.Controls.Add(new LiteralControl("<tr><td align=\"left\" colspan=\"2\">"));

[William_firefold]

I have a new question on the same topic.
The selector has a little label built into it that changes to display the name of the option that is clicked. It has no CSS #id attached to it and it isnt a normal control.
It looks like it gets added in producthelper.cs
phOptions.Controls.Add(picker);
but I cant control the position of it.
I want to put it next to the word "color". Is this possible?