Ezpages Improved Menus support

This mod affects one or both of the ez-page menus in the header bar or sidebox (#navEZPagesTop or #ezpages).

* You can make the active link (pointing to the current page) highlighted with any desired styling.
* You can substitute images for ez-page names in either of the menus by saving an image file with an appropriate name.
* You can add a subheading above any ez-page name in the sidebox by defining its content.
* You can add a comment below any ez-page name in the sidebox by defining its content.
* Menu display content is all compatible with multiple languages (even though stock ez-page contents are not).

The zip will be attached here until it is available in Free Addons.

Ezpages Improved Menus is now available in Free Addons.

Hi. I'm looking forward to using this mod. I have uploaded the file and I am using the very latest version of Zen Cart.

I am trying to use images in my EZ Pages navigation. I was wondering, could you clarify this step:

"If you want to use images for the links, name them like ezpheadxx.gif, replacing xx with the ez-page id"

I'm sure this is some css thing I am unfamiliar with, right?

Thank you so much,
Amy

No, actually it is a handle for the code to grab to find that a link is to be replaced with an image. By having a file named ezphead23.gif in /includes/templates/your_template/buttons/english/, the code will know that you want to use ezphead23.gif instead of the headerbar link text for ez-page id 23.

Oh, now I feel silly, the EZ Pages ID from the Zen Cart admin. Going to change it right now. thanks for being so helpful and prompt.

Glad to help. It would be nice if you could post a link to your site when it is working, so people can see a live example.

When we're done, absolutely! Thanks again.

I just uploaded the files for this add-on, and it caused everything underneath my header logo to disappear. It appears that the file causing the issue is templates/yourtemplate/templates/tpl_ezpages_bar_header.php. The Zen Cart version is 1.3.9g.

Then there was some error in the upload, because it works correctly on my 1.3.9g test site.
What does the latest debug log in /cache/ say?

What is your template folder name, and what did you change the /your_template/ folder to?

Quote:

---

Originally Posted by gjh42

Then there was some error in the upload, because it works correctly on my 1.3.9g test site.
What does the latest debug log in /cache/ say?

What is your template folder name, and what did you change the /your_template/ folder to?

---

It turns out that it must have been an upload issue. The FTP was laggy all day, and uploading a fresh new copy fixed the issue. I don't think I will continue to work with this host... too many issues like this.

Fantastic add-on, by the way. The only thing I had to change was in the CSS. I changed this:

Code:

---

#navEZPagesTop .activeEZPage, #navEZPagesTop .activeILPage, #ezpages .activeEZPage, #ezpages .activeILPage {
    font-weight: bold;
    color: #AD006A;
    }

---

to this:

Code:

---

#navEZPagesTop a.activeEZPage, #navEZPagesTop a.activeILPage, #ezpages a.activeEZPage, #ezpages a.activeILPage {
    font-weight: bold;
    color: #AD006A;
    }

---

Otherwise, the links were not displaying in the styles I specified. Adding the "a" in those spots fixed the issue. and it now works great!

Glad you have it sorted. It's curious that you needed to add the "a" to the selector - my test (Classic) site didn't need this, and .activeEZPage etc. do not exist outside this mod, so would never have been styled elsewhere. #navEZPagesTop .activeEZPage would have a higher priority than #navEZPagesTop a which could already be used in the stylesheet, so it ought to override that. Anyway, there's a tip if you need help making the styling stick.

Quote:

---

Originally Posted by gjh42

Glad you have it sorted. It's curious that you needed to add the "a" to the selector - my test (Classic) site didn't need this, and .activeEZPage etc. do not exist outside this mod, so would never have been styled elsewhere. #navEZPagesTop .activeEZPage would have a higher priority than #navEZPagesTop a which could already be used in the stylesheet, so it ought to override that. Anyway, there's a tip if you need help making the styling stick.

---

Does adding the "a" to your website's CSS break the add-on's functionality, or does it still work?

Makes no difference.

Thanks for another great mod, Glenn! Just noticed this new one now that I am again revisiting what to do with my EZPages links. Sounds like just what the doctor ordered once again. :hug:

Karen

reiterated from a related thread:

Quote:

---

