Modifying a 4.4.1 skin questions...
 

Well I am currently in the middle of upgrading artistictunes_car_tires skin.

I am running into something small I can't seem to figure out. To be honest I am almost ashamed to ask because it seems so basic.

How do you remove the huge gap between category and products....image enclosed.

Normally something like that is a .css item with padding or height. I even thought it might be a background image but nothing that I can easily see. I even removed all the css code and still nothing. Looked in the skin .css and the common files .css.

FIrebug usually saves the way but I still have no luck explaining the gap.

Tried webmaster mode and couldn't find it that way.

Thanks in advance.

Re: Modifying a 4.4.1 skin questions...
 

Use Firebug. This could be the current category image size or description or margins/paddings. Also make sure you are editing the right files - almost all skins have their own css files under the skin's css directory

Re: Modifying a 4.4.1 skin questions...
 

Thank Steve.

I have used firebug and looked in the css in the common files AND the skin file.

I see nothing that points to it.

The image under it is page_bg.gif and that covers the whole page.

I am completely stumped.....

Re: Modifying a 4.4.1 skin questions...
 

Re: Modifying a 4.4.1 skin questions...
 

Thank you.

Here is a clean copy of the skin.

Re: Modifying a 4.4.1 skin questions...
 

Here is a screenshot - you need to either completelly remove the category image and description references form the templates or have image and description for each category or edit css classes to reduce the blank space or have if statement in the template to show them only if they exists


http://www.cflsystems.com/public/everyone/www-eliocamacho-com-chromatherapy.png

Re: Modifying a 4.4.1 skin questions...
 

I tried the css on that but I understand now that what I wanted to change was in the .tpl file.

Thank you. Thank you.

Re: Modifying a 4.4.1 skin questions...
 

OK...I needing some help again. No matter what I can't change the width of the table cells to get the items closer together?

Anyone?

Re: Modifying a 4.4.1 skin questions...
 

The width there is calculated automatically based on how many items per row and the space available (I think). So if your site is not fixed width overall you will get different results on different screen sizes.

Re: Modifying a 4.4.1 skin questions...
 

Check the css for the table width. It is probably set to 100%. If it is at 100%, you probably will have trouble trying to change the individual table cell widths.

---

Re: Modifying a 4.4.1 skin questions...
 

I thought and changed every width number and nothing.

There is ONE width that I can't change....Image below.

It gave me a percentage and everything but point at NO css file. Could it be in a tpl file. If so which tpl?

Re: Modifying a 4.4.1 skin questions...
 

In the screen shot you posted - you can see a class at the top for the table called width-100. Did you try changing that class from 100% to something else?

If you want to remove the width settings you are pointing out - you can use webmaster mode to find the template. It is probably in products_t.tpl, where there is a call to product_thumbnail.tpl. But if you are keeping 3 table cells in each row, and you want them all to be the same width, I don't think you are going to want to change that - each cell is 1/3 of the total width - which is probably set to 100%.

---

Re: Modifying a 4.4.1 skin questions...
 

I think that one is applied though js or an {assign.... width...} in the template file

Re: Modifying a 4.4.1 skin questions...
 

Well I have gotten it closer but this is as narrow as I can get it. I want the items closer together and then moved to the far right.

Here is the link....


I have changed the widths on the TD here and NOTHING happens.

BTW...I think you are right I don't want to change the 33% because it keep the columns equally spaced.

Re: Modifying a 4.4.1 skin questions...
 

You have a right margin on your .image class that is controlling the table cell widths.

You can step through everything in the html tab in firebug - the padding and margins on the elements will highlight in blue and yellow - and then you can see the sizes of the various elements, and it will show you what is happening.

---

Re: Modifying a 4.4.1 skin questions...
 

I am sorry to sound like a noob but I can't see the .image class that controls the width of the table.

Every change has no affect on the width.

BTW...Thank you very much

Re: Modifying a 4.4.1 skin questions...
 

Just explore in firebug - click on the table cell, then on every thing in the table cell. It will visually display the margins and padding and you can see the width each element is occupying. (See attachment).

---

Re: Modifying a 4.4.1 skin questions...
 

I should be downgraded from noob to village idiot. I must have looked at this what seems a hundred times and never saw that. Geez.

Thank you Thank you

Re: Modifying a 4.4.1 skin questions...
 

Well I am getting close but I have run into a little complication.


I wanted to change the design of the thumbnails to all SQUARE images.

I exported all the thumbnails and then using a batch feature in Photoshop had them all made into the size and look I want.

Then I imported all the redesigned thumbnails back to the server. After some problems because the xCart kept skewing the images to look similar to the original I modified this file...

File: /common_files/product_thumbnail.tpl


I changed the width and height to 150px.

NOW....

When you click the thumbnail the main image is only a thumbnail.

Why does the image default to the Thumbnail size in the full size image?

Images included....

Re: Modifying a 4.4.1 skin questions...
 

X-CART can store both a thumb and a product image. You can set up one product with the correct product and thumb image as you want them - then export it. You can then see the format to re-import the proper images for all the rest of them.

---

Re: Modifying a 4.4.1 skin questions...
 

That is just it. It has BOTH images....

One in the file T/ and one in P/

When I changed the script above and you click the thumbnail it always gives me the thumbnail view...

But....when I right click in the browser and ask to view image it selects the correct image.

Re: Modifying a 4.4.1 skin questions...
 

Understanding how these tables work is beyond me.

I can't understand how everything works together.

I change two things.....


To this and when clicking on Thumbnails you DON'T get the full image.



Also now the table seems to want to move to the right AND give me uneven margins or padding from top to bottom.

