... make product images bigger in the product list?

[ayorofrance]

Is this possible?

(sorry about the number of questions ;-)

Thanks,

Anders

[Eric]

Yes, image sizes are all handled by CSS. So, it's really easy to change the size. If you look at the style.css file that is generated, you will see entries like these:

/*******************************
1 COLUMN IMAGE
*******************************/
#view .pl .col1 .thmb img {max-width:150px;max-height:150px;width:expression(this.height < this.width && this.width > 150 ? '150px' :true);height:expression(this.height > this.width && this.height > 150 ? '150px' :true);}
#view .pl .col1 .thmb {width:150px;height:160px;}
#view .pl .t3 .thmb img {max-width:150px;max-height:120px;width:expression(this.height < this.width && this.width > 150 ? '150px' :true);height:expression(this.height > this.width && this.height > 150 ? '150px' :true);}
#view .pl .t3 .thmb {width:150px;height:130px;}
#view .pl .col1 .lc {width:160px;}
#view .pl .col1 .rc {margin:0 0 0 165px;}

/*******************************
2 COLUMN IMAGE
*******************************/
#view .pl .col2 .thmb img {max-width:120px;max-height:120px;width:expression(this.height < this.width && this.width > 120 ? '120px' :true);height:expression(this.height > this.width && this.height > 120 ? '120px' :true);}
#view .pl .col2 .thmb {width:120px;height:130px;}
#view .pl .col2 .lc {width:130px;}
#view .pl .col2 .rc {margin:0 0 0 135px;}

/*******************************
3 COLUMN IMAGE
*******************************/
#view .pl .col3 .thmb img {max-width:100px;max-height:100px;width:expression(this.height < this.width && this.width > 100 ? '100px' :true);height:expression(this.height > this.width && this.height > 100 ? '100px' :true);}
#view .pl .col3 .thmb {width:100px;height:110px;}
#view .pl .col3 .lc {width:110px;}
#view .pl .col3 .rc {margin:0 0 0 115px;}

/*******************************
4 COLUMN IMAGE
*******************************/
#view .pl .col4 .thmb img {max-width:75px; max-height:75px;width:expression(this.height < this.width && this.width > 75 ? '75px' :true);height:expression(this.height > this.width && this.height > 75 ? '75px' :true);}
#view .pl .col4 .thmb {width:75px;height:85px;}
#view .pl .col4 .lc {width:85px;}
#view .pl .col4 .rc {margin:0 0 0 90px;}

Let's say you are using a 3 column layout. So, this is the code you will focus on:

/*******************************
3 COLUMN IMAGE
*******************************/
#view .pl .col3 .thmb img {max-width:100px;max-height:100px;width:expression(this.height < this.width && this.width > 100 ? '100px' :true);height:expression(this.height > this.width && this.height > 100 ? '100px' :true);}
#view .pl .col3 .thmb {width:100px;height:110px;}
#view .pl .col3 .lc {width:110px;}
#view .pl .col3 .rc {margin:0 0 0 115px;}

Let's say you want to increase the overall width and/or height by 40px, while still keeping the aspect ratio. Then you will add 40 to every value you see in that code:

/*******************************
3 COLUMN IMAGE - MODIFIED Plus 40px
*******************************/
#view .pl .col3 .thmb img {max-width:140px;max-height:140px;width:expression(this.height < this.width && this.width > 140 ? '140px' :true);height:expression(this.height > this.width && this.height > 140 ? '140px' :true);}
#view .pl .col3 .thmb {width:140px;height:150px;}
#view .pl .col3 .lc {width:150px;}
#view .pl .col3 .rc {margin:0 0 0 155px;}

Now images that appear in a 3 column layout on your site will be 40px larger, either 40px wider or 40 higher, depending on which axis is longer.

Now, take that last bit of modified code and paste it into your Custom CSS field for your store (Store Menu > Custom CSS).

Update you store and your images should be larger, as long as the images are at least that size to begin with.

Eric

[ayorofrance]

Originally Posted by Eric

Yes, image sizes are all handled by CSS. So, it's really easy to change the size. If you look at the style.css file that is generated, you will see entries like these:

Yes, that is nice and easy :-)

Where can I see the generated style.css file?

Thanks,

Anders

[Eric]

Hi

Originally Posted by ayorofrance

Where can I see the generated style.css file?

The style.css file is generated dynamically. But depending on what browser you are using, you can usually see the CSS files loaded for any website.

If you left your URL settings untouched, you can find your store CSS file here: yourdomain.com/store/style.css

[patagonia]

Sorry Eric, finding the .css file to edit in the new version has confused me a bit.

So tell me if this is correct: If I want to change some elements of the .css file, I need to first update my store from wordpress, then go to my ftp client and find the .css file and then edit it?

And what happens to that .css file then, the next time a store update is done? How will it keep the changes, if it is generated dynamically?

[Eric]

Hi

The store's style.css file is generated on the fly from the database, therefore there is no style.css file to directly edit.

The easiest way to add CSS modifications to your store is to use the Custom CSS link in the Store menu in the Factory (Factory > Store menu > Custom CSS). When you add code to that area, the code you add will be appended to the store's style.css file, and by the nature of Cascading Style Sheets, override the default styles.

Those styles will be saved and exported with your store every time you update your store.

Of course you can always add code directly to your site using your theme's style.css file or even add your own custom style.css file. That's up to you. We added the Custom CSS field in the Factory so those who are not comfortable opening and editing files on their server can still easily add CSS code to their store.

I hope that makes sense. Let me know if you have any questions about that.

Eric

[patagonia]

Yep think I have my head around that.
Is the default .css file, that includes every possible style, somewhere where we can look at it? Can you upload it to forums or the documentation for us? I want to be able to look at it and make changes, before I do my first store update.

[Eric]

Good idea! Here's a link to the CSS code that appears in your store by default: http://www.datafeedr.com/docs/item/172

If you hover over the code, you will get a pop-up menu. If you click the circled icon, you'll be able to copy all the code to your clipboard.

[patagonia]

Muchas gracias

[patagonia]

Now if only there was a way to be able to "see" and "test" the changes to the stylesheet, before it went live to a website????

Or to preview a View before it went live???

I know I know, it isn't possible!

[Eric]

Originally Posted by patagonia

Now if only there was a way to be able to "see" and "test" the changes to the stylesheet, before it went live to a website????

I always test my CSS code using either the Web Developer tool for FireFox or Firebug. Make changes directly to your site without changing a thing live. For example, here is the CSS editor that comes with the Web Developer add-on for Firefox:

Originally Posted by patagonia

Or to preview a View before it went live???

Adding a preview mode is already on our todo list.