Flexible Attributes addon support

Thanks for the quick reply Glenn, and the code.

I can do that no problem, but I may wait for your updated version as I am still in build mode :-)

Paul

Thanks gjh42 for an incredible and easy to use mod! :clap:

I was able to do exactly what I wanted with a combination of your mod and the instructions and advice given in this thread:
http://www.zen-cart.com/forum/showthread.php?t=159306

The result can be seen here

I played with the image size to help control the spacing (not very css literate) but still have some text cramming going on. You can see that the text from the attribute in column two is running into the attribute text in column three.

Is there a simple fix to separate these?

Thanks in advance for your help.

Sorry for a second post, seems I can't edit or add to the previous one.

I came up with a quick fix for my problem; I shortened the attribute text. However, this won't be a long term fix, so if you click the link I provided, and it appears to be fixed, it isn't.

I would still love to hear of a more permanent solution. I am thinking maybe I add padding for the attribute in the css, but am not confident.

Thanks!

Your thinking is correct. You can add padding or margins, such as this example:

.wrapperAttribsOptions {margin-right: 1.0em;}

Thanks gjh42!

I tried the example exactly as you provided and it did work for the attribute in question.

However, you gave me the confidence to try padding. After playing with it for a bit, I settled with padding of .5em. Anything larger pushed the attribute in question off the page.

The padding made all of the products with multiple attributes look less crowded, and very beautiful!

Another question if I may:

Is it possible to just pad the bottom and left? It occurs to me that if it were possible, padding just those two would create the best appearance for all of the attributes.

Thanks again for the great mod and super support!

.wrapperAttribsOptions {margin: 0 0 0.5em 0.5em;}

Thanks a million! Works beautifully!

I am actually still in shock. You have also taught me something new.

This mod allows me to control the exact placement of each and every attribute, individually. Genius!

I also see that you provided a way for us to control the attribute font too.

Thanks again for a brilliant and easy to use mod.

Yep, its me again... sorry. Just when it looked like I learned enough to quit bugging you, I get too big for my britches.

Here is the problem

Here is the css:
#wAttrib-12 {float: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-13 {float: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-14 {float: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-15 {clear: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-16 {float: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-17 {float: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-18 {float: left; margin: 0 0 2.0em 0;}

The numbers do correspond to the attribute option names in order. I am trying to create 3 rows, but for some reason I can't get 16 to share the row with 15. I haven't even tried playing with 17 and 18 yet.

Thanks in advance for your time and expertise.

Lisa

#wAttrib-15 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}

You changed the float to clear on wAttrib-15, instead of adding the clear. Without the float, the div takes the full width of its container and keeps anything else from joining it.

Thanks Glen for the quick reply. I changed 15 to your example and some strange things are taking place.
click here to see

In a perfect world, 12, 13, 14 would sit on line one.

15, 16 on line two, and since I don't think 17 and 18 will fit on line two, they should be on line three.

Key:
12 14kt White Gold
13 14kt Yellow Gold
14 Platinum
15 White Diamond
16 White Sapphire
17 White Topaz
18 Black Diamond

Thanks in advance (again) for your time.

It's behaving just as it ought to, given your styling. If you want 17 to start a new line, you need to add the clear: left; to it:

#wAttrib-17 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}

A note for those interested: There is a changed file for v1.3.9 that relates to Flexible Attributes, as described in another thread. I copy the info here.

