Increase font size for links

[butchx5]

Hi
I am trying to increase the font size for the links that appear in my header, namely: 'home' and 'log in' and also 'shopping cart' & 'checkout' when they appear.
I think it means changing a font size in the css file but having tried several options I cannot work out which line(s) I need to adjust.
Can anyone point me to the correct place for the adjustment.

Thanks

[rstevenson]

Are you using either the Web Developer tools or Firebug -- both in the Firefox browser? If not, go get them. They're free, and they'll tell you exactly which elements need to have their style definitions changed OR which elements need to be added to your stylesheet. (There are a lot of class names in Zen Cart code which are not in the stylesheet by default. They're in the code so you can add them to the stylesheet if you have to style them.)

Rob

[butchx5]

Hi

Thanks for your advice - have loaded this up now.

have used it to validate css - there is still one error but I cannot find it!

Sorry! We found the following errors (1)
URI : http://www.slinkykinkyuk.com/
61 Value Error : width only 0 can be a length. You must put an unit after your number : 10

Where do I find this line?

Sounds silly as I did find other areas scattered around without a prob - this one has beaten me.

Helen

[rstevenson]

I see that in the W3.org's validator report, but when I use my editor's built-in validator, or the Total Validator plug-in for Firefox, I don't see that. Not sure why there's a difference, but I believe you can ignore it.

Rob

[butchx5]

Hi

Great!

Next question - now I have this software I have worked out about the validation of css but how do I use it to find out where the lines I need to adjust are?

i.e. I want to change the font size of Home, Log In on my header - what do I need to do?

[rstevenson]

Well, if it's Web developer you have (Firebug is similar) select in the menu... Tools/Web Developer/CSS/View Style Information and click on any element on screen. The stylesheet pops up in about half the browser window.

I see when I click on the word Home, or the larger box around Home and Log In, that I get some of the generic link styling. But when I click to the right of them in the larger box (identified in the Web Developer bar just below the address bar as #navMainWrapper) the colours are being defined there. Start by changing that one (in stylesheet.css) to your preferred colour. You may need to add extra definitions for the active, visited and so on styles just for navMainWrapper too.

You can do the editing right there on screen until you're satisfied, then copy your changes and paste them into the real stylesheet.css file and upload it to the server to make your changes permanent. In other words, you can live-edit, but your edits aren't being saved by Web Developer.

Rob

[butchx5]

Hi
have managed to get the view style info up on screen. Two problems:

Although I can see the css file in various colours - I can't change the info listed.

Also I want to change the font size - Not the colour and I can't see anywhere to adjust the size - Any ideas?

[rstevenson]

To edit the CSS, choose Web Developer/CSS/Edit CSS

To change size, you may have to add the size to the definition. (It's probably being defined elsewhere.) Try adding this to the bottom of the stylesheet...

#navMain { font-size: 1.2em; }

Adjust size as necessary, and add margin or padding and adjust those too as you wish.

If you want to affect the search area as well, use navMainWrapper instead of navMain.

Rob

[butchx5]

Hi

THANKS!

Sorted.

Onto next thing now - Am finding the software really helpful.