Eliminating wrap-arounds

Thanks for the reply. What you are saying is kinda what I figured. But, I'm still missing something here. Let's assume that I'm using Sophyblue to display (which I think I am). Well, the readme file said to insert a "custom" file at the includes/templates/ level. So, now my directory would read...

includes/templates/sophyblue1, classic, mistic, sophyblue, template_default, custom

But now, I can't rename that folder to sophyblue because then there would be 2 folders at that level named sophyblue which I assume would cause a conflict. What am I missing? Is my custom folder in the wrong place?

Please help!

OK. Just figured it out. Thanks for the help. Tomorrow I will mess with the settings to try to get the spacing to work right. I put the files in place and checked out my store and they definately had an effect, but I'll have to play with it. So, I moved the files back out for now.

One thing I did see is a big yellow box that was sitting behind some of my pictures. Any idea what that is? I know I can play with the settings to move the pictures, but that box threw me for a loop.

thanks.

You should be renaming /your_template/ folders to the actual template name before ever uploading them to your server; that way, the files will drop into the correct places with no further manipulation, and you won't have to worry about duplicate folder names.

I haven't used ckosloff's mod files, so am not familiar with effects like a yellow box.

Thanks for the replies. I did a bunch more searching in the turtorials and figured out what I was missing regarding the template override system. So, now I've got the modification installed and working. Now I have a layout question. Please see this screen shot.

As you can see, the additional images are all clumped together. Is there a way to spread them out? I played with all the settings in the add-on css file but that only seemed to change the position of the whole group on the screen. If the distance between images is in the tpl_product_info_display file, I couldn't find it.

Also, is there a way that I can change the height of the yellow box that surrounds the description so that it just surrounds the description and does not extend down to the base of the additional images?

Other than these two little tweaks for my store, I love the mod!

If you want styling help, you'll need to let us see the page live. It appears you have it on a test site or something, as your main site does not use the mod.

OK. The page is live again. I applied the mod to the page to get that screen shot and then I took it back off (moved to a temp folder) so that if anyone was trying to visit my page in the meantime they would see it without the mod and it wouldn't look squashed like it does. I'll live it active so that I can get this help. The site is https://www.truehopeinc.com/products

Thanks!

For the background, remove it from the wrapper and apply it to the individual contents. You will need to adjust margins and padding as shown.```
#productDescriptionWrapper {
width: 320px;
margin-left: 180px;
/background-color: #f0e68c;/
}

#productAdditionalImages .additionalImages a {
float: left;
margin-left: 10px;
}
#productName, #productPrices {background: #aabbcc; margin: 0; padding: 0.4em;}
#productDescription {background: #aabbcc;}
/* end of Product Display code */

For the squashed images, set the number per row to 1 or 2, whatever fits reliably.
Configuration > Images > Product Info - Number of Additional Images per Row

OK. I'm really trying here. I know almost nothing about html coding but by looking at the tpl_product_info_display.php file I can see that the individual display modules are stacked. Here is what I'm seeing...
-Display Code
---Images Wrapper
------Main Product Image
------Additional Images
---Images Wrapper end
---Product Description Wrapper
------Product Name
------Product Price Block
------Free Ship Icon
------Product Description
---Product Description Wrapper end
-Display Code end

Then it goes into the add to cart box, shipping info, and so on. Well, I tried just moving the "additional images" block to just below the end of the product description wrapper thinking that would do the trick. Well, it did move the additional images down, bit it also moved the description down and the "add to cart" box and shipping information moved up to take it's place. So, I really have no idea how to order these blocks of code so that they move to the correct location on the page. Any help would be greatly appreciated.

Thanks!

Thanks for the reply. I added the code like you suggested and now I have a blue box that is specifically around the product name and description. But then the yellow box continues down below the blue box until the bottom of the additional product images. Not sure where that extra yellow is coming from since I deleted that line out of the code like you suggested.

Assuming I can get rid of the rest of that yellow, it will leave a substantial open space to the right of the additional images. Can I change the code so that the additional images fill that space? So that 3 of the pictures are evenly spaced out accross the screen? I assume I'll have to move them outside the images wrapper but when I tried to do that, something else went up and filled the space... If this is too much of a pain, I can uninstall the mod and go back to the original layout.

Any help is appreciated.

Scratch part of that last post. I figured out why the yellow was still there for part of it. I had left the old .css file in the directory and just renamed it thinking that would make it invalid. Now I've moved it to a temp folder so it's not affecting things at all and the yellow is gone. But, I still do have that large space next to the additional product images. Can I get those to fill the space so that they extend underneath the product description and then I could move back to 3 or 4 per row?

At the same time, if possible I'd love to move the attributes selector to a position above the add to cart box?

I'm probably asking for the world, but let me know if it's somewhat easily done.

Since this mod is specifically designed to put the additional images in a column below the main image, your best bet is to uninstall it and do a few tweaks to the base version of the file. Copy tpl_product_info_display.php from the /template_default/ folder to your custom folder. You can move blocks of code in that file to change the display order of elements. You will probably want some of the stylesheet rules from the mod.

That makes sense. Being so new at this, though, I figure I'd get into it and screw something really bad. Though, I guess using the override system, it's pretty easy to undo all that.

I decided to go a little different route that is hopefully a little easier. I'm part of the way there but could use some additional direction. I figured instead of trying to get the additional pictures out of the column (since the mod does such a good job of putting them there) I would just try to fill the extra space next to the pictures with the attributes drop down, the shipping details and the add to cart box. So, in the code, I moved the blocks for each of those inside the "Product Description Wrapper". That only partially worked. The attributes drop down now sits just below the product description. Perfect! But, the shipping info and the add to cart box still end up below and to the right of the last additional picture. Can I move those up so they sit just beneath the attributes drop down?

Thanks!

There is a quirk of floated elements that they seem to reach outside of their container and catch a "clear: none:" property, even when that is in a separate container. Add to your stylesheet_additional_images```
#productDescriptionWrapper .clearBoth {clear: none;}
#productReviewLink {float: right;}

