Just a quick question.

[coco777]

I need to change the font size of the text on my forum, size 12 makes peoples threads hard to read, would like to change to size 14 but do not know which line to edit.

 

Also which line is to change the colour of a link that has already been used ?

 

Many thanks once again.

 

*/

 

body {

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

color: #fff;

font-weight:bold;

background: url(images/bg.png) repeat-x top #2A3F54;

margin: 0;

padding: 0;

text-align: center;

}

 

a {

color: #fff;

font-weight:bold;

text-decoration:none;

}

 

a:hover {

color: #FFFFFF;

font-weight:bold;

text-decoration: underline;

}

 

p {}

 

h1, h2, h3, h4, h5, h6{

font-size: 12px;

color: #fff;

font-weight:bold;

background: url(images/menu2b.png) top left repeat-x;

margin: 0 0 6px 0;

padding: 4px 4px 1px 6px;

text-align: left;

height: 21px;

 

 

}

 

table {

margin: 0px;

padding: 0px;

border: none;

border-collapse: collapse;

}

 

td {

text-align:left;

vertical-align:top;

padding-left:2px;

padding-right:2px;

}

 

blockquote {}

 

ul, ol {}

 

form { }

 

input{

margin:2px;

}

 

hr {

margin-top:2px;

height:1px;

border:none;

background-color:#3f3f3f;

}

 

/*********** dizajn sajta ***********************/

 

#container

{

margin: 0px auto;

padding: 0;

width: 87%;

border-left: 2px solid #fff;

border-right: 2px solid #fff;

background: url(images/hb.png) repeat-x;

 

}

 

#header

{

    background: url(images/header.jpg) no-repeat bottom left;

padding: 0px;

    height: 194px;

    width: 100%;

    margin: 0;

 

}

 

#menu

{

    margin: 0;

    padding: 0;

    list-style-type: none;

background: url(images/ncbg3.png) repeat-x bottom;

    width: 100%;

height: 21px;

font-size: 12px;

}

 

#menu li

{

    display: inline;

}

 

#menu a

{

    display: block;

    float: left;

    padding: 2px 1em 0 1em;

    text-decoration: none;

font-weight: bold;

    color: #fff;

    text-align: left;

}

 

#menu a:hover

{

   

    color: #FFFFFF;

font-weight: bold;

}

 

#headborder

{

    margin: 0;

    padding: 0;

    background: url(images/ncbg2.png) repeat-x bottom;

width: 100%;

height: 21px;

}

 

 

#container2

{

    margin: 0px auto;

    padding: 0;

    width: 87%;

    background: #000;

    border-left: 2px double #fff;

    border-right: 2px double #fff;

background: #3B4858;

font-weight:bold;

}

 

 

.leftmenu

{

   width: 17%;

   height: 100%;

   padding: 0 0 0 0;

   border-right: 1px solid #ACBECC;

   float:left;

   margin: 0 1% 0 0;

   background: url(images/coolmenu.png) repeat-y #192734;

   font: 12px Arial, Helvetica, sans-serif normal;

   color: #fff;

   font-weight:bold;

}

 

 

 

.news

{

   width: 100%;

   float:left;

   padding: 0;

   margin: 0 0 0 0;

 

   

}

 

.title

{   

   padding: 2px 0 0 6px;

   margin: 1% 0 0 0;

   font: 12px Arial, Helvetica, sans-serif;

   font-weight: bold;

   color: #fff;

   text-align: left;

   background: url(images/menu2b.png) top left repeat-x;

   border-top: 1px solid #ACBECC;

   border-right: 1px solid #ACBECC;

   border-left: 1px solid #ACBECC;

   height: 21px;

  }

   

.story

{

   

   padding: 0 4px 0 6px;

   margin: 0;

   font: 12px Arial, Helvetica, sans-serif normal;

   color: #fff;

   font-weight:bold;

   text-align: left;

   border-right: 1px solid #ACBECC;

   border-left: 1px solid #ACBECC;

   background: url(images/newsb.png) no-repeat right top;

   

  }

   

.date

{

   padding: 6px 6px 0 0;

   font: 9px Arial, Helvetica, sans-serif bold italic;

   color: #fff;

   font-weight:bold;

   text-align: right;

   border-right: 1px solid #ACBECC;

   border-left: 1px solid #ACBECC;

   border-bottom: 2px solid #ACBECC;

   background: #4E5E6D;

   height: 21px;

 

   }

   

.postby