All that aside, I'm now having issues with image vertical alignment (using ezipages improved menu). Seems that the image is displayed higher than the line of text.

---

my site is here. Ezipages bar is at the top of the content area. Both the 'livestock' and 'product' stores have the same issue.

You have specified that all images in links have 6px of bottom padding:

a img{border:none;padding-bottom:6px}

Why did you add this padding? Either make a rule that applies only to the situation where you need padding, or make a rule for this situation where you don't want padding.

Great mod but I can't seem to change the normal header link colour. I've checked the stylesheets but nothing seems to take effect. Any pointers would be welcome!
By the way I had to add a. to the selector.

I need to see your site live to help you. Which selector did you add a. to? Are you referring to post #11? If so, what browser are you using?

Sorry - working far too late! It was the visited colour I was seeing. Once I added a class to the top of the new stylesheet problem solved!

Yes I meant in post #11 :blush:

Thanks again - it's perfect now!

Trying to install this now and I want to use .png files instead of .gif.

I am trying to edit 'image_titles_defines' but the file is blank...

Any ideas?

EDIT: Apparently, the older download link contains a blank file and the newer one has one with code!

I'll be on my way now, thanks!

Hello again,

It works perfectly, thanks-a-million!

Just for the sake of other slow people, like me... The 'ez-page id' is a number (the number '2' in my case) and NOT the title of the link such as 'Product Catalogs' or something.

Other addons have you name the image whatever the text for the link is, but this one is much easier. My image is named 'ezpside2.png' instead of 'ezpsideProduct_Catalogs.png'

Thanks again!

[FONT=Verdana]Glenn,

Again, love the flexibility, got one question. Any easy way to add the [/FONT][FONT=Verdana]onmouseover event to images?
[/FONT]

Perhaps if you knew javascript there would be:)

If you want the same change to happen to all links on hover (not an individual image being swapped), you could make the image partly transparent and apply CSS to give it a border, background, etc. that can change on hover or visited states. It would take a relatively minor code change to give each link an id so that it can be addressed individually in the stylesheet and be fully CSS-manageable.

Looks like I will try to add an id to each link, I like being able to have 100% control via the stylesheet.

In tpl_ezpages_bar_header.php, add after the <a

id="ezpagesTopLink' . $var_linksList[$i]['id'] . '

to this line

PHP Code:

---

    echo '<li><a href="' . $var_linksList[$i]['link'] . '"' . active_page_class($var_linksList[$i]['id'],$var_linksList[$i]['altURL']) . '>' . text_image_sub($var_linksList[$i]['name'], 'ezphead' . $var_linksList[$i]['id']/*, '', EZPAGES_TOP_ICONS*/) . '</a>' . (($i < $n and EZPAGES_SEPARATOR_HEADER)? '<span class="separator">' . EZPAGES_SEPARATOR_HEADER . '</span>' : '') . '</li>' . "\n"; 


---

to get

PHP Code:

---

    echo '<li><a id="ezpagesTopLink' . $var_linksList[$i]['id'] . ' href="' . $var_linksList[$i]['link'] . '"' . active_page_class($var_linksList[$i]['id'],$var_linksList[$i]['altURL']) . '>' . text_image_sub($var_linksList[$i]['name'], 'ezphead' . $var_linksList[$i]['id']/*, '', EZPAGES_TOP_ICONS*/) . '</a>' . (($i < $n and EZPAGES_SEPARATOR_HEADER)? '<span class="separator">' . EZPAGES_SEPARATOR_HEADER . '</span>' : '') . '</li>' . "\n"; 


---

Correction to use the current file version instead of the new unreleased version:

In tpl_ezpages_bar_header.php, add before the ' . active_page_class(

id="ezpagesTopLink' . $var_linksList[$i]['id'] . '"'

to this line

PHP Code:

---

    echo '<li><a href="' . $var_linksList[$i]['link'] . '"' . active_page_class($var_linksList[$i]['id'],$var_linksList[$i]['altURL']) . '>' . title_image_exists($var_linksList[$i]['name'], 'ezphead' . $var_linksList[$i]['id']) . '</a>' . (($i < $n and EZPAGES_SEPARATOR_HEADER)? '<span class="separator">' . EZPAGES_SEPARATOR_HEADER . '</span>' : '') . '</li>' . "\n"; 


---

to get

PHP Code:

---

    echo '<li><a href="' . $var_linksList[$i]['link'] . '" id="ezpagesTopLink' . $var_linksList[$i]['id'] . '"' . active_page_class($var_linksList[$i]['id'],$var_linksList[$i]['altURL']) . '>' . title_image_exists($var_linksList[$i]['name'], 'ezphead' . $var_linksList[$i]['id']) . '</a>' . (($i < $n and EZPAGES_SEPARATOR_HEADER)? '<span class="separator">' . EZPAGES_SEPARATOR_HEADER . '</span>' : '') . '</li>' . "\n"; 


---

I will add this as an additional enhancement to an improvement I recently made in the features.

The feature improvement I mentioned is discussed in this thread, for those who are interested.
It allows an image to be added before or after the text rather than simply substituted for the text, if desired. This can be used for icons. The link id feature described above would also allow for this kind of icon to be added as a background, so there are multiple possibilities. I would appreciate feedback on which ones people find most useful and easiest.

Awesome, great work & mod as always! :smile:

I used the link id feature, very easy and flexible. I made all my changes via CSS.

And simply adjusting padding allowed me to include an icon to the background image before text, after text & both before and after.

In my opinion the link id feature would work for both situations!

Thanks again Glenn!

Only tested in FF and still a template in progress but you can see in action here.

Home link has an icon before text & Review link has an icon after text.

Thanks for posting the example! That's a nice use of the hover and current page highlighting, as well as the icons.

The background location for icons is more flexible (before or after text at will, as opposed to a global setting for before or after). On the other hand, its flexibility means that every link may need to be individually fine-tuned instead of letting the foreground images automatically make the space they need...

Great mod. Thought I'd offer a tip. I created four EZ pages, including one pointing to Home, with an internal link to the main page. The styling I specified for the active page link worked great for the other three, but not for Home. Finally, I tried adding / to the Internal Link URL, and now the Home link styling works too.

On my local test site, there are a few ways to get a working home link that styles correctly when current. Using http://path_to_zen_cart/ or index.php or index.php?main_page=index as the internal link all work.

http://path_to_zen_cart without the ending / works as a link but not for styling.

http://path_to_zen_cart/ would be the best form for a home link, as it will give the clean base address when clicked. As an absolute link, it would not, of course, be portable to a clone or test installation without editing.

It took a bunch of experimentation to get code that would handle any working home link for current styling, and it seems I missed one possible version, though I think you could only get that by entering the slash-free link in the ez-page.

Thanks for the mod. Seems to be working great for what I need it to do so far.

A quick question:

How do I "style" the links? I am not good with CSS so an actual example would be great.

I would like to change to color and weight of a couple of the links... not all of them.

Any help is appreciated... thanks!

Rather than give random examples, let me see your site and identify the links you want changed, and I will show you how. The styling will be different for sideboxes and header, so I can't advise correctly without knowing that.
The first style rule in stylesheet_ezpages_improved_menus.css shows changing the color and weight for the current active page link.

Quote:

---

Originally Posted by gjh42

Rather than give random examples, let me see your site and identify the links you want changed, and I will show you how. The styling will be different for sideboxes and header, so I can't advise correctly without knowing that.
The first style rule in stylesheet_ezpages_improved_menus.css shows changing the color and weight for the current active page link.

---

Sure, I can provide a link.... Unfortunately, I have a new problem. I'm pretty sure it is related to this mod, as I don't think the behavior was occurring before I installed this. The link is: http://tinyurl.com/7pnwxps

As far as menus are concerned, I have CSS Flyout and Ezpages Improved Menus installed. What is happening is very strange.... When my page is in MAINTENANCE MODE, my menus looks normal:

http://www1.picturepush.com/photo/a/...40/7436319.jpg

When my page is taken out of maintenance mode, my menus "break":

http://www3.picturepush.com/photo/a/...mg/7436416.jpg

I really need to pinpoint this problem and correct it. Any help is appreciated.

