Font size issue: Some text not sized properly- How can I quickly change them all??!?!

[Donn]

Some of the text on my new 1.3.8A cart is really tiny. I started going into the php template files, and added classes to a few instances where the type is too small. While this worked fine to solve the problem, it also seems like the wrong way to proceed.

It will take a long time setting the font size in this manner, and so I wonder if there is a faster way, by referring to them (all instances of tiny type) by a common class, id, or something else that is already defined. If not, do they all have their own individual class, id, or something else defined, that can be stacked into one CSS statement in the style sheet??

I can summarize by saying that every output template seems to display at least one instance of text that is too small:

In the Gift Certificate FAQ Link— The five options at the top are all tiny....
All the way down to
‘Please choose from one of the questions above.'


In Advanced Search....everything sized Ok except the

‘Search Help[?]'

as well as ALL text and blanks that are part of the form data. (Pulldown menu options, mm/dd/yyyyy, and the empty blanks at left

-Captions under images that appear in the Newly Listed Box in the center

-Item Categories (But I'd like these to STAY small, as I always use a cat image as well, so they are fine as they appear!)

On the Newsletter Unsubscribe page, all the text is small, except the title.

On the product listing page, the Filter Results with pulldown box contents are tiny, as well as the ‘Displaying X or X', as well as

the right page navigation (1 2 3 [Next>>}),

the Manufacturer, Item Image, Item Name, and Price in heading....


as well as the text under each title in this listing, and the price.

So, does it seem as though there is ONE setting that affects all of these?

Any help would be much appreciated.

Donn

[fairestcape]

I think you're over-egging this omelette...

Your stylesheets should be okay for practically all font size settings.

[Donn]

I think you're over-egging this omelette...

Your stylesheets should be okay for practically all font size settings.

OK...I've found a bunch of definitions in the style sheet that I've changed so far. Only a few left. I guess it was silly thinking that there was some global selector to change them all!!

So I'm guessing you meant that going in and adding classes and Ids is not even necessary- that all the text I seek to change the font size of can be changed in the style sheet ALREADY. Is this correct?

I could use a bit of help finding out the method I should employ to determine how to refer to certain text....I mean..is there some naming system that would help me to figure out a way of determining the name of a selector without just asking for each one?

Anyway, the text I still have issue with:

Advanced Search: Pulldowns, blanks on form

Product listings: Pulldown (categories, Items starting with)
Displaying X of Y (of Z) items 1 2 [Next>>]
Manufacturer, Item Image, Item Name, Price


On Item Description

X Available
Manufactrered By:
This item added on day, date, 2009


Sign In page....'Please acknowledge you agree with our privacy..."*
Required Information
Pulldown menus



Gift Certificate FAQ
Purchase....all the way to "when Problems Occur'



Newsletter Unsubscribe. ..'were sorry....all text'



Featured
‘More featured items...Please check back..."
Pulldown


Bottom bar, top bar....EZ Pages, Categories in header

I don't mind answers when I'm stumped, but I really wish to learn HOW to figure this out for myself in future.

Apologies in advance for my denseness with regard to this....I know it should be easy finding the selectors in the style sheet, or adding them if they don't exist....

[rstevenson]

At the very top of the stylesheet there is a setting for font-size: 65%; or something very similar. I think it's usually in the body definition. Change that to something like 75% or even 80% and you change all the text on your site by that amount.

You then style individual chunks of text up or down from that using a relative unit like em further down in various definitions in the stylesheet.

You asked... "is there some naming system that would help me to figure out a way of determining the name of a selector without just asking for each one?"

Well, after a while you get used to the naming scheme, which is logical. But even better is to use the Web Developer Tools add-on for Firefox (or similar) to find out for yourself exactly what to change. If you don't use this tool set, you're working too hard.

Rob

[Donn]

At the very top of the stylesheet there is a setting for font-size: 65%; or something very similar. I think it's usually in the body definition. Change that to something like 75% or even 80% and you change all the text on your site by that amount.

Thanks, Rob. That clears this up quite a bit.

Unfortunately, I worked backwards, and adjusted all the em settings without first setting the font-size percentage.


For this project, I am going to just change the blocks of text that are still in a tiny font size because there are so few remaining, rather than re-doing the font size percentage, as that would require even more revising of all the other type I've set.

For the next ZC installation I do, I'll start with font-size percentage and do this properly.

You asked... "is there some naming system that would help me to figure out a way of determining the name of a selector without just asking for each one?"

Well, after a while you get used to the naming scheme, which is logical. But even better is to use the Web Developer Tools add-on for Firefox (or similar) to find out for yourself exactly what to change. If you don't use this tool set, you're working too hard.

Rob

Thanks for the info. I don't have / use the Web Developer Tools. I'll look into it.

[fairestcape]

Yeah, sorry Donn... Rob came in with more info which I should have given in the first place...

Much of the text takes its style from the BODY declaration - largely because many text elements in the templates don't have a dedicated class or ID of their own. Setting this "global" style to a higher percentage is usually sufficient for most people's needs.

And definitely: FireFox with Web Developer is essential. I also use the Colorzilla add-on to help find out hex colours.