Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Problems
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 July 11th, 2012, 12:05 PM
daniel_28 daniel_28 is offline
 
Join Date: Jun 2012
Posts: 63
Default How to display category images on store front page?

Store ID: 38503
Website URL: www.fitliving.nl
URL to page in question: www.fitliving.nl/shop/home

On my Store front (store home) view, I would like to display category pictures (big blocks) and category titles. This way my users can quickly see how to navigate through the categories. I have attached an example of this. I canít seem to get this right or getting the right code combination for this.
  #2  
Old July 11th, 2012, 12:21 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

First you need to make sure that each of your parent categories have category images associated with them. If they do not, you can add category images here: The Factory > Your Store > CATEGORIES > Category Name > Category menu > Category Properties > Image URL. The images should all be the same width and height for best results and easiest configuration.

After you have added an image to each parent category, add a Category List module to your Store's Front Page view (here The Factory > Your Store > VIEWS > STORE FRONT PAGE > Default) and then add the following code to the module:

HTML Code:
[category.list id='dfcatcol1' before='<div class="cl">' after='</div>']
  <div class="cell col2">
    <div class="bdr">
      <a href="[category.link]" title="[category.name]">
        <img src="[category.image]" width="280" height="320" /><br />[category.name]
     </a>
    </div>
  </div>
[/category.list]
Adjust the image width and height in the code as necessary.

Eric
  #3  
Old July 12th, 2012, 04:02 AM
daniel_28 daniel_28 is offline
 
Join Date: Jun 2012
Posts: 63
Default

That works great. Thanks!

Is their a possibilty that I can ad an image border around the image(like galaery)?
And can I align category title in the center underneath the image?
And can change the fontsize of the category title just for this category list?
  #4  
Old July 12th, 2012, 08:39 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Here's the Custom CSS:

Code:
#view .cl .cell .bdr {
border: 1px #B3B3B3 solid;
text-align: center;
}
  #5  
Old July 12th, 2012, 09:49 AM
daniel_28 daniel_28 is offline
 
Join Date: Jun 2012
Posts: 63
Default

Quote:
Originally Posted by Eric View Post
Here's the Custom CSS:

Code:
#view .cl .cell .bdr {
border: 1px #B3B3B3 solid;
text-align: center;
}
Where should I put this code? Because I have now paste it within the 'edit module settings' in the area where I can fill in 'custom CSS'.

But now everything aligned to the left....
  #6  
Old July 12th, 2012, 09:52 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

You need to paste it in your Custom CSS.

Eric
  #7  
Old July 12th, 2012, 10:09 AM
daniel_28 daniel_28 is offline
 
Join Date: Jun 2012
Posts: 63
Thumbs up

Quote:
Originally Posted by Eric View Post
Hi

You need to paste it in your Custom CSS.

Eric
Great Eric!!

Sorry about that. I viewed that video 2 days ago. Stupid me. I hope to be less of a beginner very soon!
One month ago I never even knew or touched Wordpress or any other website software.. We will get eventually

thanks again with super quick and helpfull response!
  #8  
Old July 12th, 2012, 10:21 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

You need to paste it in your Custom CSS.

Eric
Shop 35251

URL: http://www.chinawholesalectronics.com/

Mine is still aligned left - any ideas?
  #9  
Old July 13th, 2012, 01:34 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by nzcid View Post
Shop 35251

URL: http://www.chinawholesalectronics.com/

Mine is still aligned left - any ideas?
Does not matter now - better approach for my site was to change your two col to a three col.

Works great - thanks.
  #10  
Old July 24th, 2012, 02:24 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Last post moved here: http://www.datafeedr.com/forums/showthread.php?t=7383

This thread is closed.
 


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

Similar Threads
Thread Thread Starter Forum Replies Last Post
Store Front Page Product Display kowboy Questions 4 April 9th, 2012 05:29 PM
Product images (on category/store front view) won't change size webnamescouk Problems 6 January 3rd, 2012 09:57 AM
Category Images on Store Front Page onlinemum Questions 14 August 14th, 2011 09:43 AM


All times are GMT -5. The time now is 06:04 AM.


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