FlexWiki
HTML Skins
.
Summary

XHTML Skins in OdsWiki.FlexWiki

Discussions at various times with OdsWiki.FlexWiki admins show that all but serious programmers struggle with OdsWiki.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 OdsWiki.FleXhtml plugin. However, that is still too complex and has security concerns. It has been proposed that OdsWiki.FlexWiki support the capability for a file with XHTML layout be used to create a skin for OdsWiki.FlexWiki. This would be an alternative means of creating various borders, though there could be a mix of XHTML and OdsWiki.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 OdsWiki.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 OdsWiki.FlexWiki topic is inserted in the skin. Additional place holder tags will allow other OdsWiki.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 OdsWiki.WikiTalk generated borders so that dynamic content remains accessible.

Skin Tag Summary

  • {{FlexWikiTopicBody}} - the placeholder for the Topic generated by OdsWiki.FlexWiki (this tag is necessary otherwise no topics will be output)
  • {{FlexWikiHeaderInfo}} - optional placeholder for OdsWiki.FlexWiki generated metatags, css references and javascript references (replaces separate calls to the 3 placeholder tags defined below)
    • {{FlexWikiMetaTags}} - optional placeholder for just the OdsWiki.FlexWiki generated metatags (necessary for search indexes and no-follow directives)
    • {{FlexWikiCss}} - optional placeholder for css references generated by OdsWiki.FlexWiki using <AlternatStylesheets> and <OverrideStylesheet> inputs from flexwiki.config
    • {{FlexWikiJavaScript}} - optional placeholder for the OdsWiki.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
Note2

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 OdsWiki.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 OdsWiki.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, Create Talkback Topic Published: 2008-Mar-07

  Information

A namespace to hold blogs relating to development and implementation of FlexWiki
Not logged in. Log in
Recent Topics
HtmlSkins HtmlSkins
Recent Changes Recent Changes
Local Search
Powered by Flexwiki v2.1.0.288

  Related Topics