Can't get hover to work??

Hey guys,

This is my first attempt at setting up a Zen Cart template, or any template for that matter.

I'm having problems trying to get the hover on the main categories to work.:blush:

Please see:http://totaltattoosupplies.com/

As you can see, the category text is black and I'd like for it to hover on blue.

Here's the css,

a:link, #navEZPagesTOC ul li a {
color: #2B60DE;
text-decoration: none;
}

a:visited {
color: #3300FF;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #2B60DE;

#navCatTabs ul li a {
color: #0000FF;
}

A.category-top, A.category-top:visited {
color: #000000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #0000A0;
text-decoration: none;

Also, the information box on the right seems to have text in two different colours?

Any help would be appreciated...

If a sytle declaration does not appear in the stylesheet, you have to ADD it yourself.

Right now, the section governing category links looks like:

/ categories box parent and child categories /
A.category-top, A.category-top:visited {
color: #000000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #0000A0;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/ end categories box links /

You can INSERT your own declarations:

*/ categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #000000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}

A.category-top:hover, A.category-links:hover {
color: #000ff0;
}

A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #0000A0;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links /*

Follow the same procedure if you want the subs also changing colour on hover.

By the way... your site at 100% width looks awful on a wide screen. The header logo starts to "tile".

Much better to set the width as FIXED number of pixels.

Right now, your header image is about 1015 pixels wide.

First you should narrow it down to about 950 pixels,

then...

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 950px;
vertical-align: top;
border: 1px solid #000000;
}

Great, thanks for the fast response.

I've sorted the hover, woks like a charm now. I didn't even realise the site looked terrible on a full screen:blush:

I changed the header to 950 pixels and width: 950px;.

Only problems I have now are:

(1) The boxes on the right are not aligned with the template?

(2) I'm also trying to figure out how to make the text the same colour within the informaton box on the right. Right now there are two different shades of blue?

(3) Is it possible to make the 12 category images on the homepage hover?

Thanks again for your help. I'm learning every day:clap:

The right sidebar is pushed out because the center column content is too wide to fit in the space available. You will have to make the page wider or the category links etc. narrower.

I don't see two different shades of blue in the information box links.

Your category images are custom content, so you can make them hover without recoding any standard files. How do you want them to change? You will most likely have to make your regular link images backgrounds for blank elements with defined height and width, and create new versions of the images for the hover appearance, using those as the :hover background.

How can I decrease the width of the boxes on the right?

I think I'll leave the 12 category images as is for the moment.

Another issue I'm having is trying to make the product thumbnails larger. I've tried doing it from the admin..

Confirguration - Images - Small Image Width and Small Image Height

I adjusted the sizes from the admin but no change?

How can I increase the image sizes. They are really small at the minute..

Thanks for the help!

gjh42:

You will have to make the page wider or the category links etc. narrower.

One reason to keep the page width at 950 pixels is to accommodate older, lower-resolution screens that some of your shopers may still be using.

Display settings in your webshop should be configured to try to accommodate every eventuality - and as you have no idea of your visitors' screen resolutions, it's best to set your visuals to the "lowest common denominator".

When you've had some traffic, you can get a webalizer report (usually found in your C-Panel) which will tell you the proportion of visitors using various browsers and screen resolutions, and then you can make a more informed choice about your desired screen display width.

schoolboy:

One reason to keep the page width at 950 pixels is to accommodate older, lower-resolution screens that some of your shopers may still be using.

Display settings in your webshop should be configured to try to accommodate every eventuality - and as you have no idea of your visitors' screen resolutions, it's best to set your visuals to the "lowest common denominator".

When you've had some traffic, you can get a webalizer report (usually found in your C-Panel) which will tell you the proportion of visitors using various browsers and screen resolutions, and then you can make a more informed choice about your desired screen display width.

Makes sense.. thanks for the advice.

Can you help me with my above problems?

I've managed to increase the size of the images but they seem to be very close together?

See here:

http://totaltattoosupplies.com/index.php?main_page=index&cPath=1

How can I seperate them?

Also need to make those sideboxes on the right (of homepage)slightly smaller.

If you use FIREFOX, then get the following two PLUGINS:

Webmaster Toolkit from chrispederick.com

And

Firebug - from the mozilla site itself.

Load these into Firefox.

These tools allow you to see the back-end code behind any displayed web page, and also have some nifty tools to enable you to establish what STYLES are controlling what ELEMENTS in the page.

You can then do an off-line edit to the stylesheets (for example), trying out various combinations of styles and their associated declarations.

When you are happy with the result (it makes real-time changes to the page being displayed) you can copy these edits to your actual stylesheet(s) on the server.

If you need help with CSS, then w3schools.com has some good tutorials.

Wow..really great tools there. Very usefull - I've managed to edit the files on live edit and know what I need to do:

Need to change the 150px to 116px. Then they fit perfectly.

Problem I'm having now is trying to find those files via ftp... and sugestions?

I know I should be able to find them with these tools but I'm just getting a feel for them right now!

That's an admin setting: Configuration > Layout Settings > Column Right width and Column Right Boxes width.

Great... thats turned out to be pretty easy. I'm starting to really like zen cart:smile:

One other small problem..now that the boxes are smaller, the curencies drop down box has remained the same size. I'll need to make that match the width of the other boxes.

Please help...