2 Attachment(s)
Categories/Subcategories Image Placement Issue
Hello,
I've been playing around with this for a while now but just can't seem to be able to figure this out. I'm assuming that this has to be changed somewhere in the .php/.css files' code but maybe it's in the admin panel.
I'm having two similar issues and I've also included thumbnails of a screenshot so that you can see what I'm talking about.
The first problem is that when I click on a category that has subcategories, the MAIN category image is displayed at the top left corner and the text in a column on the right. Question 1: can I make this image be displayed on top of the text or make the text wrap around the image like it does on the product pages? (Such as:)
____
|img| Text text text
|___| Text text text
Text text text text
Text text text text
OR
blank____
blank|img|
blank|___|
Text text text text
Text text text text
Text text text text
The second problem is that the three subcategories that are shown on the bottom do not have their text and image lined up. It's like the image is in the left of each respective column and the text is in the center. Can I make both in the center? Or both in the left?
Thank you very much and I hope I was clear enough - please tell me if there's anything I can explain better.
I really appreciate your help!!!!
Re: Categories/Subcategories Image Placement Issue
As this can be template specific we need a link to your site
To break link, add one space as in
http ://www.zen-cart.com/
Re: Categories/Subcategories Image Placement Issue
Sure, it's http ://66.11.182.82/zen/
(I don't have a domain name yet so I'm just hosting it on my home static IP - sorry if the loading's slow!!!)
PS: the category in question is "lasers"
Re: Categories/Subcategories Image Placement Issue
You have a case of the dreaded Template Monster template
I attempted the standard things, but they take license and recode things to their liking
You will need to get them to decipher their template
Re: Categories/Subcategories Image Placement Issue
Wow that's horrible! I doubt they would ever agree to do anything of the sort for free... I guess I'll try to figure it out myself.
By the way, just so that I know for the future, is Template Monster bad to use? Who would you recommend (especially in terms of template customization being lax).
Thanks for your help!
Re: Categories/Subcategories Image Placement Issue
Search this forum for them and make your own determination
Recommend you use/start with one of the contributed templates that is closest to your desired scheme and use this forum as a resource to customize it
You can view many bu not all at
http://(sorry, site offline)/
Re: Categories/Subcategories Image Placement Issue
Sorry for double posting but I just found this code in my stylesheet_main.css file and I think this is what needs to be edited. If it is, could you please tell me what exactly I should do?
Here's the code:
Code:
/* CATEGORY */
#indexCategories {}
#categoryImgListing {padding:0; float:left; margin-right:15px;}
#indexProductListCatDescription, #categoryDescription { display:block; overflow:hidden; min-height:160px; height:auto !important; height:160px; color:#716d7a; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px;}
.categoryListBoxContents {text-align:center; padding:5px 0px;}
.categoryListBoxContents img {margin-bottom:0;}
.categoryListBoxContents a {text-decoration:none; font-size:11px; color:#bfbec1; line-height:normal; font-weight:bold; text-transform:none; }
/* -------- */
/* CATEGORY LISTING */
.tabTable {margin:0px 0px 0 0px;}
.tabTable th {padding:0 1px 1px 1px; text-align:left;background:url(../images/productListing-heading_bg_th.gif) repeat-x left top;}
.tabTable th { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ffffff; line-height:normal; font-weight:bold; text-transform:capitalize;}
.tabTable th a {color:#ffffff; text-decoration:none;}
.tabTable th a:hover{text-decoration:underline;}
.productListing-rowheading {}
.productListing-heading a {text-decoration:none !important;}
.productListing-heading a:hover {text-decoration:underline !important;}
.tabTable td {}
.tabTable td {font-size:18px; font-family:tahoma; color:#000000; font-weight:bold;}
h3.itemTitle{text-align:left;}
.tabTable td .listingDescription {padding:5px 5px 5px 0; font-size:12px; line-height:14px; color:#716d7a; text-align:left; font-weight:normal;}
.tabTable td a {text-decoration:underline;}
.tabTable td a:hover {text-decoration:none;}
.productListing-data a{color:#78767e; font-size:11px; text-transform:uppercase; font-weight:normal;}
.productListing-data{color:#ffffff !important; font-size:14px !important; line-height:21px !important; font-weight:bold !important; text-align:center; padding-top:0px; background:#201f23;}
.productListing-data img{margin-right:0;}
.productListing-data h3{color:#bfbec1; font-size:11px; font-weight:bold; margin-bottom:6px; padding-top:0; text-transform:uppercase}
.productListing-data h3 a{color:#bfbec1; font-size:11px; font-weight:bold; text-transform:uppercase}
Thanks a lot!
Re: Categories/Subcategories Image Placement Issue
Those are the ones I tried but the template has added additional code so that these do not respond as normal
Re: Categories/Subcategories Image Placement Issue
Hi,
I actually got the answer myself - I played around with that code and this is what I changed it to to get exactly what I had in mind:
Code:
/* CATEGORY */
#indexCategories {}
#categoryImgListing {padding:0px 15px 15px 0px; float:left; margin-left:0px;}
#indexProductListCatDescription, #categoryDescription { /*display:block; overflow:hidden; */min-height:160px; height:auto !important; height:160px; color:#716d7a; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; padding: 0px 0px 30px 0px}
.categoryListBoxContents {text-align:left; padding:5px 0px;}
.categoryListBoxContents img {margin-bottom:0;}
.categoryListBoxContents a {text-decoration:none; font-size:11px; color:#bfbec1; line-height:normal; font-weight:bold; text-transform:none; }
Thanks for all your help and I hope this might help someone else too!:smile: