Attributes Layout

[wayno]

Hi all,

Was just wondering if anyone can help with a small issue.

I am using attributes to control options on several products. I have this part working fine and using the dynamic price updater have the prices updating as I select the options.

What I would like to do is tidy up how the attributes are displayed on the screen so they don't take up so much room on the screen. The have double spacing vertically and it would be good if I could get it so each attribute sits one after the other directly underneath each other with no space in between. I am guessing this is something with my stylesheet but not really sure how to go about fixing this.

Also is there any way that the base price and "buy now" be displayed on each item. I have seen other carts that do this where they have the "buy now" and then "options" underneath without having to actually select the product. I understand the drawbacks of this might be that people never get to see the options but if someone just wants a base model with no options then it would be good to have a buy now button instead of "see more" displayed.

Anyway the first one is the one I would really like to get sorted, the second is just a wish list!

Would really appreciate some help on this so thanks to anyone in advance that is able to.

Cheers
Wayne

[mc12345678]

Just sort of cruising through, but notice that there is no information given for one to go see what's going on. Please provide a link to one of the products where you would like the spacing reduced between attributes (vertically).

As to the other "issue" ease of doing it I guess depends on the complexity of the product/attribute combinations desired to offer with a "buy now" button.

[wayno]

[QUOTE=mc12345678;1263242]Just sort of cruising through, but notice that there is no information given for one to go see what's going on. Please provide a link to one of the products where you would like the spacing reduced between attributes (vertically).

Thanks for your reply. Sorry, I meant to link to my site...still waking up at the time!

One of the links is :
http://www.satgear.com.au/catalog/in...products_id=45

or

http://www.satgear.com.au/catalog/in...roducts_id=154

Appreciate any help to fix this. Not really worried about the second issue. Was thinking if I can find the text where it says "see more" I might just change the text to something else and make it stand out more but not too worried about this isdue.

Just be nice to sort out my attributes so they look neat.

Cheers and thanks.

[RocketSites]

Hi Wayne,

To remove the 'double spacing' you'll need to remove the <br class="clearBoth"> that is rendered between each .wrapperAttribsOptions div.

This will most likely be present in includes/templates/YOUR_TEMPLATE/templates/tpl_modules_attributes.php

[mc12345678]

Personally I would recommend using css instead of physical removal. The thing is that I'd have to look around a bit on how to modify a tag that is a subset of an attribute using css. It is also why I suggested providing a link so that a kind coder having access to tools such as firebug for firefox or IE developer tools, etc... Might be able to identify where in the css to put what. Not easy for me to do from a mobile device. :) doable using various online tools if I had to in an emergency, but time consuming otherwise from a mobile.

[stevesh]

One of the elements causing that spacing (and others) is the line-height part of the body rule in stylesheet.css.

[mc12345678]

Fyi, not commented on yet in this thread is that css changes can be made on a "page" basis, ie. By category, product, page type (product page, document page, etc..) See: http://www.zen-cart.com/wiki/index.p...dividual_Pages

And the follow the link at the bottom of the page for stylesheet naming to implement.

And here is a link to something I was thinking related to this issue: http://www.zen-cart.com/showthread.p...50#post1237250

[lat9]

Hi Wayne,

To remove the 'double spacing' you'll need to remove the <br class="clearBoth"> that is rendered between each .wrapperAttribsOptions div.

This will most likely be present in includes/templates/YOUR_TEMPLATE/templates/tpl_modules_attributes.php

As mc12345678 pointed out, you're best off "removing" the unwanted breaks via css. Add the following to /includes/templates/mobishop_blue/css/product_info.css:

.wrapperAttribsOptions+br { display: none; }

[wayno]

As mc12345678 pointed out, you're best off "removing" the unwanted breaks via css. Add the following to /includes/templates/mobishop_blue/css/product_info.css:

.wrapperAttribsOptions+br { display: none; }

Wow guys, thank you all so much for your help.

I did the above and it has almost worked. It has removed the double spacing nicely but for some reason the first attribute must have some code somewhere causing it to put about four spaces between it and the second attribute. I am guessing this is possibly in stylesheet.css??? I had a bit of a look myself and I can see there is something there that looks like it is rendering it 474 x 72px whereas all the other attribute boxes are 474 x 23px. It seems it is calling for "div.wrapperAttribsOptions" but I can't for the life of me work out where it located.

Sorry, it is probably obvious to you guys but I am still getting my head around all of this and learning so much about Zen in the process.

If you have any ideas on this one, again much appreciated and thanks so much for all the responses.

[mc12345678]

Played around a little bit with adjusting the site. It looks like the photo height in some way is causing the gap between the first and second attribute.

I did find if I applied .clearBoth {clear:none} then it all seemed to work at least when the screen was resized one way or another, but, also seemed to possibly adjust some other factors. Was trying to find the one or more locations to apply that setting so that it would be something on purpose that worked not something by accident. :) I also found that if I changed the image from float:left to float:none then that also fixed that aspect, but moved the list of attributes down to be more like the "mobile" version of the template. Other than downsizing the image from the 200px to about 130px, I am not sure what is interfering to cause just that second row to be pushed down relative to the image...