Flexible Attributes addon support

[gjh42]

Since the labels are inline elements, they cannot use the width property. You can get around this by making them "inline-block":

#wAttrib-8 label {display: inline-block; width: 5em;}
#wAttrib-8 #attrib-8-13+label {display: inline;}

You then need to set the first label back to inline so it can take the width it needs to stay on one line.
...Or
#wAttrib-8 #attrib-8-13+label {display: none;}
if you want that hidden.

[tsrplatelayer]

well that all seems to work., I appreciate the tutorial.

There is a 'discrepancy' between FF and other browsers. FF is the odd one out, IE, Opera, Safari, Google, all leave a gap between the name and the first row of buttons. FF does not leave this extra row gap.

I have

#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br {display:none;} /*turn off All br on this set of buttons */
#wAttrib-8 label {display: inline-block; width: 5.5em;} /* set widths */
#attrib-8-13, #attrib-8-13+label {display:none !important;} /* hide first button and label */
#attrib-8-13+label+br {display:block !important; } /* turn this br on again */

I set the hidden label to 'g' (arbitary - its hidden) in case it was an artifact of the text being too long for the block-width - it obviously isnt that.

I can live with it though.

I still say the CSS was much simpler with divs around each button - maybe a thought for future release.

Once again many thanks for the help

[gjh42]

I only modified what was necessary when I first built the mod, but I agree that a wrapper for each button would make it easier to handle them as units. I probably will do that when I do a new version of it.

[littlekid440]

Hello
When I first started using zen cart I could not set my attributes the way I wanted and gave up on zen cart. Now im back and this MOD is exactly what I have been looking for!!

There are a few things I cant figure out how to set.
My test site is
http://xlegends.com/beta/index.php?m...&products_id=5
What I want to do is...
1. Center the attribute name
2. Create spacing between one attribute and another
3. Make everything look like it is in a table
4. Color the background of the option name (not just the text area but the entire length.

I've tried everything I can think of but maybe my css skills are lacking. I think creating spacing between the attribute value can be done by adding <br> somewhere in the attribute code but cant seem to find where.

My attribute name is set to text only and radio button on the side.

any help would be greatly appreciated.

[gjh42]

Replace your stylesheet_flexible_attributes.css content with this:

/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/

/*.back {font-size: 1.3em; background-color: #FFFFff;
text-decoration: none;
margin:0.0em;
display:inline-block;
padding:0em;
align:center;
border:0px solid #e05030;}*/

h3#attribsOptionsText {text-align: center; font-size: 1.6em;}/*hide the "Please Choose:" heading*/
/* display: center; is invalid - do you want text centered?*/

h4.optionName {font-size: 1.3em; background-color: #FFFF00;
text-decoration: none;
margin:0;
padding:0;
border:0px solid #e05030;
float:none; /*Color the background of the option name - full width*/
text-align:center;/*Center the attribute name*/
}

.optionName+br/*to eliminate the effect of your unnecessary added <br>*/, .optionName+br+.back+br/*to eliminate the extra space from standard <br class="clearBoth" />*/ {display: none;}

.wrapperAttribsOptions {/*move common style properties here*/
font-size: 1.4em;
float:left;
padding:4px; 
margin-right: 0.5em;
border:1px solid #e05030;
line-height: 2.0;
}

.attribsOptions .back {float:none;}

.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/

#wAttrib-1 { /*only need properties in these when different from common*/
}
#wAttrib-2 {
}
#wAttrib-3 {
text-decoration:line-through;
}
#wAttrib-4 {
padding:2px;
color:#e05830;
font-weight:bold;
border:2px solid #e05030;
}
#wAttrib-5 {
}
#wAttrib-6 {
border:1px solid #ffffff;
line-height: 3.0;
}

.attribsCheckbox {
display: none;
}
.attribsRadioButton {
display: none;
}

[littlekid440]

Thank You so much for your help!
It looks so much better already

Theres still one thing im having a problem with...
for a page with many options the radio button does not come next to the rest of the attributes. This is prob because I have the text hidden but I do not see any other way I can achieve without using this kind of method.
Is there a way to move the radio button next to the rest of the display attributes?
Some pages will have has many as 7 items...

What I am trying to do is to achieve as close to the original layout as possible
Original can be found at: http://www.perfumeblvd.com/angel_perfume_women_mini.htm

Beta site is at :
http://xlegends.com/beta/index.php?m...&products_id=8

Thank you so much for your help!
when the website is fully operational i'll be sure to send you a thank you gift certificate.

[blackriver]

Hi, I am looking for a way to resize my attribute images, will this mod allow me to do this? I've searched all over the forum (and elsewhere) I can't seem to find anyway to get the attributes at the correct size.

Any advice would be gratefully received.

Thanks

[littlekid440]

im not sure how this mod can/will be useful for images but why dont you check out this thread...
http://www.zen-cart.com/forum/showthread.php?t=109066

[blackriver]

im not sure how this mod can/will be useful for images but why dont you check out this thread...
http://www.zen-cart.com/forum/showthread.php?t=109066

Yeah I saw that one and tried the changes but I think that changes the space between the images not the sizes as it made no difference for me.

Thanks though!

[littlekid440]

I know its possible to do this... its just a couple of lines of code
I had to change the manufacture's image size on every product info page and it wasn't build in.. i was able to find a modded code that worked for me.
I don't know how good your PHP skills are but check out
http://www.zen-cart.com/forum/showthread.php?t=119585
its not what you are looking for but its basically the same consent
and don't give up someone will find a way to solve this