Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old January 8th, 2011, 09:10 PM
ayorofrance ayorofrance is offline
 
Join Date: Sep 2010
Posts: 430
Default ... make product images bigger in the product list?

Is this possible?

(sorry about the number of questions ;-)

Thanks,

Anders
__________________
WordPress Security - Is your WordPress secure? Get our FREE checklist and find out.

Easy-Email - Access ALL your email accounts with one login & synchronize automatically on all your computers.
  #2  
Old January 8th, 2011, 09:31 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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:

Code:
/*******************************
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:

Code:
/*******************************
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:

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
  #3  
Old January 8th, 2011, 09:49 PM
ayorofrance ayorofrance is offline
 
Join Date: Sep 2010
Posts: 430
Default

Quote:
Originally Posted by Eric View Post
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
__________________
WordPress Security - Is your WordPress secure? Get our FREE checklist and find out.

Easy-Email - Access ALL your email accounts with one login & synchronize automatically on all your computers.
  #4  
Old January 9th, 2011, 09:02 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by ayorofrance View Post
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
  #5  
Old January 9th, 2011, 09:14 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default

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?
  #6  
Old January 9th, 2011, 09:23 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #7  
Old January 9th, 2011, 09:30 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default

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.
  #8  
Old January 9th, 2011, 09:37 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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.

  #9  
Old January 9th, 2011, 09:41 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default

Muchas gracias
  #10  
Old January 9th, 2011, 10:07 PM
patagonia patagonia is offline
 
Join Date: May 2009
Posts: 506
Default

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!
  #11  
Old January 9th, 2011, 10:22 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by patagonia View Post
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:



Quote:
Originally Posted by patagonia View Post
Or to preview a View before it went live???
Adding a preview mode is already on our todo list.
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 05:22 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.