Using buttons/images in left hand sideboxes

16 Jul 2006, 23:36

#1

Zen Follower

Join Date:: Jul 2006
Posts:: 135
Plugin Contributions:: 0

Using buttons/images in left hand sideboxes

I have a customer who likes her current design but I'm not sure it's do-able in Zen. Right now, she has .jpg images in the left hand navigation panel for all of her main categories and pages (ie. Conact Us, About Us, etc).

Is this do-able in Zen or can we only use the Text from the Category names we create?

Thank you!

Jennie

17 Jul 2006, 05:31

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Using buttons/images in left hand sideboxes

Yes this attainable.

Check the image for the sidebox headings that you have for the width in pixels.

Insure that you set the box and column width to match in your admin.

There are at least two types or ways to do this.
One is using a styled sidebox header image(over the default rectangle with a solid color) and this would use the normal method for the box description.

Another is to have a complete image with the description as part of the image. I will assume that this is what you have.

Collect the default box titles and the image that you want to replace for these.

In your english.php file open it in a text editor. find the titles that you need to change. For illustration the categories is represented:

Find:

define('BOX_HEADING_CATEGORIES', 'Categories');

The red highlighted text would be replaced with:

define('BOX_HEADING_CATEGORIES', 'your_graphic.jpg');

You also need to alter the sidebox file for each that you want to change: find includes/modules/sideboxes/categories.php file and open this in your text editor. Find this entry:

$title = BOX_HEADING_CATEGORIES;

and change it to:

$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES, HEADER_ALT_TEXT);

Repeat for each that you will alter and save them to your override folder for your template in includes/modules/sideboxes/your_template/categories.php

Place the images files in: includes/templates/your_template/images/
folder.

20 Jul 2006, 02:06

#3

mommydesigns

Zen Follower

Join Date:: Jul 2006
Posts:: 135
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Thank you so much! Just getting all the buttons together to start doing this. I'll post an update when I get it done. :)

26 Jul 2006, 22:53

#4

berserker

Totally Zenned

Join Date:: May 2006
Posts:: 712
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Kuroi,

How do i get rid of the default rectange used for the sidebox header? When I upload an image with curvy edges, it still inside this rectange thing. How do i get rid of it?

Thank you

26 Jul 2006, 22:58

#5

berserker

Totally Zenned

Join Date:: May 2006
Posts:: 712
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Sorry...I mean Kobra :)

27 Jul 2006, 00:28

#6

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: Using buttons/images in left hand sideboxes

Now you've offended us both! Good job we're buddies.

I seem to remember that you decided to stick with the Classsic Template and id so then between the two stylesheets there are at least four places where either background images or background colors are set for the sidebox headings - all of which could result in a colored or decrative rectangle sitting behind your heading images.

Very quickly, there's one here (already commented out)

/*.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}*/

another here (also commented out)

.leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
/*background-color: #abbbd3;*/
font-size: 10px;
font-weight: bold;
color: #ffffff;
padding: 3px;
height: 20px;
padding-left: 5px;
}

and two here (which are probably the ones still doing the damage)

TR.leftboxheading, TR.rightboxheading, TR.centerboxheading, TR.singleboxheading {
background: #abbbd3;
background-image: url(../images/tile_back.jpg);
}

27 Jul 2006, 01:00

#7

berserker

Totally Zenned

Join Date:: May 2006
Posts:: 712
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

kuroi,

do i delete those codes?

p.s really sorry about the wrong name :)

27 Jul 2006, 07:48

#8

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: Using buttons/images in left hand sideboxes

Depends how confident you feel about CSS. I always delete them because I have no worries about putting them (or something similar) back if I change my mind. And I feel that there's more than enough CSS in the stylesheets already without old, unused stuff hanging around as well.

But if you're less sure about CSS and want to be able to see what you've done, and maybe go back if it goes horribly wrong, the commenting out approach would work too.

27 Jul 2006, 08:01

#9

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: Using buttons/images in left hand sideboxes

P.S. Kobra ALWAYS gets my name wrong ... but we're still buddies, so no problem :thumbsup:

28 Jul 2006, 01:24

#10

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Using buttons/images in left hand sideboxes

Hey All,

My memory chips were burning...:lookaroun ..so I knew someone was talking 'bout me.

Berserker,

