couple of minor things before going LIVE!

HI all

First of all, without the help of others on this forum I wouldnt have gotten anywhere, so THANKS to everyone who contributed.

I have a couple of minor changes I would like to make before going live:

1. A comment from a 'test' user said that the TEXT SIZE under each product catagory is a bit small and needs enlarging slightly i.e when you click on a catagory from the sidebox you will get a number if images with text underneath, its this text that needs to be a bit bigger

(i have looked through the Stylesheet for this setting but cannot find anything that relates to it)

2. When a customer is actually buying a product (i think it starts at the checkout process) some of the text headings are BLUE. I would like to make them green but again cannot find anything relating to this in the stylesheet

Your help is appreciated as always!

Thanks

https://www.greatbaits.co.uk

1. I'm not entirely sure whether this is the text you mean, but the words under the category images look a bit small, but can be adjusted via> #categoryIcon {font-size:150%}
2. Went to your site, created a test account went into checkout, but couldn't see the problem :no:.

kuroi:

1. I'm not entirely sure whether this is the text you mean, but the words under the category images look a bit small, but can be adjusted via
2. Went to your site, created a test account went into checkout, but couldn't see the problem :no:.

thanks kuroi

so when you went to enter your details (name, add, etc etc) the text at the top of the input box WASNT blue?

Ahh. The headings are green in Firefox, which is what I used, but blue in Internet Explorer. Interesting. I'll take a closer look.

Oh bugger. It's quite boring really.

The text that's causing you grief is enclosed within <legend> tags. There's two bits of CSS styling in you stylesheet relating to these, but neither sets their colour. As a result browsers default to whatever they want. In IE's case that appears to be blue (no I don't know why either) whereas Firefox more sensibly applies inheritance rules and so uses the default color that you have set higher up the hierarchy.

To solve this simply find> LEGEND {

font-weight: bold;
padding: 0.3em;

}and add>

color: #006633;

kuroi, you are a star!!

thanks so much

p.s. I did try to change the size of the text using the #catagoryIcon code you supplied but no good - it didnt work

(if you goto https://www.greatbaits.co.uk and click on CARP FISHING, it will then display some catagories starting with ACCESSORIES (its actually the TEXT UNDERNEATH the image saying Accessories)

I only want to change it a little bigger!

Thanks in advance!

greatbaits1:

I did try to change the size of the text using the #catagoryIcon code you supplied but no good - it didnt workLeave it in anyway, it fixes a different small text problem that you have, and for the one you have just described ...> .categoryListBoxContents {font-size:150%}
It's probably worth sharing how I do this. I simply open do File > View Source and then do CTRL-F to search for the piece of text that is the wrong size. Once I've found it, I move back a little to find the ID or class of the div tag that contains it. Happy hunting.

thanks again kuroi!!

Done that, it works fine. The only thing is that it now makes the rest of the site slightly inconsistent.

What I mean to say is the text is bigger on that page and looks great, but when you click into the checkout, it then reduces back to that small size again. I need to acutally increase ALL the small text through out the whole site.

If this is going to cause me a nightmare, then I will just advertise some specs on my site to help people read it ha ha ha

thanks for all your help

especially the area on the home page, at the top of the page, where it says HOME and LOG IN

can I also make these a little bigger?:thumbsup:

greatbaits1:

especially the area on the home page, at the top of the page, where it says HOME and LOG IN

can I also make these a little bigger?:thumbsup:Of course you can. But this would seem to be an appropriate moment to remind you of the well kinown and rather homely "Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime". My last post taught you how to fish, and they don't come much easier than this one, since the text you are asking about is the first to appear on the page. So I'll leave that one to you as an exercise.

Instead, let's look at text sizes overall. The text that looks small on your site is scattered all over the place. You therefore have two choices, either imcrease text iszes overall on the site and then track down and reduce those that look too large. Or keep identifying those that look too small and increase them individually. I'm afraid that there is no easy way to just hit the ones you want.

You're right Kuroi, I still have a lot to learn with zen, but enjoying all the challenges it throws up now and again.

I have no excuses really, I have tryed your excercise and it has helped a lot so am going to investigate further and will report back on my progress

thanks for your wise words and advise!

If it doesnt work then I can still trying selling specs!!

ok Kuroi, lesson 2!

Viewed the source code and searched for the text, found this:

OK, so goto the stylesheet, looking for the 'navmain' definition, and found 3!!

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #cccc66;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #006633;

the only difference I can find it #navmain ul (what does the ul mean?) #navmain ul li (???) and #navmain ul li a (????)

Which one needs changing and what code is best to use?

Thanks!

"ul" is an unordered list (i.e. a set of bullet points (albeit here with the bullets removed). "li" is a list element, i.e. one of the bullet points. "a" is an anchor, or in practise usually a hyperlink. Although you may wonder what the hell a bulleted list has to do with your site, this structure is very commonly used (not just in Zen Cart) as it give designers access to several HTML tags which can be styled using CSS in many weird and wonderful ways.

Second part of lesson ... CSS is case-sensitive, so "navmain" is not the same as "navMain".

Which could you change? well due to inheritence any of them. Hmm, that probably didn't help did it? Basically whichever you alter, the impact will filter down to the links that you want to affect. It will also affect the "Home" link at the bottom of your page (which might be another of your targets anyway). So which to choose, probably the one closest to where you want the change to manifest itself, i.e. #navMain ul li a