{

   text-align: right;

   background: transparent;

   padding: 7px 7px 7px 7px;

   color: #808080;

   font-weight:bold;

}   

   

.rightmenu

{

   width: 17%;

   padding: 0 0 0 0;

   border-left: 1px solid #ACBECC;

   float:right;

   margin: 0 0 0 0;

   background: url(images/coolmenu.png) repeat-y #192734;

   height: 100%;

   font: 12px Arial, Helvetica, sans-serif normal;

   color: #fff;

   font-weight:bold;

 

}

 

#footer

{

   background: url(images/ncbg3.png) repeat-x top left;

   width: 99.7%;

   height: 21px;

   margin: 0 0 0 0;

   text-align: center;

   padding: 4px 0 0 4px;

   font: 12px Arial, Helvetica, sans-serif normal;

   color: #fff;

   font-weight:bold;

   clear: both;

   }

   

/************* #search styles ***************/

 

#search{

margin: 0px;

margin-top: 1%;

padding: 1px 4px 4px 10px;

font-size: 90%;

text-align:right;

display:block;

float: left;

}

 

#search form{

margin: 0px;

padding: 0px;

}

 

#search label{

margin: 0px;

padding: 0px;

}

 

*html #search{

margin: 0px;

padding: 4px 4px 0px 10px;

font-size: 90%;

text-align:right;

display:block;

}

 

/***************** E107 STYLES *****************************/

 

.bodytable {

padding: 8px;

font: 12px verdana, tahoma, arial, helvetica, sans-serif;

color: #929293;

font-weight:bold;

}

 

.indent{

border: 1px solid #ACBECC;

margin:2px;

padding:4px;

}

.indentchat{

background-color: #4E5E6D;

border: 1px solid #ACBECC;

margin:4px;

padding:4px;

display:block;

text-decoration:none;

font-weight:bold;

color: #FFFFFF;

}

 

.mediumtext {

font: 12px verdana, tahoma, arial, sans-serif;

color: #ffffff;

font-weight:bold;

}

 

.smalltext {

font: 12px verdana, tahoma, arial, helvetica, sans-serif;

color: #cbcbcb;

font-weight:bold;

}

 

.tbox {

border: #39393b 1px solid;

color: #000;

font: 12px verdana, tahoma, arial, helvetica, sans-serif;

background: #fff;

font-weight:bold;

 

}

 

.helpbox {

background-color: #1f1f1f;

border: #39393b 1px solid;

color: #fff;

font-weight:bold;

font: 12px tahoma, verdana, arial, helvetica, sans-serif;

 

}

 

.small {

background-color: transparent;

    color: #fff;

    font-weight:bold;

font: 12px tahoma, verdana, arial, helvetica, sans-serif;

}

 

.button{

margin:2px 2px;

background-color: #687887;

border: #ACBECC 1px solid;

color: #cbcbcb;

font-weight:bold;

font: 12px verdana, tahoma, arial, helvetica, sans-serif;

text-align:center;

}

 

/* FORUM STYLES */

 

.fcaption {

padding:0px 4px;

height:21px;

line-height:21px;

background: #282828 url(images/ncbg.png) top left repeat-x;

border-left: 1px solid #4E5E6D;

border-right: 1px solid #4E5E6D;

color: #fff;

font-weight:bold;

}

 

.fcaption span.smalltext{

color: #fff;

font-weight:bold;

}

 

.fcaption span.smalltext a:hover{

color: #fff;

font-weight:bold;

}

 

.fcaption a {

color: #fff;

font-weight:bold;

text-decoration: none;

}

 

.fcaption a:hover {

color: #fff

font-weight:bold;

}

 

a.forumlink{

color: #fff;

font-weight:bold;

text-decoration: none;

}

 

a.forumlink:hover{

color: #fff;

font-weight:bold;

}

 

.fborder {

border: #4E5E6D 1px solid;

background-color: transparent;

}

 

.forumheader{

   background-color: #000;

padding:0px 4px;

height:20px;

line-height:16px;

font-weight:bold;

background-image : url(images/ncbg.png);

color: #d9d9d9;

border-left: 1px solid #4E5E6D;

border-right: 1px solid #4E5E6D;

}

 

.forumheader2{

   background-color: #000;

color: #cbcbcb;

font-weight:bold;

padding: 4px;

border: #4E5E6D 1px solid;

background-image: url(images/chatbg.png);

}