If you have the ability to install a second instance of ZenCart and have access to another MySQL DB, you really need to do this and work on it as you can .. :Flush: ..the old 'classic' template with the associated 2 stylesheets and tables. As time and Zen Cart moves forward don't get stuck with this version. Over very little time you will be soo happy that you did for it really is overall much easier to style than the table based version.

Seriously, quit :bangin: your own head and becoming frustrated.

And Oh yes, Kurio & I are over the pond mates.:thumbsup:

28 Jul 2006, 04:07

#11

berserker

Totally Zenned

Join Date:: May 2006
Posts:: 712
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

kobra,

i am using only 1 stylesheet (from default). I just added some table codes from classic since i like the way it looks but other than that, it should all be from the default stylesheet :)

Regards

28 Jul 2006, 04:17

#12

berserker

Totally Zenned

Join Date:: May 2006
Posts:: 712
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

forgot to ask,

when you change the sidebox header to an image, how do you implement the link i.e for the Reviews. When i insert an image for this, the "more" link goes beside it.

Is there a way to get rid of this and make the whole header (for the reviews) to be the link instead?

28 Jul 2006, 10:44

#13

torgil

New Zenner

Join Date:: Feb 2006
Posts:: 23
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Berserker:
forgot to ask,

when you change the sidebox header to an image, how do you implement the link i.e for the Reviews. When i insert an image for this, the "more" link goes beside it.

Is there a way to get rid of this and make the whole header (for the reviews) to be the link instead?

In you languages/your_template/english.php
(Assuming this is the language you use)
Find the line:

define('BOX_HEADING_LINKS', ' [more]');

And change it to:

define('BOX_HEADING_LINKS', '');

Works like a charm, I just tested it :-)

/Torgil

03 Dec 2006, 22:55

#14

sheba10

New Zenner

Join Date:: Nov 2006
Posts:: 43
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Hello, I was hoping someone might be able to help me with this.
I was able to change things enough for an image to show above the "shopping area" but I'm not to sure what I need to do to get the image to show above the "information" Forgive me if it's obvious....

Thanks for any help.

PS

http://www.missevilkitty.com/MEK/

04 Dec 2006, 01:57

#15

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Using buttons/images in left hand sideboxes

sheba10,
You did this the hard way through hard coding it. The easy way is using the stylesheet.css and entering something like this

h3.#categoriesHeading   {
	margin: 0em;
	background-image: url(../images/your_image_name.gif/jpg);
	background-repeat: no-repeat;
	padding: 0.4em 0.2em;
	}

h3.#informationHeading   {
	margin: 0em;
	background-image: url(../images/your_image_name.gif/jpg);
	background-repeat: no-repeat;
	padding: 0.4em 0.2em;
	}

Where your images are in the /includes/templates/your_template/images folder

04 Dec 2006, 13:00

#16

andy_uk

New Zenner

Join Date:: Nov 2006
Posts:: 13
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

I followed kobras excellent sidebox text to image switching procedure.

I have found that to use specific ALT atributes for each heading image the below code could be used instead.

$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES, BOX_HEADING_CATEGORIES_ALT
);

With a new definition added to 'english.php' for the alt tags like below.

define('BOX_HEADING_CATEGORIES_ALT', 'Categories');

06 Dec 2006, 01:10

#17

sheba10

New Zenner

Join Date:: Nov 2006
Posts:: 43
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

Thanks!
I reversed the changes I made previously, but I'm not quite sure where I'm putting it in the stylesheet.css, could you take a look and maybe help me out?

[php]/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
margin: 0;
padding: 3px;
font-weight: normal;
font-style: italic;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
margin: 0;
padding: 3px;
font-weight: normal;
font-style: italic;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading,
#recordcompaniesHeading, #searchHeading, #search-headerHeading {
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
/*background-color: #f5f5f5;*/
border-bottom: 1px solid #000;
}
.leftBoxContainer, .rightBoxContainer {
border: 1px solid #ccc;
margin: 0 0 1em 0;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
[/php]

Thanks, I'm feeling quite dumb in the brain...

14 Dec 2006, 04:00

#18

mb1

Totally Zenned

Join Date:: Jun 2006
Posts:: 565
Plugin Contributions:: 0

Re: Using buttons/images in left hand sideboxes

ok is this for changing the catagories links to images or buttons?