My problem is definitely related to this mod. When I turn off "EZ-Pages Display Status - Sidebox" in the EZ-Pages settings, my flyout menu goes back to normal... unfortunately, I also lose the sidebox. Any suggestions?

By the way, my Information sidebox is really a modified EZ-Pages sidebox... just in case there was some confusion.

I'm seeing normal operation of the ezpages sidebox and the flyout menu. Did you change something, or was it a local effect or??

Quote:

---

Originally Posted by gjh42

I'm seeing normal operation of the ezpages sidebox and the flyout menu. Did you change something, or was it a local effect or??

---

No, I didn't change anything. Can you try refreshing the page a few times? Sometime it shows up normal, and sometimes it appears "broken"

I saw it broken the first time I went there just now (with Firebug active from my previous visit), and it took some dozens of refreshes and new page clicks before getting the malfunction again, then a few dozen before it went away.

Your site does not have /includes/templates/your_template/css/stylesheet_ezpages_improved_menus.css active, or any of its rules in other stylesheets. What happens if you upload that?

Quote:

---

Originally Posted by gjh42

I saw it broken the first time I went there just now (with Firebug active from my previous visit), and it took some dozens of refreshes and new page clicks before getting the malfunction again, then a few dozen before it went away.

Your site does not have /includes/templates/your_template/css/stylesheet_ezpages_improved_menus.css active, or any of its rules in other stylesheets. What happens if you upload that?

---

Thanks so much for your help. The error wasn't related to this mod or CSS flyout at all. It was all due to a misplaced bracket in my stylesheet. Took me over a day to figure it out! Thanks for looking anyway...

I had a feeling it was a CSS error like that, as your issue is a common symptom. One character wrong in certain places can cause CSS to ignore the entire rest of the file, and if the stylesheets are minified, the effect can continue through other stylesheets.

Hi Glenn - I'm over here now in your support forum (just can't get away from me, huh? LOL) I've installed your mod and uploaded the images, but I have no idea about anything to do with CSS or PHP. The icons aren't showing up in the bar under my banner and there is still text there. I think I've missed a step where I have to add the URL for the image into one of the CSS or PHP files. Can you indicate which file(s), where and what I need to look for and what to replace it with? Thank you !

From the readme that comes with the mod:

Quote:

---

If you want to use images for the links, name them like ezpheadxx.gif, replacing xx with the ez-page id. Add them to your /includes/templates/your_template/buttons/english/ folder.

---

Quote:

---

Originally Posted by gjh42

From the readme that comes with the mod:

---

I did that and I'm still getting text links. I don't have to do anything with a CSS or PHP file????

Nope, the mod code automatically detects files which match the links and does the substitution.
Can I see your site to look at the setup? What filenames do you have saved, and what is the exact folder path to them?

Quote:

---

Originally Posted by gjh42

Nope, the mod code automatically detects files which match the links and does the substitution.
Can I see your site to look at the setup? What filenames do you have saved, and what is the exact folder path to them?

---

the link to the site i'm trying this on is: http://sparkleandshine.ca/testzencart/ (note: this is not my live site and my live site is on a whole different domain and i use this site to figure things out before i go to my live site). here is a screenshot of my ezpage id's:

Attachment 11543


here is a screen of the path where i'm saving the images i want to use in the header in place of text:

Attachment 11544


and here is a screen of the actual file that i'm trying to get to show up in place of the text (note: i went into - oh, i can't remember which file it was now, but the one to change the file extension of the graphic that was in the directions - i went into that file and changed the file extension to .png as i like working with this file format over .gif). I did rename my png file to a .gif extension to see if that's what was causing the problem and it still didn't work and in my screenshot you will see the .gif extension, but it is really a png file that i changed just to see if i could even get the little red X.the image file did not show up either with the gif or png extension.

Attachment 11545

You don't save the images in /template_default/buttons/english/, you save them in (in this case) /classic/buttons/english/, or whatever custom foldername you end up using for your live site. The mod code doesn't go to /template_default/ if the image is not found in the custom template folder.

OMG!!! That did it! Thank you so much. I've been trying to accomplish this for the last week. I'll try it on my live site tomorrow and see if it explodes or not LOL

