Flexible Attributes addon support

[labatts03]

Mr. Herbert<
Just wanted to thank you for your help. I forgot I tried to get CSS to get them to line up earlier, and never took them out. I guess I have to get more proficient with the firebug program, would have told me. This problem drove me carazy, so thanks for taking a look at my site.

Mike

[johng157]

Hi Glenn

This mod has been and will continue to be a Godsend.
I feel a bit of a dunce for not knowing this but the drop-down boxes are pushing content to the right of the page. I'm pretty sure I need to add 'position:absolute' to the css somewhere but I can't figure out where - I fear it may not even be within Flexible Attributes but I feel I have to cover all options. Here's a link to one of the pages in question (I'm still at the tinkering stage so the site is a long way from being finished):

http://www.picturename.co.uk/catalog...roducts_id=186

Hope you can help. I'm in can't-see-the-wood-for-the-trees territory at the mo'.

Cheers

[hockey2112]

I tried following the method discussed by gjh42 and tsrplatelayer to set up columns of attributes, but I must be missing something... I am trying to set up three columns of attributes. Each column should have three attribute drop-down menus, as such:

Column 1:
Juice flavor 1 [dropdown]
Juice flavor 2 [dropdown]
Juice flavor 3 [dropdown]

Column 2:
Meal bar flavor 1 [dropdown]
Meal bar flavor 2 [dropdown]
Meal bar flavor 3 [dropdown]

Column 3:
Dessert flavor 1 [dropdown]
Dessert flavor 2 [dropdown]
Dessert flavor 3 [dropdown]


I would also like to be able to add a unique column "header" icon above each column... is that possible?

Can anyone please help me to determine how such a setup would be accomplished using the stylesheet_flexible_attributes.css file?

Thanks!

[gjh42]

First off, to get the column organization you want, you will need to sort the attributes like
Juice flavor 1 [dropdown]
Meal bar flavor 1 [dropdown]
Dessert flavor 1 [dropdown]
Juice flavor 2 [dropdown]
Meal bar flavor 2 [dropdown]
Dessert flavor 2 [dropdown]
Juice flavor 3 [dropdown]
Meal bar flavor 3 [dropdown]
Dessert flavor 3 [dropdown]

Then you can use stylesheet rules to force new lines after every third attribute, giving a "column-like" layout.
Juice flavor 1 [dropdown] Meal bar flavor 1 [dropdown] Dessert flavor 1 [dropdown]
Juice flavor 2 [dropdown] Meal bar flavor 2 [dropdown] Dessert flavor 2 [dropdown]
Juice flavor 3 [dropdown] Meal bar flavor 3 [dropdown] Dessert flavor 3 [dropdown]

For the "Column x" headings, you could use read-only attributes.

The readme describes the pattern of style rules to produce columns. Among others, these
#wAttrib-11 {clear: left; float: left;}
#wAttrib-12 {float: left;}/*this will sit beside #wAttrib-11*/
adjusted to the actual ids will make the columns.

{clear: left; float: left;} will start a new line, and let the next attribute sit beside this one.
{float: left;} will let this attribute sit beside the previous one.

[hockey2112]

First off, to get the column organization you want, you will need to sort the attributes like
Juice flavor 1 [dropdown]
Meal bar flavor 1 [dropdown]
Dessert flavor 1 [dropdown]
Juice flavor 2 [dropdown]
Meal bar flavor 2 [dropdown]
Dessert flavor 2 [dropdown]
Juice flavor 3 [dropdown]
Meal bar flavor 3 [dropdown]
Dessert flavor 3 [dropdown]

Then you can use stylesheet rules to force new lines after every third attribute, giving a "column-like" layout.
Juice flavor 1 [dropdown] Meal bar flavor 1 [dropdown] Dessert flavor 1 [dropdown]
Juice flavor 2 [dropdown] Meal bar flavor 2 [dropdown] Dessert flavor 2 [dropdown]
Juice flavor 3 [dropdown] Meal bar flavor 3 [dropdown] Dessert flavor 3 [dropdown]

For the "Column x" headings, you could use read-only attributes.

The readme describes the pattern of style rules to produce columns. Among others, these
#wAttrib-11 {clear: left; float: left;}
#wAttrib-12 {float: left;}/*this will sit beside #wAttrib-11*/
adjusted to the actual ids will make the columns.

{clear: left; float: left;} will start a new line, and let the next attribute sit beside this one.
{float: left;} will let this attribute sit beside the previous one.

AWESOME, it is working great. Thanks so much for your help!!

[Pablo]

I am trying to get my radio buttons to line up side by side and can't seem to get the right code in the .css file. This my css file


/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-6 {clear: left; float: left;}
#wAttrib-6 {float: left;}/*this will sit beside #wAttrib-11*/
#wAttrib-6 {float: left;}/*this will sit on a new line*/
/* #wAttrib-6 h4 {display: none;}
/* #wAttrib-6 h3 {font-size: 1em; font-weight: normal;}/*make comments above attribute like standard text*/
/* #wAttrib-35 .attribsOptions {display: none;}/*for a read-only attribute to hide all but comments*/


you can see the product here
readingglasses4less.com/index.php?main_page=product_info&cPath=1_15&products_id=67

Could you help please?

[gjh42]

Add to your stylesheet

.wrapperAttribsOptions label+br {display: none;}

[johng157]

Add to your stylesheet

.wrapperAttribsOptions label+br {display: none;}

Sorry it's taken a while to respond - been away for a while.
Thanks for this. Worked a treat.

[andythepict]

hi,
i've just installed Flexible Attributes and i can't get it to lay my checkboxes out horizontally. my code looks like this;

/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-129 {float: left;}
#wAttrib-130 {float: left;}/*this will sit beside #wAttrib-11*/
#wAttrib-131 {float: left;}
#wAttrib-132 {clear: left;}/*this will sit on a new line*/
#wAttrib-133 h4 {display: none;}
#wAttrib-15 h3 {font-size: 1em; font-weight: normal;}/*make comments above attribute like standard text*/
#wAttrib-35 .attribsOptions {display: none;}/*for a read-only attribute to hide all but comments*/

what am i doing wrong?!

sorry if i'm being really stupid!

url http://mitdts.co.uk/olive2/index.php...products_id=54

[gjh42]

You have this rule which causes all of those checkboxes to each take the full page width:
stylesheet.css (line 507)

.attribImg {
margin: 0.3em 0;
width: 100%;
}

Change it to 33% or whatever works for you.