Image in categories

Proxivire

No avatar

2006-12-18 15:06

Good day,

I'm trying to get something alike to the mockup image below.
But I can't seem to find the right way to do it in the code :/

So basically, I want a wide, thin image to be centered below the category's text.

Also, is it possible to seperate this effect for categories and sub-categories?
In sub-categories I always have brand logos in their default spots, and I'd like to keep them there, but for main categories I'd like a picture there, as described before.

-DmD-

floyds

No avatar

2006-12-18 18:36

You must edit the page.tpl file and put the image/code where you want it to be displayed.

Dutch Support for QuickCart

Proxivire

No avatar

2006-12-18 21:48

floyds:

That much I understand ;)
I need to change the way the image is shown in the category menus, text and image in reversed order basically.
Also, the picture will be different for each category, so I can't edit 1 specific imagelink into a generic .tpl file, the .tpl needs to be told to take the category picture and place it in a different location on the page (below the text, instead of above).

My question was what file to edit, since I can't seem to find the specific file, and I don't think it's the page.tpl file, since I can't find anything relating to images displayed in categories there.

If I'm wrong, or if you know which file it should be (and where?), please let me know, cuz I'd very much like to be able to do this :)

-DmD-

idaryl

Avatar: idaryl

2006-12-19 01:23

OK here is how you do it....

1) login to your admin area ->
2) pick the category you want to add the picture to ->
3) in the Short Description paste this code ->

<div align="center" style="border:1px dashed #red"><img src="http://www.sjaakshobbyshop.nl/images/example.jpg" width="300" height="200" border="0"></div>

I used the image you supplied, I added a style to have a dashed line around the edge (to make it look better, on the art add a white (or if you are using a color on the area - the same color ) border. Change the size to match the image area you want/need. If you want a different color on the dash, change the red to #whatever.

This should work great - What you will have to do is generate the images you want for each category etc, etc.

BTW: this is a fabulous way to have an image in the product description page also - it will "encase the erea - add the absolute path of the product link for more effect" .... and if you want to really "spice" things up - use a flash file instead.

- Let me know how it went, I'd really like to see what you come up with....

also if you need to have your menus change color on mouseover let me know I'll show you how... :-\

Hope this helps

Proxivire

No avatar

2006-12-19 16:25

idaryl:

Awesome, the output of that is Exactly how I pictured wanting it. Just the #red didn't work, but that doesn't matter since I already have a colour code I wanna use (changed the look of the site with it yesterday).

The idea for using it for products is very good too, hadn't thought of that. Although with the number of products that's gonna be added in coming months it'll probably be too much work. But, I'll keep that in mind for "special" items.

I put an example at the next link, although that's the old site colouring, and resized with code (which I normally never do, always pre-size images correctly), And the picture used is a previous version. But my resources are at work at the moment :P

http://www.sjaakshobbyshop.nl/Develop/2006-12-18/?p=productsList&iCategory=38&sName=R/C:-Auto's:-Nit ro

Current site look is at http://www.sjaakshobbyshop.nl

It'll probably take a while before I have images for all categories, I only wanna put them in place when I have them all, but at least now I can get started >D

Pretty silly of me not to think of this idea either, just yesterday I was telling a friend of mine how easy it is to use HTML in input boxes in Quick.Cart. Although even then I probably wouldn't have been able to make it so nice and clean, since I'm not much of a wiz, I can barely manage <tr> and <td> >P

Thanks alot for the help :D

BTW, you meant the top menu items like Products and Contact? Should be able to do that with onmouseover type code in the default.css right?

-DmD-

idaryl

Avatar: idaryl

2006-12-20 02:08

Yep, and to the side menu as well -- adding it to specific parts makes it work well - I'm trying different route as to make this cart [ prettier ] ?-)

Hope this helps

Proxivire

No avatar

2006-12-20 16:26

Doesn't the side menu already have an onmouseover function? It does here o_O

You got a link to see what you've changed so far?

-DmD-

idaryl

Avatar: idaryl

2006-12-20 22:21

1): Yes it does, but I'm talking about changing the ciolors of the side menu, and then, if you have sub-categorys/items in categories another mouseover color for that set of menus - as shown...

2): Not online - I'm currently building a site with just about every feature I can need....

Strange, awhile ago I posted an answer to a question about top menu colors and showed an example of what I'm using, and now I'm seeing that particular color "popping" up on other carts ( not that I care, but, did you read that post as well? ) just curious, is all.

Hope this helps

Proxivire

No avatar

2006-12-25 22:05

1): I see, looks nice, but probably a bit too "busy", for our site, if you know what I mean, it has to look simple, but nice. I'm real happy with how it is now actually >)

2): Haven't seen that post no, heh, copycats ;)

Thanks for your help dude >)

-DmD-

Back to top
about us | contact