1
haisam
Changing fonts for entire site
  • 2003/11/11 2:10

  • haisam

  • Just popping in

  • Posts: 45

  • Since: 2003/11/11


How does one change the font sizes for the entire site?

2
ackbarr
Re: Changing fonts for entire site

Xoops 2 uses CSS extensively to control the look and feel of your website. If you look in /themes/<your_theme>/style.css you will see all the styles defined for your site

If you are using the default theme you will see these two lines right at the top:
body {colorblackbackgroundwhitemargin0padding0;}

table {width100%; margin5padding5; [b]font-sizesmall[/b]}


The bolded text above sets the font-size to small for every text within a table.
You can change this value like so:

Using pixel sizing:
table {width100%; margin5padding5; [b]font-size10px;[/b]}

It is important to remember the px after the font size. Some browsers will ignore this style if omitted.

Using absolute font size keywords:
table {width100%; margin5padding5; [b]font-sizelarge[/b]}

The absolute font sizes:
xx-small | x-small | small | medium | large | x-large | xx-large

Once you get beyond certain browser's inconsistencies (* cough, cough, IE 5.x, NN 4*), CSS is a very powerful tool to quickly modify an entire site's appearance.

More Information:
W3school's CSS School
Style Master's CSS Tutorial
CSS Tutorial at HTMLHelp.com

3
dreamgear
Re: Changing fonts for entire site
  • 2003/11/11 4:44

  • dreamgear

  • Friend of XOOPS

  • Posts: 78

  • Since: 2002/7/18


A little more, from my somewhat limited experience with XOOPS themes and their CSS files:

What I do is put something like this in style.css:
Quote:

body, a, p, td, div {
font-family: Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
font-size: small;
}


Then, in styleNN.css (for Netscape browsers), I put this:

Quote:

body, a, p, td, div {
font-size: medium;
}


Everywhere else in my style files, I specify font-size only as a percentage. Nowhere do I specify font-size in points or pixels.


For example:

Quote:

.blockTitle {
background: #FDE875;
color: #dd243c;
font-weight: bold;
font-size: 110%;
}


This has the effect of getting almost exactly the same fonts in both browsers, and what's more the user can scale the fonts (with Ctrl+ and Ctrl-) and all the fonts scale together.

Your milage may vary, but this works for me.

Login

Who's Online

231 user(s) are online (145 user(s) are browsing Support Forums)


Members: 0


Guests: 231


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits