HOW TO: Modification theme... v 6.x

HOW TO: theme... v 6.x
Welcome!
I found some time today so i decided to write an article about making themes for php-fusion v 6.0.x
Firstly I would like to note, that you need to know at least HTML (good for You to know CSS too) for making themes.
Let's get to work...
Download exemplary theme (which is made specially for this article), which equals HTML 4.01 demands.

DOWNLOAD

After downloading this file (only 9KB weight) you'll see, that this theme doesn't contain too much images - I have made it expediently,
first - to make easier presentation how it works, second - to show You which files theme MUST contain. And now... back to work!

Open style.css file (239 lines :: 3663 signs) in optional text editor. If You see what You haven't seen before and You don't know how it works, read the explanation below

body {
(...)
}


- defines general appearence of whole theme (default charset, size, margin etc.)


a {
(...)
}
a:hover {
(...)
}
a.side {
(...)
}
a:hover.side {
(...)
}
a.white {
(...)
}
a:hover.white {
(...)
}


- color of links depend on this part


hr {
(...)
}
hr.side-hr {
(...)
}


- sets lines color evoked by < and > tags


.button {
(...)
}


- changes button color, background, charset etc.


.textbox {
(...)
}


- modifies textbox appearance


.main-bg {
(...)
}
.side-border-left {
(...)
}
.side-border-right {
(...)
}


- here we can change the span (in pixels) from top, bottom, left and right


.tbl-border {
(...)
}
.tbl {
(...)
}
.tbl1 {
(...)
}
.tbl2 {
(...)
}


- define color of particular tables like discussion board


.quote {
(...)
}


- modifies quote appearance


.poll {
(...)
}


- a part that is responsible for members poll (frames, etc)


.comment-name {
(...)
}


- changes color of nick of person commenting


.shoutboxname {
(...)
}
.shoutbox {
(...)
}
.shoutboxdate {
(...)
}


- sets color of nick, charset and date in shoutbox


.small {
(...)
}
.small2 {
(...)
}


- appearance of small and small2


.gallery {
(...)
}
.gallery img {
(...)
}
.gallery:hover img {
(...)
}
img.activegallery {
(...)
}


- define frame color, spans in gallery


Thats all about style.css. Further in style.css You can find several similar to above-mentioned miracles, which I separated with something like this:

/*****************************************************\
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
\*****************************************************/

It darts to eyes, so we can see what is "different".
Subject about styles I consider closed for now.