Customizing the Tricia Web Design

Types: no tags assigned

Incoming Links
Referenced by	Anpassen des Layouts Contributing to the Tricia Development Support for Developers

Tags: layout html css design tricia

The look and feel of a Tricia installation can be flexibly customized by changing a small number of .html, .css and image files. If you want to make major design changes you have to create your own versions of the following files:

mainPage.htm
css/header-and-footer.css

HTML-Header and document type

The document type is XHTML Transitional. The following template shows the main structure of the htm file including a minimum header:

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>$title()$</title>
    <link rel="shortcut icon" href="/__$cacheBreakerId()$/favicon.ico" type="image/ico" />

    $templateCss()$
    $templateJavaScript()$
    $templateHeaderExtension()$
</head>

...

</html>

The line $templateCss()$ will be substituted to several lines of CSS includes. A reference to the header-and-footer.css is included so you do not have to add it.

Custom Images

Your own images should be placed in an "images" folder. If you reference an image from the the .htm file, you have to use the following path:

"/__$cacheBreakerId()$/images/[imageFileName]"

When referencing images from the CSS you can use a relative path ("../images/[imageFileName]")

However, there is a difference between normal plugins and stylePlugins. If you add new images in a normal plugin (different from platform), you have to refer to them like this:

"/__$cacheBreakerId()$_yourPluginName/images/[imageFileName]"

Login and Logout

For logging in, a form with two visible input fields, a checkbox, a submit button and two hidden input fields has to be provided. You can use the following code as a template:

$[!loggedIn()$
<form id="loginForm" action="/error/noJavaScript" method="post">
    <input type="text" name="login" id="login-login" value="$userLogin()$"/>
    <input type="password" name="password" id="login-password" />
    <input type="submit" value="Login" id="login-submit" />
    <input type="hidden" name="nonce" id="login-nonce" value="$nonce()$" />
    <input type="hidden" name="digest" id="login-digest" />
    <input type="checkbox" name="remember-me" id="remember-me" />
</form>
$loggedIn]$

The lines starting and ending with '$' are necessary to only insert this markup when the user is not logged in. Of course you can add more attributes (e.g., "class") to the elements and you should provide appropriate labels. Additionally you should place a registration link somewhere on the page. The link should point the user to the following URL:

/registerNew?forward=$currentLocator()$

The last part "$currentLocator()$ has to be eveluated in the content of the .htm page, so you cannot move this URL to a javascript file.

For logging out, simply direct the user to the URL "/logout". The respective link or button should be only visible when the user is logged in. You can use the following switch to achieve this

$[loggedIn()$
Your markup here
$loggedIn]$

Addressing the current user

If the user is logged in, you can insert the user's name somewhere on the page using

$userName()$

The URL of the user account can be obtained like this:

$userUrl()$

Main menu

To include the main menu in the page, you simply have to include these lines:

$[hasMenu()$
    $menu()$
$hasMenu]$

You can use the hasMenu conditional also somewhere else in the page if you need it. This is an example of the generated output:

<ul id="nav">
    <li class="active"> <a href="/first-menu-entry"><span>First Menu Entry</span></a>
        <ul>
            <li class="active"> <a href="/a-submenu-entry">A submenu</a>
                <ul>
                    <li> <a href="/sub-sub-entry">Sub-Sub-Entry</a> </li>
                </ul>
            </li>
            <li> <a href="/wikis/home-wiki/short-entry">Short entry</a> </li>
        </ul>
    </li>
    <li> <a href="/second-menu-entry"><span>Second Menu Entry</span> </a>
        <ul>
            <li> <a href="/another-submenu-entry">Another submenu entry</a> </li>
            <li> <a href="/yet-another-one">Yet another one</a> </li>
        </ul>
    </li>
    <li> <a href="/third-menu-entry"><span>Third Menu Entry</span> </a> </li>
</ul>

The menu substitution always produces the complete menu tree of the current wiki as nested lists. The root list has the id "nav". All <li> elements on the path to the current page are marked with the class "active". The <li> elements on the root level contain an additional <span> element around the link to make styling easier.

Links to the different kinds of content

Somewhere on the page you have to provide links to the main kinds of content like wikis, blogs or groups. You can use the menuItems substitution like this to access the respective URLs and labels:

$[menuItems() m$
    <a href="$m.url$">$m.label$</a>
$menuItems]$

Of course you can add a lot more markup in the middle. In any case you use $m.url$ and $m.label$ as placeholders for url and label of the respective link. The number of these menu items varies depending on the configured plugins and the role of the current user (admins see additional entries).

Messages

Somewhere in the page you have to include the $messages()$ substitution to allow the system to output confirmation or error messages. This is what you see for example after login. These messages will be output like this:

<div class="tricia-messages>
    <p class="confirmationMessage">Everything Ok</p>
    <p class="errorMessage">Something went terribly wrong!</p>
</div>

The tricia-messages div is always there, even if there are no messages.

Breadcrumbs, last editor and modification date

Somewhere at the top of the page you have to include this snippet of markup:

<div class="info-holder">
    <a href="http://www.infoasset.de/wikis/tricia-help/home" target="_blank" class="helpicon" title="Tricia Help">Tricia Help</a>
    $pageModified()$
    $breadCrumbs()$
</div>

This is should not be changed.

Actions and views

For displaying actions and views use this piece of markup:

$[loggedIn()$
    $[showViewsOrActions()$
        <div class="tabs-holder">
            $actions()$
            $views()$
        </div>
    $showViewsOrActions]$
$loggedIn]$

If you want to display actions and views also to users that are not logged in, you can omit the anonymous conditional. You should not make other changes to this markup.

Search input

To use Tricia's search functionality you need a form, an input field and a submit button with specific Ids and names:

<form class="search-form" action="/search" id="triciaSearchForm">
    <fieldset>
        <input class="text" type="text" name="query" value="What are you looking for?" id="tricia-search-input"/>
        <input id="submitSearch" type="submit" value="search" />
    </fieldset>
</form>

To limit the width of the autocomplete result list, you can style the <div> with the id "quicksearch-menu-wrapper" which is created dynamically by the search control.

Page content

The actual content of the page is included like this:

<div class="tricia-page-content" id="pageContent">
    $content$
</div>

The width of this div has to be set to at least 700px since it may contain additional columns like in the search results view.

Footer

There are no restricions regarding the footer. We recommend to include a help link (http://www.infoasset.de/wikis/tricia-help/home) and "Powered by Tricia".

Links to the different kinds of content

Somewhere on the page you have to provide links to the main kinds of
content like wikis, blogs or groups. You can use the menuItems
substitution like this to access the respective URLs and labels:

$[menuItems() m$
<a href="$m.url$">$m.label$</a>
$menuItems]$

Referenced by:

Anpassen des Layouts

Contributing to the Tricia Development

Support for Developers