All I wanted was a table with images evenly spaced and when the images were clicked then it would take you the next page with the full product description.

I have enclosed image examples of the working full size image with just changing the above code.

Also enclosed is the thumbnail table file....maybe it would have been easier to just rebuild the file then try to change the existing file to do what I want.

Any ideas?

Re: Modifying a 4.4.1 skin questions...
 

Change this


to this

Re: Modifying a 4.4.1 skin questions...
 

Steve,

Sorry I should have said this. I actually tried in numerous ways and you are correct, your method is the correct way but it still does not resolve the issue when selecting the thumbnail that the larger image defaults to the thumbnail.

Re: Modifying a 4.4.1 skin questions...
 

Not sure what you are trying to do, I just pointed out an error in your code.
Also if that code is used when showing the image it will set the image width/height to 150px/150px no matter what the actual dimensions are. That's why in the original code you have "$image_x/$image_y" which will default to the original image dimensions. Not sure what you are trying to do here

Re: Modifying a 4.4.1 skin questions...
 

Steve,

Thanks for answering.

That is exactly what I thought. I created thumbnails and the thumbnails were vertical or horizontal but I wanted square thumbnails.

So I then exported all the images and modified the pngs to square format.

With this code: The images still remained vertical or horizontal in the thumbnails regardless of the actual image size.



So then I changed code above to the below code:

The thumbnails now showed correctly but when you click the thumbnail and go to view the larger image it ALSO shows the thumbnail.


Strangest thing...

Go to the Site and click on one of the thumbnails. You will see that you get the exact thumbnail in the main product page.

Now right click on the image and click VIEW IMAGE. It shows the correct image.

I thought maybe a cache issue but I cleared my cache and still nothing.

Thanks.

Re: Modifying a 4.4.1 skin questions...
 

I think I see what its doing.

It is also changing the size on the image in the product page to...150px x 150px...

So it is using the same dimensions in the product_thumbnail.tpl regardless of the image size.

Any idea?

Re: Modifying a 4.4.1 skin questions...
 

And this is exactly why it is happening. The code in product template is (or similar to this)
Note "image_x" and "image_y" which are assigned actual product image dimensions (main image not thumbnail). These values are passed to product_thumbnail.tpl to use as image dimensions. But you changed the code in that template to use exact values (150/150) so the actual image dimensions are ignored.

Re: Modifying a 4.4.1 skin questions...
 

So if I eliminate...



It works great.

Sometimes the solution is so simple you go right over it.

Thank you Steve.

Re: Modifying a 4.4.1 skin questions...
 

Ah Steve,

Now I know what you didn't comment on the above.

You assumed I would run into a problem because by eliminating the script I would be affecting situations in which the size was passed to other areas.

And I did. In the checkout area the images used are not the thumbnail images but the full size images and therefore are way over sized.

So what is you recommendation?

Do I write an if/else Statement that unless the customer is in the thumbnail area then size use the normal code?

Re: Modifying a 4.4.1 skin questions...
 

Not sure why this is hapenning to you. The original code in the thumbnail template works just fine unless it is all screwed in 4.4.x. You need to go back to the original code with the image_x and image_y values. Then you need to see why the code in product.tpl assigns the thumbnail dimensions to these variables and not the image dimensions. Use the debuger to see the product array elements and their values

Re: Modifying a 4.4.1 skin questions...
 

OK this is odd.

After putting the code the way it was now it works fine. I seem to have a problem. When I make a change to the code or css the changes are not immediate. I started noticing it about a week ago and figured I must have done something else.

Sometimes the changes take some time to actually affect the site. I clear the cache and run the force cache maintenance.

Should I be doing something else to make sure the changes I make and then test are actually happening.

Re: Modifying a 4.4.1 skin questions...
 

OK....have a small problem and I can't figure out what is causing this.

The page is no longer 100% of the width of the browser.

Not sure what I did to cause this and I never bothered to see if anything was to the right.

When using firebug I can't seem to find anything that points to that.

Image enclosed

Re: Modifying a 4.4.1 skin questions...
 

I am still not sure about the above...can't seen to do anything that changes its width....

With firebug it points directly to these css sections...

I have tried to change the width a number of different ways and no luck.

Anyone an idea?

html, body {
background-color: #FFFFFF;
border: 0 none;
height: 100%;
margin: 0;
min-width: 780px;
padding: 0;


}



#content-container2 {
float: left;
position: relative;
right: 100%;
width: 200%;


}

Re: Modifying a 4.4.1 skin questions...
 

A question?

I am testing on IE and have saw a few things I need to change.

Firebug only works on Firefox. Is there another program you guys use when testing on IE?

Re: Modifying a 4.4.1 skin questions...
 

IE Developer Tools. If you are using IE7 it is not included but can be downloaded from MS site for free

Re: Modifying a 4.4.1 skin questions...
 

I am using IE8...

I guess I need to get a machine that also has IE7 to test.

BTW....any idea on the white screen to the right. I don't see anything that controls why the screen does that?

Re: Modifying a 4.4.1 skin questions...
 

You have overflow of some kind. You either changed some of the xcart default classes by deleting it or you added something somewhere causing the weird way QT design the skin to get even more weird. Try with applying

overflow: hidden;

to this class - #page-container {} in main.css but make sure you check in all browsers how it looks

Re: Modifying a 4.4.1 skin questions...
 

Thank you!

I will check it and man do I love defender. Make troubleshooting so much easier.

When you start do you start with developing in IE or Firefox?

Re: Modifying a 4.4.1 skin questions...
 

Make it right in FF and then fix IE. IE is the one that needs fixing