Formatting Questions

classic Classic list List threaded Threaded
32 messages Options
12
Reply | Threaded
Open this post in threaded view
|

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
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
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
Reply | Threaded
Open this post in threaded view
|

Re: Font color, other attributes

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?
Reply | Threaded
Open this post in threaded view
|

Re: Font color, other attributes

Hugo <Nabble>
Administrator
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
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Harvey
In reply to this post by 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?

Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Harvey
Hugo I want do this in the CSS so it affects my forum home pages. Not within the posts.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

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?
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
To change the post font, you can use something like this:
div.message-text {
    font-family: Tahoma, Arial, Serif;
}
Have you tried that?
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
Actually, try this instead:
div.message-text, div.root-text {
    font-family: Tahoma, Arial, Serif;
}
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

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).
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Harvey
Awesome.

Can I use font-weight percentages to fine tune 110%, 120% etc?
Reply | Threaded
Open this post in threaded view
|

Font-weight values

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Font-weight values

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?
Reply | Threaded
Open this post in threaded view
|

Re: Font-weight values

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Harvey
In reply to this post by Hugo <Nabble>
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

Hugo <Nabble>
Administrator
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.
Reply | Threaded
Open this post in threaded view
|

Re: Formatting Questions

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