Gossamer Forum
Home : Products : Links 2.0 : Discussions :

Font Size

Quote Reply
Font Size
Would someone please tell me what is the easiest way to change the font size of the category titles/listings to match the size of the menue text?

Here is the site I need to do it for.
http://ubbnetwork.com/
Quote Reply
Re: Font Size In reply to
you need to edit your links.css file, it is well documented with notes and easy to follow.

-----------
hearts
-----
Quote Reply
Re: Font Size In reply to
Even if I use Templates?
Quote Reply
Re: Font Size In reply to
Whether you use templates or not has nothing to do with whether you are using style sheets or not. They are independent of each other. By default, Links uses style sheets either way.
Quote Reply
Re: Font Size In reply to
Thank you so very much!
I will get right on it... Smile

------------------
Website Solution
http://www.websitesolution.net
Quote Reply
Re: Font Size In reply to
uhhh what if I don't have the links.css. I mean, should links still be running?
Cause I can't find the links.css file anywhere...
Quote Reply
Re: Font Size In reply to
Ok, found it, but not working...
Quote Reply
Re: Font Size In reply to
Here is what my links file looks like.
Even though I changed the font size and rebuild all, the fonts are still the same/default on all my pages...


/* **************************************************************************** */
/* Style sheet for Links by Chris Croome (chris@atomism.demon.co.uk) of */
/* webarchitects (http://www.webarchitects.co.uk/) */
/* */
/* For further information on CSS see these sites: */
/* http://www.w3.org/Style/ */
/* http://www.css.nu/ */
/* Want answers to your CSS questions? try this usenet group: */
/* comp.infosystems.www.authoring.stylesheets */
/* */
/* If you want to check the validity of the style sheet you can use this: */
/* http://jigsaw.w3.org/css-validator/ */
/* */
/* **************************************************************************** */


/* Note the use of an absolute URI for the background image */
/* This is a workaround for NN using an address relative to the */
/* .html file rather than the .css file */
body {
color: #000000;
background: #FFFFFF url("http://localhost/links/pages/background.gif") repeat-y;
}

