Xhtml Skins

Summary

describes a proposed implementation of XHTML Skins and updates recent development efforts

Created

07 March 2008

Topic Contents

XHTML Skins in FlexWiki

XHTML Skins in FlexWiki

Discussions at various times with FlexWiki admins show that all but serious programmers struggle with WikiTalk in getting layouts like they would want them. It has been proposed that XHTML be employed for performing these layout tasks. It was partly for that reason that I created the FleXhtml plugin. However, that is still too complex and has security concerns. It has been proposed that FlexWiki support the capability for a file with XHTML layout be used to create a skin for FlexWiki. This would be an alternative means of creating various borders, though there could be a mix of XHTML and WikiTalk generated borders.

An implementation of this capability would include a variable in the flexWiki.config file <OverrideBorders>. This would point to a file in a directory "/skins" that would provide the skin for all namespaces in the entire website. The property OverrideBorders: would also be usable in the ContentBaseDefinition file for a namespace. Here if the variable did not exist in the flexwiki.config file, but did exist in the ContentBaseDefinition file, then the skin would be applied only for that namespace. at least initially the WikiEdit.aspx page would not be impacted by any skins. If site admins want the other Utility pages to be skinned they need to set <EnableBordersAllPages> to true, otherwise they will have their default appearance. If a FlexWiki admin allows users to edit ContentBaseDefinition files (not recommended for security reasons) then users would be able to create a local skin for a namespace, if a FlexWiki-wide skin had not been declared in flexwiki.config.

The file holding the XHTML content for the skin must include a literal placeholder '{{FlexWikiTopicBody}}' (without the single quote marks), which will determine where the output for the FlexWiki topic is inserted in the skin. Additional place holder tags will allow other FlexWiki generated content to be inserted into the skin at the point marked. These will enable certain header information, including metatags, css declarations and javascript references. Also it will be possible to include one or more WikiTalk generated borders so that dynamic content remains accessible.

Skin Tag Summary

{{FlexWikiTopicBody}}: the placeholder for the Topic generated by FlexWiki (this tag is necessary otherwise no topics will be output)
{{FlexWikiHeaderInfo}}: optional placeholder for FlexWiki generated metatags, css references and javascript references (replaces separate calls to the 3 placeholder tags defined below)

{{FlexWikiMetaTags}}: optional placeholder for just the FlexWiki generated metatags (necessary for search indexes and no-follow directives)
{{FlexWikiCss}}: optional placeholder for css references generated by FlexWiki using <AlternatStylesheets> and <OverrideStylesheet> inputs from flexwiki.config
{{FlexWikiJavaScript}}: optional placeholder for the FlexWiki generated javascript (necessary to have page behaviors work correctly)

{{FlexWikiTopBorder}}: optional placeholder to allow flexWiki to include a wikiTalk generated TopBorder, as per operation without the skin
{{FlexWikiLeftBorder}}: optional placeholder to allow flexWiki to include a wikiTalk generated TopBorder, as per operation without the skin
{{FlexWikiRightBorder}}: optional placeholder to allow flexWiki to include a wikiTalk generated TopBorder, as per operation without the skin
{{FlexWikiBottomBorder}}: optional placeholder to allow flexWiki to include a wikiTalk generated TopBorder, as per operation without the skin

Note1

The skin creator is responsible for ensuring the tags are placed to correctly generate webpages as desired. Skin creator is responsible for CSS interactions.

Note2

The skin creator is not responsible for the DOCTYPE or html declaration. FlexWiki will generate the html title for the webpage.

Sample Skin

Below is an example of a minimum skin would like like (although the tags in the <head> section are all optional)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
{{FlexWikiMetaTags}}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
{{FlexWikiCss}}
<style type="text/css">
<!--
.style1 {
		color: #FFFFFF;
		font-weight: bold;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 18px;
}
-->
</style>
{{FlexWikiJavaScript}}
</head>

<body>
<table width="75%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
  <tr>
    <td bgcolor="#990000"><span class="style1"><em>This is my hard-coded html template.</em><br />
    This is my hard-coded header.</span></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td width="75%"><p>This is my hard-coded body, left </p>
          <p style="background-color:#E6EAEC">{Here's where I tell the wiki to place the body of the article}</p></td>
        <td bgcolor="#CCCCCC"><p>This is my hard-coded body right </p>
          <p>{{FlexWikiTopicBody}}</p></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#E6EAEC">This is my hard-coded footer </td>
  </tr>
</table>
</body>
</html>

The tags for various borders could be added where the template specifies the "hard-coded header", "hard-coded body right" or the "hard-coded footer". If there are no WikiTalk generated borders included then all topics must include wiki navigation directives.

Adding Borders to Utility Pages

Borders have been added to the various utility pages in FlexWiki. I was a bit too aggressive in doing so and will remove them from the AccessDenied.aspx page. I have also found a bug in the Create Namespace process where the process fails silently when access is denied as the AccessDenied.aspx page is called incorrectly and fails to display. both of these will be fixed in the upcoming week.

Tabbed Discussion Pages a la MediaWiki

A WikiTalk implementation of this functionality is nearing completion and should be deployed to the flexwiki.com site this weekend or early next week, with an additional style option, called Forest. Chocolate and Lemon (Classic) have not been retrofitted with the new css selectors required to run the tabbed layout, although that would not be too difficult to do. The implementation that will be deployed on flexwiki.com will display the tabbed layout only when the style is set to Forest, otherwise flexwiki.com will appear identically to the current options.

Permalink, Talkback

	Show Changes
	Edit
	Print
	Recent Changes
	Subscriptions
	Lost and Found
	Find References
	Rename
	Administration Page