The only change for v1.3.9 is two lines in /includes/modules/attributes.php (around line 400) where
ereg_replace('txt_',
is replaced by
preg_replace('/txt_/',
for PHP5.3 compatibility.

If your server is still running PHP5.2.x, you can use the existing mod as is; for future-proofing, you can make those two edits to the mod version of the file. I will update the mod with the new file, but can't say how long it will be until it is available in Free Addons.

No luck. Either way they get squirrelly. I can only guess it has something to do with some other conflicting css somewhere.

The best case for now is this

There was another rule that needed to be changed in exactly the same way, as I mentioned in post 30. Modifying these rules as shown gives a neat-looking result.```
#wAttrib-15 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-16 {float: left; margin: 0 2.0em 0em 0;}
#wAttrib-17 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-18 {float: left; margin: 0 0 2.0em 0;}

If you want something different, you can alter to taste.

Thanks for continuing to offer your expertise. I should have been more clear in my last post.

I added both changes exactly as you suggested, and just to make sure I didn't factor into the issue, I changed it again using the block of css you provided with copy and paste.

Here is the result

Not only do some squish, but after the first three, they jump out of order. This is why I assumed there was something else conflicting.

I'm not sure what you mean by "squishing". They all look similarly spaced; if you want the line or element spacing a bit larger, that can be done in the stylesheet. They are also in numerical order of id. If you want something else, you can set the sort order in Option Name Manager.

When I posted, you did not have the changes to #wAttrib-15 in effect.

I am seeing it now in IE8 (my computer is not letting Firefox open right now), but it looked fine in Firefox when I tested it.

You are right, when you posted I had already put it back. The sort order in the option name is already applied. Since it looks good to you I am confused. Here is what I am seeing in the attached image

Bonkycat:

You are right, when you posted I had already put it back. The sort order in the option name is already applied. Since it looks good to you I am confused. Here is what I am seeing in the attached image
I have just installed the Flexible Attributes mod and think it is great - thankyou. My website is not quite finished but am wandering if somebody that knows CSS can help me out. The page I am having problems with is here:

http://www.umbrellas4life.com/index.php?main_page=product_info&cPath=4_28&products_id=89

And my stylesheet looks like this:

/**

• Additional CSS Stylesheet
• @copyright Copyright 2009 Glenn Herbert
• @copyright Portions Copyright 2003-2006 Zen Cart Development Team
• @license http://www.gnu.org/licenses/ GNU Public License V3.0
• @version $Id: stylesheet_flexible_attributes.css $
• for Flexible Attributes by Glenn Herbert (gjh42) 20091228
  */
  /*example stylesheet for a set of product attributes
  These are samples of the kinds of styling you may want to apply to various kinds of elements.
  Adjust as required. Comment out any that are not useful to you.
  For attributes of a single product, you can save this file as p_##.css where ## is the product id.
  */
  /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-1 {float: left; margin-left: 1.3em; margin-right: 3.0em;}
  #wAttrib-1 h4 {display: none;}
  #wAttrib-15 {float: left; margin-right: 3.0em;}/this will sit beside #wAttrib-1/
  #wAttrib-15 h4 {display: none;}
  #wAttrib-18 {float: left; margin-right: 3.0em;}/this will sit beside #wAttrib-15/
  #wAttrib-18 h4 {display: none;}
  #wAttrib-19 {float: left;}/this will sit beside #wAttrib-18/
  #wAttrib-19 h4 {display: none;}
  #wAttrib-20 {clear: left; float: left; margin-left: 1.3em; margin-right: 3.0em;}/this will sit on a new line/
  #wAttrib-20 h4 {display: none;}
  #wAttrib-21 {float: left; margin-right: 3.0em;}/this will sit beside #wAttrib-20/
  #wAttrib-21 h4 {display: none;}
  #wAttrib-22 {float: left; margin-right: 3.0em;}/this will sit beside #wAttrib-21/
  #wAttrib-22 h4 {display: none;}
  #wAttrib-23 {float: left;}/this will sit beside #wAttrib-22/
  #wAttrib-23 h4 {display: none;}
  #wAttrib-3 {clear: left; float: left; margin-left: 0.95em; margin-top: 3.0em;}/this will sit on a new line/
  #wAttrib-13 {clear: left; float: left; margin-left: 0.85em;}/this will sit on a new line/
  #wAttrib-14 {clear: left; float: left; margin-left: 0.85em; margin-right: 5.0em;}/this will sit on a new line/
  #wAttrib-17 {float: right; margin-right: 1.1em;}/this will sit beside #wAttrib-14/
  #wAttrib-56 h3 {font-size: 1.0em; font-weight: normal;}/make comments above attribute like standard text/
  #wAttrib-57 .attribsOptions {display: none;}/for a read-only attribute to hide all but comments/
  #wAttrib-24 h4 {display: none;}
  #wAttrib-25 h4 {display: none;}
  #wAttrib-26 h4 {display: none;}
  #wAttrib-27 h4 {display: none;}
  #wAttrib-28 h4 {display: none;}
  #wAttrib-29 h4 {display: none;}
  #wAttrib-30 h4 {display: none;}
  #wAttrib-31 h4 {display: none;}

#wAttrib-24 {clear: left; float: left; margin-left: 1.3em; margin-right: 9.2em;}
#wAttrib-25 {float: left; margin-right: 9.2em;}
#wAttrib-26 {float: left; margin-right: 9.2em;}
#wAttrib-27 {float: left;}
#wAttrib-28 {clear: left; float: left; margin-left: 1.3em; margin-right: 9.2em;}
#wAttrib-29 {float: left; margin-right: 9.2em;}
#wAttrib-30 {float: left; margin-right: 9.2em;}
#wAttrib-31 {float: left;}

My problem is that it all looks aligned and neat in IE8 but in previous versions of IE and Firefox, my attributes, controlled by this CSS become unaligned. I know very little about stylesheets ... Am I missing something out or using 'em's when I should be using 'px's? Any help would be greatly appreciated.

Which attributes become unaligned, and by how much? All I see in Firefox is that #wAttrib-19 and #wAttrib-27 are off by two pixels (as are -23 and -31). You appear to have reconfigured your stylesheet since posting, so I can't address what you saw then.
You now have

#wAttrib-24 {clear: left; float: left; margin-left: 1.3em; margin-right: 5.0em;}/this will sit on a new line/
#wAttrib-25 {float: left; margin-right: 5.0em;}/this will sit beside #wAttrib-24/
#wAttrib-26 {float: left; margin-right: 4.85em;}/this will sit beside #wAttrib-25/
#wAttrib-27 {float: left;}/this will sit beside #wAttrib-26/

which would account for the two px - is this to correct something in IE?

Also, you have a few style properties repeated for every attribute. Instead of specifying them for every id, you could be much more efficient and specify them for .wrapperAttribsOptions {} or .wrapperAttribsOptions h4 {} once; this will apply to all #wAttrib- elements.

Bonkycat - I don't know why you are seeing such a strange layout. I also see it correctly in Firefox now, with rows of three metals, two stones and two stones. Could it have been some sort of cache problem? Do you still have the problem?