/* Paragraph */
p {
margin-left: 60px;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Definition list */
dl {
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Menu */
small.menu {
font-size: small;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Menu unvisited links */
a.menulink:link {
color: #6633FF;
background: #FFFFFF;
}

/* Menu visited links */
a.menulink:visited {
color: #993399;
background: #FFFFFF;
}

/* Menu active links (not widely supported) */
a.menulink:active {
color: #FF6666;
background: #FFFFFF;
}

/* Menu links when hovered over (MSIE only) */
a.menulink:hover {
color: #FF6666;
background: #FFFFFF;
}

/* Links unvisited links */
a.link:link {
color: #6633FF;
background: #FFFFFF;
}

/* Links visited links */
a.link:visited {
color: #993399;
background: #FFFFFF;
}

/* Links active links (not widely supported) */
a.link:active {
color: #FF6666;
background: #FFFFFF;
}

/* Links when hovered over (MSIE only) */
a.link:hover {
color: #FF6666;
background: #FFFFFF;
}

/* Unvisited links */
a:link {
color: #6633FF;
background: #FFFFFF;
}

/* Visited links */
a:visited {
/* color: #FFFFFF; */
color: #993399;
background: #FFFFFF;
}

/* Active links (not widely supported) */
a:active {
color: #FF6666;
background: #FFFFFF;
}

/* Links when hovered over (MSIE only) */
a:hover {
color: #FF6666;
background: #FFFFFF;
}

/* Links unordered lists */
ul {
margin-left: 60px;
list-style: disc;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* The link description */
span.descript {
font-size: small;
color: #333333;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* New links */
sup.new {
font-size: x-small;
color: #FFFFFF;
background: #FF3300;
font-weight: bold;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Popular links */
sup.pop {
font-size: x-small;
color: #FFFFFF;
background: #00CCFF;
font-weight: bold;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Links date and hits */
small.date {
font-size: x-small;
color: #666666;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Number of links in categories */
small.numlinks {
font-size: x-small;
color: #666666;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This class is for "Looking for something in particular?" */
strong.search {
color: #000000;
background: #FFFFFF;
font-weight: bold;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This class is for "More options" */
small.more {
font-size: small;
color: #000000;
background: #FFFFFF;
font-weight: normal;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This is for main headers on all pages *apart* from the home page */
h1 {
margin-left: 40px;
font-size: small;
font-weight: bold;
border: none;
color: #FFFFFF;
background: #000000;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This class is for the main header on the Links home page */
h1.home {
margin-left: 40px;
font-size: small;
font-weight: bold;
border: none;
color: #FFFFFF;
background: #000000;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This class is for the error messages */
strong.error {
color: #FFFFFF;
background: #FF3300;
font-weight: bold;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This is used for the sub headers */
h2 {
margin-left: 40px;
font-size: small;
font-weight: bold;
border: none;
color: #FFFFFF;
background: #000000;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This is for the margin for the form elements */
div.margin {
margin-left: 60px;
}

/* This is for page $title_linked */
strong.title {
font-size: small;
font-weight: bold;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* Table cells */
td {
font-size: small;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

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

/* Preformatted text */
pre {
margin-left: 60px;
font-size: small;
font-weight: bold;
color: #000000;
background: #FFFFFF;
}

/* This is for the page last updated text */
small.update {
font-size: x-small;
font-weight: bold;
color: #999999;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

/* This is for the total number of links */
p.grandtotal {
margin-left: 60px;
font-size: small;
font-weight: bold;
color: #000000;
background: #FFFFFF;
font-family: "verdana", "arial", "geneva", sans-serif;
}

Quote Reply
Re: Font Size In reply to
Style sheets can be tricky. Be sure to view your pages with NS and IE if you are going to use them because you will often get very different results.

In general, examine your HTML code to see what the closest style is to the element you want the change to affect. NOTE: "view source" of the output...since Links generates the pages it's the only way to be sure which tag you want to alter.

From your source, the closest style in the category list is:

<a class="link" href="http://ubbnetwork.com/Arts/">Arts</a>

So you will want to change all link anchor tags with the "link" class:
Code:
/* Links unvisited links */
a.link:link {
color: #6633FF;
background: #FFFFFF;
}

/* Links visited links */
a.link:visited {
color: #993399;
background: #FFFFFF;
}

/* Links active links (not widely supported) */
a.link:active {
color: #FF6666;
background: #FFFFFF;
}

/* Links when hovered over (MSIE only) */
a.link:hover {
color: #FF6666;
background: #FFFFFF;
}

Add this to each of the above:
Quote:
font-size: small;
the font size should end up as 2 (that's what you want right?).

As always TEST TEST TEST! Nesting of CSS tags will sometimes give you unexpected results (i.e. a background color you didn't want, tiny text, etc.) Cascading literally means that one tag can inherit the properties of the other. Again, NS and IE will handle this differently, so it is very important to check with both browsers AND with IE 4 vs IE5...MS changed the CSS capability somewhat...I believe NS5 is supposed to change as well **SIGH**.

I you want to learn more about CSS, Webmonkey has a good tutorial that is easy to follow. There are lots of others around too, just search for them with any search engine and you'll get lots of hits returned.

Hope that was useful. Good Luck!


OOPS! I just notice this line:
Quote:
background: #FFFFFF url("http://localhost/links/pages/background.gif") repeat-y;
}

The localhost call is a bug...get rid of it or change it so it references a background grafic on your server. If you don't want to use a background image, just make the line:

Quote:
background: #FFFFFF
}

Wink

[This message has been edited by Brad Richardson (edited June 23, 1999).]

Weird...when I edited, the board dropped part of my post??

[This message has been edited by Brad Richardson (edited June 23, 1999).]
Quote Reply
Re: Font Size In reply to
Well, I did just as you said and still nothing...

Take a look http://ubbnetwork.com

------------------
Website Solution
http://www.websitesolution.net
Quote Reply
Re: Font Size In reply to
Hmmm...well, for one thing, the CSS include line is missing from your <HEAD> tag (actually, just about everything is missing from your head tag??). Without it, changing the stylesheet isn't going to help you!

If you want the style sheet to be in effect, you need to add:
<link rel=stylesheet href="http://www.yourdomain.com/foo/links.css" type="text/css" title="<%site_title%> style sheet">
to your templates.


If you don't want to use the style sheet, than you should just add font tags inside the <TD> tags in site_html_templates.pl (be sure to edit the .pl file with a text editor--WYSIWYG will eat it alive!)

Sorry...I guess I should have looked at your source code closer the first time! Frown
Quote Reply
Re: Font Size In reply to
Great stuff - this post sorted me out too!!
Thanks a lot Smile