Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21936

    I’ve been trying to figure out a way to change the size of the Main Product Category Images that display on the Product Category Page when you click on a specific Product Category but have found that anytime I try and modify the layout it affects the Frontpage/Home page main slider/gallery as well.

    Is there a way to change the size of the Product Category image so it displays much smaller, thumbnail size would suffice, without causing the homepage slideshow to be affected?

    I’ve found this in my slideshow.css file;

    #top .template-shop .content .slideshow_container {

    but even when I change the settings for this section of code it affects the code for the

    #top .slideshow li img {

    Here’s what my product category pages look like

    http://www.clipular.com/c?4617005=srOaz3hd8cEqMLFB_K8YAcj_3U4&f=b7c243ab8b7e9429e92c6d01253e284d

    As you can see, the image is way too big and looks horrible

    Additionally, there is an awful lot of extra space below the sub-categories that I’d like removed but while there are some categories that may have a large number of sub-categories, there are some that only have a couple like the one in the screenshots I’m including in this post and below.

    http://www.clipular.com/c?4621002=rBpnRiaDMbroVsI-yeraPjMZTag&f=2feff29c6b0f67c93e202e4d106cabc7

    Just and obvious FYI, I zoomed out a lot so I could easily capture the screenshot.

    Here’s the link to my site:

    http://goo.gl/PQAN1

    and you’ll need this password to gain access:

    tempkriesi

    I will be swapping out the current graphics displayed on the home page slider to ones that are relatively shorter in height but the graphics will still be much larger in width and probably height than the ones displaying on individual category pages so I think my best option is to figure out how to separate the #top .slideshow from the #top .template-shop .content .slideshow_container entirely.

    Thanks in advance guys!!

    #113641

    Hi pcprincess77,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top.tax-product_cat.archive ul.slideshow {
    width: 20%;
    height: auto !important;
    }

    You can use the wordpress body class to add css changes to specific pages or types of pages and the #top ID to attach the class selectors to.

    From there, you can make the image float or change the size more/less but the 20% I set it to will keep it all responsive and a fairly small size.

    The size of the whitespace under the categories is because of your sidebar length.

    Regards,

    Devin

    #113642

    You are a life saver!!!!!!

    I realized the part about the extra space at the bottom after I posted yesterday, sorry about that.

    I added the snippet to my quick css and it worked perfectly!

    Thank you so much!!!!! :)

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Product Category Page/Category Image’ is closed to new replies.