Gossamer Forum
Home : Products : Links 2.0 : Discussions :

How to change the Font Size of the categories

Quote Reply
How to change the Font Size of the categories
I am using the HTML templates but sizing the categories can't be done by just putting a simple <FONT SIZE=""> line befor the output line.

How do I change the FONT SIZE of the category output?

Thnx in advance.

Nico
Quote Reply
Re: How to change the Font Size of the categories In reply to
Hi

If you are using the CSS file find this code in the links.css file:

Code:

/* This is for Category Listings table cells */
td.catlist {
font-size: medium;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

and then set the font-size to whatever you want.


Chris
Quote Reply
Re: How to change the Font Size of the categories In reply to
But CSS doesn't work with Netscape and in Netscape it looks soooooooooooooooooooooo
ugly.

Nico
Quote Reply
Re: How to change the Font Size of the categories In reply to
Well I used the fonttags and nothing happends, but I will sort it out, any extra clues ?
Quote Reply
Re: How to change the Font Size of the categories In reply to
Hi Nico

CSS does work with NN4.x. For older versions you can use font tags if you want (the CSS might overide these depending n how you have set it up).

Chris
Quote Reply
Re: How to change the Font Size of the categories In reply to
Category listings on the home page are generated from site_html_templates.pl (at the very bottom of the file), not from the templates. They are in a table, so you have to add the font tags to the <TD> calls in the .pl file by hand with a text editor...just be very careful and DO NOT try to do it with an an HTML editor. As always, you should work on a copy so you have a backup in case something goes wrong.

One last thought...if you have not installed IE4+ or NS4+ to test your site, either remove or comment out the <link rel=stylesheet href=...> line in the header of every template. Otherwise, the style sheet will override many of your HTML changes and 4+ users may see your site VERY different from you intended.
Quote Reply
Re: How to change the Font Size of the categories In reply to
Well did that,

but it didn't help at all, in IE it works just fine but in NS 4.x it just wont work, can you place your links site url and place the code you used for changing the font.

Thnx in advance
Nico
Quote Reply
Re: How to change the Font Size of the categories In reply to
Hi

Perhaps I sould do a Links CSS FAQ for the new Resources section of Alex's site?

Code:
@import url(/weblinks/morecitinet.css);

In the second .css file one can use EM's for font-sizes without messing up MSIE3 (it does them as pt's!).

This is good on why pt's are bad:

http://style.verso.com/points/font_wars.GIF

and this on why EM's are good:

http://style.verso.com/scale/


Quote:
Another thing that seems to be different about the two is that IE will use the background color for a font across the whole line (which makes sense to me), but NN only uses the font color behind the word itself.

border: 0; in the css file is a workaround for getting NN4.x to behave like MSIE4/5

Quote:
You have to erase them for all the tags because a lot of them are set for white background, which makes things wacky if you are not using a white background on your site.

I did try setting all these to transparent but this caused other problems...

Chris

[This message has been edited by Chris Croome (edited March 29, 1999).]

[This message has been edited by Chris Croome (edited March 29, 1999).]
Quote Reply
Re: How to change the Font Size of the categories In reply to
I've noticed that IE4/5 and NN4 display the css font sizes DRASTICALLY different.

The problem seems to be with those damn "x-small" "small" "medium" tags that are used for font size. I've found that by using a font point size (i.e. 9, 12, 14...) you get results that are very similar on both browsers.

Another thing that seems to be different about the two is that IE will use the background color for a font across the whole line (which makes sense to me), but NN only uses the font color behind the word itself. So thus the default .css setting for Links 2.0 look a lot better in IE4 than NN. So I just changes the background setting to "blank" (i.e. nothing) on all the .css tags.

You have to erase them for all the tags because a lot of them are set for white background, which makes things wacky if you are not using a white background on your site.

Also you'll have to change a couple of the fonts that have red background and blue backgrounds because they have white text. I just changes the white text to the color of the background and then deleted the bacground color. It looks fairly sharp.

..forgive the spelling errors, I've been modifying my .css file all night Smile