If no one else has come up with this yet, I have a little tidbit to share back to the community. You know how you get kicked out after 15 minutes from the admin area even though you don't want to be? I found a work-around without having to use any code or mod/plugin. Just open 2 tabs in your browser and log into the zen cart admin area on both tabs. on the first tab do your work and on the second tab, go to tools/who's online. set the who's online to refresh every 30 seconds and it will trick zen cart into thinking you're stil there even if you stop doing work in the first tab you're in. This little trick has been handy for me while working through getting images up in my header and it allows me to be in my cPanel working there for more than 15 minutes. It is also handy if you get a phone call and forget you were working and you'll still be logged in when you come back. Hope this helps someone :)

Ok, the Categories Dressing is next - wish me luck :)

Glad it's working now:)
That is a good tip. I've seen it somewhere on the forum, and used it myself occasionally, but it is nice to let folks know, as long as they are working in a safe area with no chance of someone unauthorized coming in.

Quote:

---

Originally Posted by gjh42

Glad it's working now:)
That is a good tip. I've seen it somewhere on the forum, and used it myself occasionally, but it is nice to let folks know, as long as they are working in a safe area with no chance of someone unauthorized coming in.

---

Hi Glenn :) Is there somewhere in the code that I can tweak it so that my images in the header center in the page? right now they're aligned to the left.

Has anyone used this on 1.5 yet?

It is compatible with v1.3.9x and v1.5.x. There is no difference in installation or use per version.

I have a question. I'm using a 1.5.1 cart and I just installed the EZ-Pages Improved Menu plugin and it works great. My problem is that the breadcrumbs show the image name when I click on the various EZ-pages header menu links. Is there a way I can have the breadcrumb show something more meaningful such as "::Blog" rather than "Home::ezphead3.png"? The same issue occurs as the heading on the EZ-Page when it comes up in the centerbox. My PHP and CSS skills aren't the best, so any help would be really appreciated. Thanks!

Hmm, not sure what is actually happening there. Can I see it live?

Thanks for such a quick response. Unfortunately, it's not on a regular internet server yet, just on our local home server. Everything else seems to render ok, such as the graphics in the menu. I can do a screen print if that helps. Here's a partial screen print. (attached)

I put the image name in the "Page Title" field in Admin/EZ-Pages. Hopefully that was correct.

That would explain your problem. You do not use the image name anywhere in the ez-page title; give the ez-page the correct title you want it to have.

OK. That most definitely would do it. I'll have to go back and have another look at the "read me" file. I must have misunderstood something. I don't recall putting the image names in any CSS or PHP, though. Thanks again for your prompt help! The plugin was exactly what I needed. Thanks for developing it.

Works fine now- duh! I feel a bit sheepish but thanks again. I figured it was something obvious- LOL!

You don't have to put the image name anywhere... the code automatically finds and uses the image if it exists and its name fits the rules.

Unless I don't understand exactly how to use this mod, it doesn't work with 1.5.8a. Any suggestions?

Having been designed for 1.3.9, I'm surprised it was still working for 1.5.1.

With so many changes since 1.5.1, this will probably need to be rewritten.

What are you looking for the mod to accomplish for you?

I was just looking for some way to style the active EZPage title.

We really need a lot more information to "see" what you are talking about. Is this the area you are wanting to style? If so, red or yellow? If not, how about a screen shot?

Sorry, I meant the links in navEZPagesTop and navSupp. It looked like the plugin in question would let me show the selected (active?) link, such as About Us, etc. here: coastfansDOTcom as bold, or a different color text , when the visitor is on that page. Click on Community to see it work in Simple Machines forum. Thanks.

With bootstrap template v 3.3.0, lat9 added active link settings for navSupp.

navEXZpagesTop MAY be added in the future but it is a lot of change to the code just for that.

You might want to raise the issue on the bootstrap github if you want to use that.

normally the following css would work

Code:

---

div#navEZPagesTop li a:active
{background-color: #ad0000}


---

It doesn't work in responsive_classic or bootstrap and may not work in any other template as the coding is not there for "marking" your selection as active.

All links on that menu bar are labeled the same.

Here's a look at what the coding in bootstrap 3.3.0 does. The trick is getting the activeLink into the class for the link.