JSPWiki Stylesheet Design #

This page describes the main structure of the JSPWiki's Default Template CSS (Cascading Style Sheet). Just by switching the .css sheet (see JSPWikiSkinDesign) it is possible to change almost anything about the layout of your wiki. This information is applicable from v2.5.96 on, and is based on earlier work on the BrushedTemplate. This info should help you when writing new skins.

Wikibody#

The wikibody is the top-most block containing the header, content and and footer. The content block acts as a container for page and favorites (with LeftMenu and LeftMenuFooter). The page contains the pageactions at the top and bottom of the page, the actual page content and attachments and the favorites.

This structure is coded in ViewTemplate.jsp, EditTemplate.jsp and UploadTemplate.jsp.

<div id="wikibody" >
    <div id="header"> .................... </div>
    <div id="content">
        <div id="page">
            <div id="actionsTop"> ........ </div>
            <div class="tabmenu">
            ... page content goes here ...  
            <div id="actionsBottom"> ..... </div>
        </div>
        <div id="favorites"> ............. </div>  <!-- contains leftMenu and leftMenuFooter -->
 	<div style="clear:both;"></div>
    </div>
    <div id="footer"> .................... </div>
</div>

Typically, the header, content and footer are stacked vertically on top of each other. The page and favorites get a floating style so they appear horizontally next to one another.

Here are some examples of possible layouts. (look at the wiki-markup to get an idea of the css)

header header
page-actions-top
TAB1 TAB2
page page page page
page page page page
page page page page
page page page page
page page page page
page-actions-bottom
favorites
favorites
favorites
footer footer
header header
page-actions-top
TAB1 TAB2
page page page page
page page page page
page page page page
page page page page
page page page page
page-actions-bottom
favorites
favorites
favorites
footer footer

Following example has its favorites taken out of the regular flow, with a position:absolute.

header header
page-actions-top
TAB1 TAB2
page page page page
page page page page
page page page page
page page page page
page page page page
page-actions-bottom
favorites
favorites
favorites
footer footer

Header#

The wikibody/header contains application and company logos, the pagename, search-box and bread-crumbs.

<div id="header" >
  <div class="applicationlogo"> ... </div>  <!-- links to the front-page of this wiki -->
  <div class="companylogo"> ....... </div>
  <div class="search-box"> ........ </div>  <!-- see search-box.jsp-->
  <div class="pagename"> .......... </div>
  <div class="bread-crumbs"> ...... </div>
</div>
The search-box is powered through some javascript with a popup screen (#search-boxMenu) for ajax type-ahead suggestions and a collection of the most recent search commands. (#recentSearches)
<form id="searchForm">
    <div>
        <input id="query"></input>
        <button id="searchSubmit"></button>  <!-- button with search icon -->
    </div>
    <div id="search-boxMenu">
        <div id="searchTools"> .......... </div>
        <div id="searchResult">
            <div id="searchOutput" > .... </div>
        </div>
        <div id="recentSearches"> ....... </div>
    </div>
</form>

Here are some examples of header layouts.

app-logo
org-logo
pagename
search-box
bread-crumbs

app-logo
org-logo
pagename
search-box
bread-crumbs

Favorites#

The wikibody/content/favorites block contains, amongst other things, the LeftMenu and LeftMenuFooter pages. It also has a block for personalised favorites. Create a wikipage called <your login username>Favorites. When you are authenticated, the contents of you personal favorites page will appear in the left menu. See also http://www.jspwiki.org/wiki/IdeaPersonalFavoritesInTheLeftMenu

<div id="favorites" >
    <div id="username"> ............. </div>  <!-- login status and name of the user -->
    ....your personal favorites......         <!-- includes usernameFavorites page   -->
    <div class="leftmenu"> .......... </div>  <!-- includes LeftMenu.jsp             -->
    <div class="leftmenufooter"> .... </div>  <!-- includes LeftMenuFooter.jsp       -->
    <div class="wikiversion"> ....... </div>
    <div class="rssfeed"> ........... </div>
</div>

Here is an example of the favorites layouts.

username
user-favs
user-favs
user-favs
leftmenu
leftmenu
leftmenu
leftmenu
leftmenufooter
leftmenufooter
wikiversion
rss-image

Page#

The wikibody/content/page is the main section of with the actual contents of your pages. The pagecontent block groups all content related information, such as the actual page and the list of attachments. The tabmenu and tabs blocks are rendered by the TabTag.

<div id="page">
  <div id="actionsTop"> ........ </div>
  <div class="tabmenu"> ........ </div>
  <div class="tabs">
    <div id="pagecontent"> .... </div> <!-- render wikipage            -->
    <div id="attachments"> .... </div> <!-- render list of attachments -->
  </div>
  <div id="actionsBottom"> ..... </div>
</div>

Here is a typical page layout.

page-actions-top
TAB1 TAB2
page page page page
page page page page
page page page page
page page page page
page page page page
page-actions-bottom

Pageactions#

The wikibody/content/page/pageactions contain a set of commonly used page actions, such a a link to the home page, RecentChanges, PageIndex etc. Each of the action gets a specific css-class, so you can tweak the presentations as much as you like. (eg you could decide to insert icons for each of the page actions)

Page actions appear both at the top and the bottom of the page. In order not to burn to much screen space, some of the page actions are put into a More... dropdown.

The bottom pageactions block also contains extra page information, such as version, author, last changed timestamp.

Following css classes are defined:

    .action.home
    .action.view
    .action.edit
    .action.comment
    .action.prefs
    .action.attach
    .action.info
    .action.index
    .action.more
    .action.recentChanges
    .action.systeminfo
    .action.viewgroup
    .action.editgroup
    .action.deletegroup
    .action.creategroup
    .action.workflow
    .action.login
    .action.logout

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-18) was last changed on 20-Jul-2008 14:56 by DirkFrederickx