Capacity is a versatile framework which helps you to construct
your page by focusing on the content. Your pages will be simple
PHP-files which include predefined header and footer. This header/footer
layout the page, you only provide the real content and menu structure.

For each subsite, a site.inc in the toplevel directory of this page,
which would be equal to the later documentroot on the server in many
cases, may be created. This include is used by the header.inc, it
should contain some information about your site, like its name
and the email address of the webmaster, this will be used by header/footer
to setup the page correct.

An example site.inc would be:

<?php// promote which subdomain we are// we are www.kde.org in this case!$site="www";// use new style ;) yeah$templatepath="newlayout/";// promote title to use$site_title= i18n_var("K Desktop Environment");// links in the top bar, right$menuright=array('family/'=>'Sitemap','contact/'=>'Contact Us');?>

Even in the site.inc you can already use the i18n-functions,
which is important to have the names right on translated pages!

The header.inc does some setup of global vars, even before it includes the site.inc, these are:

$site_root$document_root$url_root$current_relativeurl

$site_root contains the relative path to the toplevel of the current site, like:

$site_root="../.."

$document_root contains the absolute pathname which is the documentroot of this site, even correct if the site isn't in it's own vhost. Example:

$document_root="/home/www/sites/www"

$url_root contains the absolute base url to the toplevel of your site, if your site would, for example, have a it's toplevel in http://127.0.0.1:8080/sites/www, like it is for staging, this would contain:

BE AWARE: In former version of the framework it was common to set the $site_root manually before including the header.inc, this won't work now, as the header.inc will overwrite the $site_root. This should cause no danger, as header.inc should find out the right one, but in the long term, all manual definitions should be removed, the global variables header.inc exports should be used to replace the usage of the old $site_root.

The framework is clever, it will never add trailing slashs to the $site_root, $document_root and $url_root, therefor they can and must always be used like:

You can make and preview changes of existing pages online by clicking on the [edit] link at the bottom of each page. Try it on this page.
Then you can download you changes and commit them yourself via SVN, or you can click the link to email a unified diff to the web team.

The navigation menu is defined by a number of menu.inc files.
They are included by a function in media/includes/classes/class_menu.inc, which is called from media/includes/header.inc.
The general menu structure is defined in the menu.inc file of the root directory of each KDE subsite (e.g. http://www.kde.org/menu.inc or http://www.kde.org/areas/kde-ev/menu.inc).

in the Above code, first argument is the title of the menu, second argument is the url, third argument defines that if this menu item is relative, forth argument should be True if it links to a directory and last argument is the Icon

To show an Icon with appendDir, just add icon url as the third argument, like this:

<?php$this->appendDir("A Subsubdirectory","subsubdirectory");$this->appendLink("A Page in the Subdirectory","singlepage.php");?>

The content of subsubdirectories is currently not added to the menu, but this may change in future.
If a subdirectory has just the index.php file or a submenu for the subdirectory is not desired, then an empty menu.inc can be added. If the menu.inc is missing, then the subdirectory is be treated like having an empty menu.inc file.

Headlines must never be used to increase the size of a text. Use <b> to make it stick out. The first letters of every word of a headline or link should be capitalized, apart from small words like "a", "to", etc.

To allow better navigation through the site, each <h2> heading should be linked from a quicklinks section on top of the page:

Each site can have it's own right-side header-logo, like http://conference2006.kde.org. You just need to add a site.png to the top-level directory of your site, the framework will add it automatically if it finds one. Look at for the correct dimensions. While a transparent background would be preferred, atm the Internet Explorer has problems with transparent PNGs, and GIFs are (were) problematic because of patents. Therefore the background needs atm to be duplicated in the image like done for the conference site.

The first call to addImage() creates an image that can be clicked on to link to a larger version of the image. startNewRow() creates a new row. The second call to addImage() creates an image that isn't clickable (note the 0 rather than the URL to the large image).

For web sites like koffice.org and edu.kde.org it makes sense to have a sub-directory for each program that is part of the project and in that sub-directory have a page which shows information about the program. The AppInfo class has been designed to make it easy to create such a page. It can be used as follows:

The second and third parameters of setIcon() are the width and height of the icon. The addContributor() function can take an optional third parameter, a short description of the person's function in the project.

When converting pages, it is important to keep a few common mistakes in mind:
Every page must have $page_title set to ensure correct rendering on all styles. This also means that the original heading must be removed. Otherwise the headline will be duplicated when setting $page_title.

All settings have to be made before header.inc is included.

There cannot be several links on the same page that use the same description for different URLs. This is required for compatibility with certain accessibility related solutions. <a href="foo.php">More...</a> should be replaced by <a href="foo.php">More about KDE 3.x.y</a>, etc.

The new layout uses UTF-8 as encoding. A lot of pages contain non-ASCII characters in names etc., make sure to either convert those to UTF-8 or use their HTML names.

The new layout uses XHTML. All tags without an end tag must be converted from <tag> to <tag />, e.g. <img src="..." alt="..." />. The alt attribute is required for a better accessibility of KDE.org. Additionally, attributes without a value are treated differently in XHTML, e.g. <table nowrap> would become <table nowrap="nowrap">.

Please ensure that you use JPG or PNG images rather than GIF

Images for a particular area/directory should be placed under a pics/ subdirectory