.forumheader3{

   background-color: #000;

color: #cbcbcb;

font-weight:bold;

padding: 4px;

border: #4E5E6D 1px solid;

background-image: url(images/chatbg.png);

}

.forumheader4{

background-color: #000;

font: 10px verdana, tahoma, arial, sans-serif;

color: #fff;

font-weight:bold;

padding: 4px;

border: #4E5E6D 1px solid;

background-image: url(images/chatbg.png);

}

 

.finfobar{

color: #cbcbcb;

font-weight:bold;

padding: 4px;

border: #4E5E6D 1px solid;

background-color: #192734;

}

[haku]

Dont use pixel sizes for text, use ems. If you use pixels, people can't resize the text.

[coco777]

Dont use pixel sizes for text, use ems. If you use pixels, people can't resize the text.

 

So do i just change the 'px' for 'em' or 'ems' ? Or am i reading this wrong ?

[haku]

Basically.

 

Change "px" to "em", and then you will have to play with the sizes. 14em will be MUCH bigger than 14 px. Start with 1em, and work from there.

[coco777]

Very kind of you, many thanks.

[TheFilmGod]

It isn't a good idea to change all "px" to "em" because the whole template and website wasn't created with such measurements in mind. Since they were made in pixel you have to keep it that way. Otherwise, there is no benefit to using ems in the first place.

[haku]

I was only speaking of text sizes (and said as much).

[Anzeo]

Basically.

 

Change "px" to "em", and then you will have to play with the sizes. 14em will be MUCH bigger than 14 px. Start with 1em, and work from there.

 

1em is the standard size. It's about 16px (there are diffrent views on this, but this is a guide which works for me)

I.e. the h1 tags are standard at 2 em and h2 at 1.5.

 

Good luck with it Coco777!

[haku]

there are diffrent views on this

 

I wouldn't say it has anything to do with views at all - they are entirely differnet things. Ems are not a fixed size, and therefore cannot be compared to pixels. The number of pixels that an em is, is based on the font size in the element where the ems are being set.

 

 

[theverychap]

ems are based on the width of the letter "m" for the font you are using.

 

bear this is mind, using different fonts will change the size too...

[dbrimlow]

haku is 100% (1em, 16px) correct. You can't just slap ems in place of px and expect your site to work as originally intended.

 

The whole point is that ems are relative! They are not a fixed unit of measure on their own.

 

They need an initial reference in the body tag.

 

For modern browsers you can set the initial body font-size to pixels and ems will work relative to the px. However, but of course, this is not the case for IE. IE can't calculate relative sizing when the body uses a fixed (px) font-size.

 

And as Anzeo said, the general default font-size for most browsers is 16px. But trying to calculate the relative em of 16px is a nightmare. If 1em = 16px, (which is too large for most of us to use as a default) then 1.1em would be 17.6px ... YIKES!!

 

You would  be forever just guessing and trying different size combinations all under 1em to equal 12px or 10px. .9em or .8em or even .75em?

 

Marko Dugonjić, however, came up with both a simple solution and a web tool to help you calculate the relevant sizing. Here is the concept: base-font-size

 

He bases it all on body {font-size:10px) for modern browsers and font-size:62.5% for IE. That way 1em = 10px, 1.2em = 12px, 2em = 20px, .9em = 9px.

 

Now, that said - as is so often the case with css - "it isn't as simple as that".

 

Because the font-size is not forever and globally relative to the declared body font size; it is relative to its parent element.

 

So, unless you are an advanced mathematician,  once you declare a font size for a container other than 1em, all elements within that container become relative to the new font-size. Imagine what can happen if you nest a few containers within each other but not adjust the font-sizes?

 

Well, like I said, Marco came up with a tool called  typetester that does the math for you.

 

Some people love it. I don't have the time to play with it yet so I don't know how easy it is to work with ... I'm sure it works fine because a lot of serious pros have linked to it in their books (although I notice they don't use it).

 

I personally just set my body font-size to "small" and have created my own visual cues for relative em sizing from there.

 

[haku]

bear this is mind, using different fonts will change the size too...

 

The above is incorrect.

 

An em is a unit of measurement in the field of typography, equal to the pt size of the current font. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size.[1]

 

link

 

 

[ToonMariner]

if you are into the accessible stuff...

 

NEVER use fixed font sizes (px, pt etc.) even when designating the initial font size.

 

use ems in your css and in the body declaration of your css use font-size: 80% (or another percentage - this gives you nicer control when nested em's come into play).