Why isn't EZPagesTop a <UL>?

[eyal8r]

This seems soo odd to me. I'm trying to customize this area (using the Classic Template), but the EZPagesTop doesn't use a UL or LI. Is there any reason for this? Is there an easy way to convert it to be this way, so that I may customize it via stylesheets?
Thanks!

[kobra]

They have there own tags for css
https://www.zen-cart.com/tutorials/i...hp?article=117

[eyal8r]

Actually, I just added it in. I modified the tpl_ezpages_bar_header file and added it in... ;)

[eyal8r]

huh- I don't see anything in that link talking about CSS- can you explain a little more?

Here's my new problem with this setup:

My Site

I added in a UL and LI tags into the tpl_ezpages_header_bar file- works great, until...

I need to remove that final divider image on the right side of the 'Made in the USA!' link... normally I would do this-

<li><a style="background-image: none;" href="#">

That would remove that image in a hard-coded UL LI. However, since this UL LI is dynamically generated, I don't have access to add that in on a specific link/li.

Any suggestions on how to remove this?

I appreciate the help!

[gjh42]

Change the background-position to left and make it apply only to the second and following items:

#navEZPagesTop ul a {
  background-image: none;
  background-repeat: no-repeat;
  background-position: left;
  padding-right: 10px;
  padding-left: 10px;
  display: block;
  line-height: 75px;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
  color: #008aff;
  }

#navEZPagesTop ul li+li a {
  background-image: url('../images/sitenavdivider.png');}

Tested on your site.

Also, you should delete the original rules that apply to these links, as they are completely overridden by your new rules.

#navEZPagesTop a {
	color: #008aff;
	text-decoration: none;
	}

#navEZPagesTop a:hover {
  color: #b8def0;
  }

[eyal8r]

WHOA. Now THAT IS COOL! I had no idea you could do that within CSS! I seriously thought I would have to have some custom piece of PHP code written, and/or just drop the entire thing and hard code the links in manually! TOO COOL!

Guys, thank you SOO MUCH for all the help! I am learning soo much from all your input!

[eyal8r]

Hi Glen (or any others!)-
Question on this. I just looked at the site using FireFox ver 3.017, and the EZPages Links are all shifted funny. The 'BUY' link is where it's supposed to be, but all the remaining ones are shifted DOWN a little bit. I imagine it has something to do with the CSS li+li line? Not sure.

The odd thing is- using FireFox 3.57 and IE it looks fine. Any suggestions?

[gjh42]

I did notice that you had some business with a huge line-height (which made the simple border-left I was going to suggest not an option); maybe if you convert the styling to a more standard arrangement with padding/margins to get the spacing, it will work better in FF3.0.

The li+li line can only affect whether a background image shows, so I doubt that is the problem in itself.

[eyal8r]

Hi Glen-
Thanks for the response. I'm not exactly sure what a more standard way is, since I'm soo new to CSS (but learning quickly!). The line height I'm using is because the background image itself is 75x tall. When I use a smaller line height, it cuts off that image. I made some changes- but still getting the same results.

Any suggestions?

I appreciate it!

[gjh42]

Your styling looks appropriate now. I saw a line-height: 75px; in there before.

Using borders, left, right or both, on any kind of link selector, causes the ez-page header bar to drop the last item half its height. This doesn't happen anywhere else, but is a problem we saw recently on someone else's site and were unable to figure out. Maybe a close look at the code for that will reveal something about why it happens only there.