Customization Questions

[socalcane]

Hello all,

I have been neck-deep in code for about a week now as I have been trying to customize my shopping cart to match the look of our redesigned site before adding inventory and eventually going live. For the most part I have figured out the solutions to my problems using the various help files and, of course, Google. However, this has been extremely time-consuming, especially since I am not an expert at this! Rather than spend the next 2-3 weeks buried in code, delaying our launch even more, I am turning to you (the pros!) to see if you might be able to quickly help me solve some of the following customization problems I am still facing.

Our site is RRcoins.net, an old and well established website related to coin collecting. If you happen to visit the site, you'll see that the design is very old and in dire need of an upgrade. Unfortunately, I won't have access to this site's server until we launch the redesign, so I was forced to install zencart on a friend's domain for the meantime. The url is http://www.sexualenhancement.net/store/ and besides the domain name itself, it's completely Safe For Work.

Here are the problems I have remaining:

1. How do I style the "Categories" section on the right sidebar so that there is 20px of space on the left side of the text?

2. In the "Search" section on the right sidebar, is it possible to change the size of the textfield(or textarea, not sure exactly what it's called) so that it is centered, with 20px of space on both sides? How can I do this?

3. Is it possible to force the layout to always take up the full height of the browser window while keeping the footer all the way at the bottom of the screen? How can I do this?

4. If you click on the one product image (the $5 bill) that is featured, you'll be taken to a product page for that product. Unfortunately, this page doesn't look right. First, the main content area loses the repeating background image in the middle, which looks terrible. (The rounded-corner top and bottom images show up, but not the middle graphic that ties it all together.) How do I fix this? Also, how do I style the elements inside of it so that they're not flush against the sides of the container, but rather have at least 20px of space on the right and left. And can I move the product image around within that container... for instance, if I want to move it under the Product name and price?

5. In Internet Explorer, once I click through to buy something, the navMain grows to offer more options than just home/login. Unfortunately this list gets covered up by the image of the coins in my header. Is there a way I can make the image appear below the list so that you can clearly see all the list items in the navMain?

6. Also in Internet Explorer (I'm using IE7), there is a 1px white line that appears all the way down the right side of the design, and I can't for the life of me figure out why it is there! Can anyone help me eliminate this? IE seems to be the only browser that shows this, as Chrome and Firefox both get it right.

That's about all I've got left (I hope!) and it seems like it will take me forever to figure out these solutions on my own. So I would really, really appreciate some help! Thank you so much in advance!

[rstevenson]

1. add to your stylesheet...
.category-top {padding-left: 20px;}
(There are other ways, but that works.)


Sounds like you're developing in IE. That way lies madness! You'll see many recommendations here to use Firefox for development, then check in IE after you're done. You will cause more problems than it's worth doing the reverse.

Rob

[socalcane]

Hey Rob, that fixed problem #1. Thanks a million!

With regards to developing in IE, I don't do that anymore (though it wasn't until recently that I stopped.) Mostly I use Chrome (I like the speed) and Firefox (beginning to learn the useful developer tools now.) It's just that I check everything in IE, too. And since it's still such a popular browser, I have to make sure everything looks good in IE too.

Well, that's one problem down. I would greatly appreciate it if anyone else can help me understand how to fix the other issues!

Joey

[stevesh]

#3 - Check this thread, though if you don't have much content on a page, full height can look a little weird.

http://www.zen-cart.com/forum/showthread.php?t=104107



#4 - I'm not seeing the background problem. As for the layout, that's mostly done with trial and error, using padding and margin in the stylesheet. If you don't have it, get the Web Developer plugin for Firefox, and use it to find out where in the stylesheet each item is styled. There are also some Product Info display mods by Clyde Jones available.

#5 - You might try increasing the height of #logoWrapper 10 or 15 px.

[socalcane]

Stevesh, thanks for the help. I will take a look at the link you provided as soon as possible to work on full-height.

Fortunately I was able to solve problem #4. However, I think I may have picked the long way of doing it... but it works. I am using 2 nested divs inside of the "centerColumn" div so I can give the main content are a top image and a tiling middle image.

Unfortunately, I can't use your suggestion for problem #5. I need the header to remain at 100px, so this shopping cart matches the rest of the site. I tried absolutely positioning the #navMain div, but then the links no longer work - I don't understand why that happens... Any other ideas would be greatly appreciated!

How about problem #2 - does anyone know how I can change the width of the search box in the right column??

Thanks again to everyone who have helped me. I can't begin to think how long some of this would take without your thoughtful suggestions.

[gjh42]

I'm seeing all the text in IE6 larger than in Firefox. This would make the #navMain text taller, and perhaps sit behind the logo so it can't be clicked. Can't use IE7 on my computer.

You could use

#searchContent {padding: 0 2em !important;}
#searchContent input+input+input {
	margin-bottom: 6px;width: 100% !important;
	}

or simply assign a px or percent width like this, since the sidebox is not going to be changing width after you set it.

#searchContent input+input+input {
	margin-bottom: 6px;width: 90% !important;
	}

[stevesh]

Did you actually try #5?

Your site looks fine in Firefox - it's just Internet Explorer where the links are covered, and usually increasing the height of #logoWrapper (not the header) doesn't affect FF.

[jjoslyn]

Hello;

This is my site. I'm using version 1.3.8a.

I've been struggling trying to get the center column to go the full height on all pages. I tried everything listed below:

[QUOTE=stevesh;670237]#3 - Check this thread, though if you don't have much content on a page, full height can look a little weird.

http://www.zen-cart.com/forum/showthread.php?t=104107

It works on all of the pages with 2 exceptions; the create account page and the checkout confirmation page. On both of those pages, there is a fixed amount of space at the bottom of the page that the center column won't extend to, or there is a something with my default background color over-riding the white center column (I don't know which).

Any help would be much appreciated.