Get started with PHP-Fusion

How to validate a theme - the easy way

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
Posted by Harly on January 04 2011 18:15:53
0 Comments · 92190 Reads · Print
Comments
No Comments have been Posted.
Post Comment
Please Login to Post a Comment.
Ratings
Rating is available to Members only.

Please login or register to vote.

Awesome! Awesome! 50% [1 Vote]
Very Good Very Good 50% [1 Vote]
Good Good 0% [No Votes]
Average Average 0% [No Votes]
Poor Poor 0% [No Votes]