Fortunately, that seems to work for your layout; some layouts have problems when the clear: both; is removed.

Thanks for the reply. In the meantime I found a slightly different way of doing it that I like. I took the additional images out of the main image wrapper and put them below. Then I put the add to cart box below that. Looks pretty good to me. Thanks so much for all the help. It has made me at least moderately dangerous at this html code stuff!

I'm back with one more, hopefully simple question. When I finished up last week, I thought I had everything set just the way I like it. But, when I opened it up today, I'm seeing a misalignment that I didn't see last week. Again my website is...

https://www.truehopeinc.com/products

If you go into any of the products you'll see that the main image shows 1st, aligned on the left. Then, the product description is aligned to the right, but positioned below the level of the product image. There is ample space to fit both side by side, so I can't figure out why they are staggered. How do I need to change the code to make these line up? Weird thing is they were lined up fine last week.....

gjh42, does the code you mentioned in your last post on this thread apply here? If so, where do I insert that into the stylesheet? Can it just go anywhere?

Thanks

The page displays fine in Firefox, but IE6 shows the behavior you describe. It appears that the main image is shifted to the right in IE; I can't tell why. I do see an error in your stylesheet_additional_images.css:```
#productAdditionalImages .additionalImages a {
float: center;
margin-left: 0px;
}

Change float: center;  to text-align: center; or float: none; .

Thanks for the tip and checking on it for me! I made the change to text-align: center; and that didn't change anything. But, as I read your message, I realized that last week I updated to IE8 and at that time everything was looking fine. But, at the end of the day on Friday I had a problem loading a work related website so I had to switch to compatibility mode on the IE8 browser. That was still enabled so it was like I was seeing the page in IE6, just like you stated. I turned that compatibility mode off and now it's showing up fine, just like you saw in Firefox. So, I guess I'm all set. Thanks again for the support!

I had been using the CSS mod without an issue until recently. Long story short, I'm adding a new line (print your own design) to the site since I have not had time to build on my template base.

On http://www.wholesale4realtors.com/cart/index.php?main_page=product_info&cPath=100_101&products_id=222

...the product description is overlapping the attributes. I would normally say this is a CSS thing, but the reason I'm stumped is because if you click on any of the template-based products the layout does not do this, so why would it be applying a different set of rules for only the products of the new category?

you know another way to prevent the wrap around is with a table system.

http://test.gorillagear.ca/index.php?main_page=product_info&cPath=22&products_id=8

I hope someone is still reading this thread otherwise I'll start another. I'm playing around with a new layout based on the Andover Modern template and with the Additional Images with CSS and Image Handler 2 mods. As can be seen here http://www.thegardenercompany.com/boutique/index.php?main_page=product_info&cPath=1_2&products_id=1, the additional images sit on top of the text. How can this be avoided ? Ideally, I'd like the text to sit underneath the additional images.