[This message has been edited by crisco (edited March 29, 1999).]
Quote Reply
Re: How to change the Font Size of the categories In reply to
My general thoughts on style sheets: Since they are not supported consistently by current browsers (or at all by the lower browsers lots of people still use), Style sheets are best for "icing on the cake". Remove the CSS link, work on your page with HTML until you get it working the way you want it to, then reinstate the link and see what happens. Make adjustments so the style sheet adds value to 4+ users without crippling appearance for your other visitors (according to the browser sniffer in my site tracker, at least 27% of my visitors use browsers that do not support CSS at all).


Nico-my links is at: speculativevision.com/network/

I'm not sure if it will be helpful or not since I'm using a heavily modified version of the CSS file and have customized my HTML to accomodate it. It would be very helpful if you posted the URL to your site so we could see what you're seeing.

Crisco: It sounds like you're doing fine modifying the files to suit your site and are learning a lot along the way. Like always, it's a lot of trial and error so just keep plugging away! The x-small, small, etc. problem you are having is classic browser incompatiblity. For instance, xx-small SHOULD be equal to <font size="1">, but Netscape thinks x-small is <font size="1> and renders xx-small as super tiny, illegible text. Put simply, because of browser differences, this is just not a good way to determine font size. Points or pixels is better supported, or easier yet, just eliminate the font size declarations from the style sheet and use regular HTML on the page itself (which is better for backwards compatiblity anyway as I noted above). Of course, the REAL answer is for IE and NS to stop playing around and support the standard the way it was written in the first place!

Chris: RE: using points:
Quote:
This is true, the only drawback is that the site then won't scale if the user changes the browsers size.
Ummm...isn't that one of the main purposes of CSS? If I wanted the user to be able to control the font size, why would I specify it? Or did I miss your point? Also, EM's are still a little buggy in NS (5.0 promises to be better...we'll see) so I don't think this is a good option for now.

RE: background colors
Quote:
I did try setting all these to transparent but this caused other problems...
Not specifying a background color for the element in the CSS file at all is better...it's automatically transparent. I only specify a background color when I definitely want it to be different from my page background...makes life easier. I wasn't aware of the border: 0 trick. Good tip...I'll have to try it out.

A couple more good references:
Webmonkey's tutorial (easy to understand, especially if you are a beginner with CSS): http://www.hotwired.com/webmonkey/stylesheets/tutorials/tutorial1.html

Project Cool's CSS browser compatibility chart (good quick reference):
http://www.projectcool.com/develop/reference/css_style.html

Final thought: Just to make things difficult, when I downloaded IE 5 I found out it handles CSS slightly different from IE 4 (surprize surprize). If you haven't downloaded it yet, it would be a good idea so you can be sure M$ didn't sneak in any new troubles for ya' (be sure to select the "compatiblity mode" from the advanced options...it saves enough of the IE4 setup so you can use both for checking your site).
Quote Reply
Re: How to change the Font Size of the categories In reply to
Alex,

You can specify the font size of categories by going to sub site_html_print_cat in site_html.pl or site_html_templates.pl and using a <font> tag inside the following code:

Quote:
$output .= qq|<dl><dt><strong><a class="link" href="$url">$category_name</a></strong> <small class="numlinks">($numlinks)</small> |;

I hope this helps.

[This message has been edited by Bobsie (edited March 31, 1999).]
Quote Reply
Re: How to change the Font Size of the categories In reply to
Returning to topic,

Can ANYONE tell me "How to change the Font Size of the categories" if I'm using templates and non CSS?

ThnkS!

------------------
Alex Tutusaus
Atyc WebDesigns
http://www.webcamworld.com/
Quote Reply
Re: How to change the Font Size of the categories In reply to
Hi Brad

You wrote:

Quote:
Ummm...isn't that one of the main purposes of CSS? If I wanted the user to be able to control the font size, why would I specify it? Or did I
miss your point? Also, EM's are still a little buggy in NS (5.0 promises to be better...we'll see) so I don't think this is a good option for now.

I aim to use html so that it all works fine without style sheets, sometimes it is useful to set font sizes for layout purposes, if however points are used then the user can't always increase the font size in their browser and have the fonts get bigger - this is bad for accessability.

I think setting em's in a @import style sheet is the best solution at the moment.

Chris
Quote Reply
Re: How to change the Font Size of the categories In reply to
Here is a good article on the use of EM's:

http://webreview.com/.../webfonts/index.html

Chris