Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore Tweaks › Fancy Category css
Tagged: categories, images, thumbnail size, thumbnails
- This topic has 12 replies, 5 voices, and was last updated 12 years, 11 months ago by admin.
-
AuthorPosts
-
September 10, 2010 at 12:28 pm #1808JackAubreyMember
Hello,
I’m trying to tinker with some of the styling in the fancy category display, but I’m having trouble figuring out where to modify and put in my changes.
With the thumbnail for example (which I’m trying to enlarge) I found the following in the plugin code:
.eStore-thumbnail {
float:left;
margin-right:12px
}
.eStore-thumbnail img,.eStore-thumbnail a img {
background-color:#FFF;
border:1px solid #A9A9A9;
margin:4px 0 4px 5px;
padding:4px
}
.eStore-thumbnail img:hover {
background-color:#A9A9A9
}
Is this the proper thing to base my css changes off? I tried to put them in my custom.css folder in my theme (Thesis) but it wouldn’t work…
September 11, 2010 at 1:30 am #24118amin007ParticipantEach fancy display has it’s own CSS. Please let me know which fancy display you want to customize and I will be able to give you more guidance.
September 11, 2010 at 1:36 am #24119JackAubreyMemberHello —
I’m going to use some version of the “categories_fancy” shortcode:
[wp_eStore_category_fancy id=1]
[wp_eStore_list_categories_fancy]
September 11, 2010 at 1:51 am #24120amin007ParticipantThis uses the Fancy1 display so you just need to modify the CSS of the fancy1. Look for the following bit of CSS and modify it whatever width and height you want:
.thumb-image{
width:125px;
height:125px;
}September 11, 2010 at 2:03 am #24121JackAubreyMemberGreat thanks!
September 11, 2010 at 8:22 pm #24122JackAubreyMemberHi —
One more thing. I was able to enlarge the thumb images on my categories page (I’m using shortcode: [wp_eStore_list_categories_fancy] ) without too much trouble. But then I went to one of my individual product pages which is using the shortcode [wp_eStore_fancy2 id=2] the thumb there was large and grainy. You can see what I mean here:
general categories page: http://www.spinozarods.com/test-page/
specific products page: http://www.spinozarods.com/test-page/bamboo-rods/66-4-hunt-pattern-special/
My question is these two shortcodes — fancy 1 and fancy 2 — seem to be drawing the thumb from the same css. Is there a way around this, so that I can modify the thumb on the general category page without messing up the one on the individual product pages?
Thanks!
September 12, 2010 at 1:31 am #24123amin007ParticipantYeah it uses the same CSS classes so to maintain the same look and feel.
You can do what you are after but it will need some PHP code modification. Are you okay with PHP coding (the modification is simple but not easy to explain)?
September 12, 2010 at 2:05 am #24124JackAubreyMemberOh boy — no I’m really not much of a php ninja and like to avoid it since that’s the sort of thing that can really screw up a site if you’re not sure what you’re doing.
How involved would this be, do you think?
September 12, 2010 at 2:21 am #24125amin007ParticipantI don’t recommend changing PHP code either. I will send you an email on this.
October 23, 2010 at 2:06 am #24126treetoseaMemberHi,
I’d also like to change the thumbnail dimensions for the same wp_eStore_buy_now_fancy shortcode. Where will I be able to find that fancy display css file? Which directory?
October 24, 2010 at 12:49 am #24127amin007ParticipantThere is a CSS file called “wp_eStore_style.css” inside the “wp-cart-for-digital-products” directory. This is the file you need to edit for your CSS customizations.
December 7, 2011 at 3:33 pm #24128bvimusicMemberHello. I have found the place to edit the size of the thumbnail for my store – in this case it’s the fancy3 display. When I change the size to larger, I end up with a grainy image also. Can you please suggest a fix for this?
December 8, 2011 at 3:39 am #24129adminKeymasterAre you using the smart thumbnail option in eStore?
-
AuthorPosts
- You must be logged in to reply to this topic.