This guide is meant as a help to new theme designers, with little or no experience in validating XHTML and CSS.
1) Preparing a test-site:
When I validate a theme, I use a test-site, that I know is 100% valid (running a theme that is also valid, of course), with only the default side- and center panels showing (first thing you see on your site after a fresh
new install of PHP-Fusion), and then I add some examples of those features that the theme.php and styles.css (+ images, of course) controls the appearance of, like:
- a news-example (center-panel), with a news-teaser and the news-story itself.
- an articles-category, and a test-article (center-panel), with an article-teaser and the article itself.
- forum-categories and posts-examples (center-panel), with a quote-example as well.
- the forum_threads_list_panel (center-panel).
- the css_navigation_panel (side-panel).
- the navigation_panel (side-panel).
- the shoutbox_panel (side-panel), with shout-examples.
- The member_poll_panel (side-panel), creating a test-poll, to see the poll-bar.gif etc.
1a) The validation itself:
Then I add the theme that I want to check the validity of (which I've already checked to be HTML valid*), and set the theme in question as the default theme of the site (in
Main Settings).
Now I go to
validator.w3.org and write the URL/web-address of my test-site in the field (identical to the URL/web-address you've written in the
Main Settings), to check the XHTML, and then I go to this site
css-validator, and write the URL of my test-site in the field, to check the CSS.
2) Helpful HTML validator
I think that you'll find this program, an addition to the Firefox browser, very useful (download the Firefox browser
HERE, if you don't have it). Recommended by W3C!
I use it every time I make a theme, as a reference, to get the HTML right. It shows a symbol/icon, in the right bottom corner of the browser (Firefox) that you can point to, showing you how many errors or warnings, if any, the source-code contains. If you right-click (on the same symbol/icon), and click on "Source code...", you can click on the warnings or errors, one at the time, to see what's wrong, and how to correct the code!
The validator-program also shows examples on how to write the code correctly, comparing it with the wrong way of doing it. Very instructive! And when the HTML-validator shows no errors or warnings, I go to the W3C validation site (as described above) and validate the XHTML, and then validate the CSS (and correct the errors, if anyone shows up, off course), and when those 2 validations are 100% okay, then the theme can be declared 100% XHTML 1.0 Transitional & CSS level 2.1 valid.
Here's the link to where you can download and install the addition:
Link
