Formatting Questions

[Harvey]

Is it possible to get font sizes in between the  numbers 1, 2, 3 etc?

How would you get a font size that is bigger than size 2 but smaller than size 3?

Font Size 1

Font Size 2

Font Size 3

[Hugo <Nabble>]

You can use a "span" tag instead of "font", then you can use any floating point number (e.g., 1.3, 2.6, 0.3, etc).
Examples:

<span style="font-size:.8em">Font Size 0.8em</span>
<span style="font-size:1em">Font Size 1em</span>
<span style="font-size:1.5em">Font Size 1.5em</span>
<span style="font-size:2em">Font Size 2em</span>

Font Size 0.8em
Font Size 1em
Font Size 1.5em
Font Size 2em

[Harvey]

Thank you.  I know how to add bold and italic to the string below.

<span style="font-size:1.5em">Font Size 1.5em</span>

How do you add color to it? This didn't seem to work:

<span style="font-size:1.5em; font-color:blue">Font Size 1.5em</span>

What other attributes can you add?

[Hugo <Nabble>]

This page explains the options:
http://www.w3schools.com/css/css_font.asp

Some examples:

<span style="color:#44D15A">Example1</span>
<span style="color:#aa4566;font-style:italic;font-size:1.2em">Example2</span>
<span style="color:#2211AA;font-style:oblique;font-size:1.1em">Example3</span>
<span style="color:#EE2836;font-weight:bold;font-size:1.3em">Example4</span>
<span style="color:#1E8363;font-variant:small-caps">Example5</span>

Example1
Example2
Example3
Example4
Example5

[Harvey]

I really like the font I am using - Trebuchet MS.

I would like to make it BOLD for my post titles and poster names.

However every time I add font weight BOLD to the CSS it just seems to spread out the spacing, not make it bold.  Any tips?

[Hugo <Nabble>]

You can post a test message with different font sizes so that you can understand what happens. Here is an example:

<span style="font-weight:lighter">lighter</span>
<span style="font-weight:normal">normal</span>
<span style="font-weight:bold">bold</span>
<span style="font-weight:bolder">bolder</span>

<span style="font-weight:lighter;font-size:120%">lighter 120%</span>
<span style="font-weight:normal;font-size:120%">normal 120%</span>
<span style="font-weight:bold;font-size:120%">bold 120%</span>
<span style="font-weight:bolder;font-size:120%">bolder 120%</span>

<span style="font-weight:lighter;font-size:140%">lighter 140%</span>
<span style="font-weight:normal;font-size:140%">normal 140%</span>
<span style="font-weight:bold;font-size:140%">bold 140%</span>
<span style="font-weight:bolder;font-size:140%">bolder 140%</span>

Please post the results if possible.

[Harvey]

Hugo I want do this in the CSS so it affects my forum home pages. Not within the posts.

[Hugo <Nabble>]

My suggestion is just a way for you to test the "Trebuchet MS" font and see the different types of bold. Then you choose one for your home pages.

[Harvey]

I've actually spent quite a lot of time on this.

Can you help me determine how to affect the font on the home page without the font within each post?

[Hugo <Nabble>]

To change the post font, you can use something like this:

div.message-text {
    font-family: Tahoma, Arial, Serif;
}

Have you tried that?

[Hugo <Nabble>]

Actually, try this instead:

div.message-text, div.root-text {
    font-family: Tahoma, Arial, Serif;
}

[Harvey]

I don't want to change the post font. I actually ONLY want to change the fonts on the forum  "home page" to make them bolder. (Same font just bolder).

[Hugo <Nabble>]

You could set the app font to bold and then override the post font with the snippet I gave you. Example:

/* App font */
body, input, button, textarea, select {
    font-size: 84%;
    font-family: Trebuchet MS,verdana,geneva,helvetica,arial,sans-serif;
    font-weight: bolder;
} 

/* Post font */
div.message-text, div.root-text {
    font-family: Trebuchet MS,verdana,geneva,helvetica,arial,sans-serif;
    font-weight:normal
}

You should remember that your "Trebuchet MS" font will only work properly on computers that have this font installed. Computers without this font will use those alternative fonts listed in the row. So the configuration you want will force the bold on those other fonts and the text may not look as great as they would look with Trebuchet MS.

[Harvey]

Awesome.

Can I use font-weight percentages to fine tune 110%, 120% etc?

[Hugo <Nabble>]

The possible values for the font-weight property are:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

You can play with these values and see what is best for your case.

[Harvey]

Hugo <Nabble> wrote

The possible values for the font-weight property are:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

You can play with these values and see what is best for your case.

Hugo ... it SEEMS that every thing from 100 to 500 is normal and everything from 600 - 900 is bold?

What does inherit do?

[Hugo <Nabble>]

Harvey44 wrote

Hugo ... it SEEMS that every thing from 100 to 500 is normal and everything from 600 - 900 is bold?

For small font sizes this is probably true for most font families. This probably changes if you make the font bigger.

Harvey44 wrote

What does inherit do?

It inherits this property from the parent elements.

[Harvey]

Hugo <Nabble> wrote

You could set the app font to bold and then override the post font with the snippet I gave you. Example:

/* App font */
body, input, button, textarea, select {
    font-size: 84%;
    font-family: Trebuchet MS,verdana,geneva,helvetica,arial,sans-serif;
    font-weight: bolder;
} 

/* Post font */
div.message-text, div.root-text {
    font-family: Trebuchet MS,verdana,geneva,helvetica,arial,sans-serif;
    font-weight:normal
}

Hugo this has worked pretty well. There are still a few things that are bold that I wish weren't. The text is bold when you are entering/previewing a post but not after it is posted. So i suppose that is ok.

The number of posts a person has under their avatar is bold.

I really just want the interface pages bold. This is not a big priority. Just putting it out there.

[Hugo <Nabble>]

Harvey44 wrote

I really just want the interface pages bold. This is not a big priority. Just putting it out there.

What do you mean by "the interface pages"? The table in the front page of the forum?
Please explain because the solution may be simpler than you think.

[Harvey]

Yes. Just the front page of the forum, or any subforum.