!!!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|JSPWikiSkinDesign].


%%tabbedAccordion
%%tab-Wikibody
!! Wikibody

The ''wikibody'' is the top-most block containing
the [header|JSPWikiStylesheetDesign#Header],
[content|JSPWikiStylesheetDesign#Content] and
and [footer|JSPWikiStylesheetDesign#Footer].
The ''content'' block acts as a container for [page|JSPWikiStylesheetDesign#Page] and [favorites|JSPWikiStylesheetDesign#Favorites] (with ~LeftMenu and ~LeftMenuFooter).
The ''page'' contains the  [pageactions|JSPWikiStylesheetDesign#Pageactions]  at the top and bottom of the page,
the actual [page content and attachments|JSPWikiStylesheetDesign#Page]
and the [favorites|JSPWikiStylesheetDesign#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)

%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; border:2px solid #bbb; margin:2em;) 
%%(padding:0 2px; color:black; position:relative; margin:4px; )
%%(padding:0 2px; color:black; background:#bbb; line-height:1.5em; margin: 0 0 4px 0; )
header header
/%
%%(background:#fff7c0; )
%%(float:right; width:80%;)
%%(float:right; padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; )
page-actions-top
/%
%%(padding:0 2px; color:black; line-height:1.5em; )
TAB1 TAB2
/%
%%(padding:0 2px; color:black; background:#ffff80; )
page page page page\\page page page page\\page page page page\\page page page page\\page page page page
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; margin-top:4px; clear:both; float:right;)
page-actions-bottom
/%
/%
%%(float:left; width:18%; padding:0 2px; color:blue; background:#e0e0ff; )
favorites\\favorites\\favorites
/%
%%(padding:0 2px; color:black; clear:both; )
/%
/%
%%(padding:0 2px; color:black; background:#bbb; margin:4px 0 0 0; text-align:center; clear:both; )
footer footer
/%
/%
/%

%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; border:2px solid #bbb; margin:2em;) 
%%(padding:0 2px; color:black; position:relative; margin:4px; )
%%(padding:0 2px; color:black; background:#bbb; line-height:1.5em; margin: 0 0 4px 0; )
header header
/%
%%(background:#fff7c0; )
%%(float:left; width:80%;)
%%(float:right; padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; )
page-actions-top
/%
%%(padding:0 2px; color:black; line-height:1.5em; )
TAB1 TAB2
/%
%%(padding:0 2px; color:black; background:#ffff80; )
page page page page\\page page page page\\page page page page\\page page page page\\page page page page
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; margin-top:4px; clear:both; float:right;)
page-actions-bottom
/%
/%
%%(float:right; width:18%; padding:0 2px; color:blue; background:#e0e0ff;)
favorites\\favorites\\favorites
/%
%%(padding:0 2px; color:black; clear:both; )
/%
/%
%%(padding:0 2px; color:black; background:#bbb; margin:4px 0 0 0; text-align:center; clear:both; )
footer footer
/%
/%
/%

Following example has its ''favorites'' taken out of the regular flow, with a ''position:absolute''.
%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; border:2px solid #bbb; margin:2em; position:relative;) 
%%(padding:0 2px; color:black; position:relative; margin:4px; )
%%(padding:0 2px; color:black; background:#bbb; line-height:1.5em; margin: 0 0 4px 20%;  )
header header
/%
%%(background:#fff7c0; float:right; width:80%;)
%%()
%%(float:right; padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; )
page-actions-top
/%
%%(padding:0 2px; color:black; line-height:1.5em; )
TAB1 TAB2
/%
%%(padding:0 2px; color:black; background:#ffff80; )
page page page page\\page page page page\\page page page page\\page page page page\\page page page page
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; margin-top:4px; clear:both; float:right;)
page-actions-bottom
/%
/%
%%(top:0; left:0; width:18%; padding:0 2px; color:blue; background:#e0e0ff; position:absolute;)
favorites\\favorites\\favorites
/%
%%(padding:0 2px; color:black; clear:both; )
/%
/%
%%(padding:0 2px; color:black; background:#bbb; margin:4px 0 0 20%; text-align:center; clear:both; )
footer footer
/%
/%
/%


/%
%%tab-Header
!! 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.

%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; border:2px solid #bbb; margin:2em; position:relative;) 
%%(padding:0 2px; color:black; margin:0 0 4px 20%; )
%%(padding:0 2px; color:black; position:absolute; left:2px; )
app-logo
/%
%%(padding:0 2px; color:black; display:none; )
org-logo
/%
%%(padding:0 2px; color:black; font-size:150%; line-height:150%; background:#e0e0ff; float: left; )
pagename
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; position:absolute; right:0; )
search-box
/%
%%(padding:0 2px; color:black; background:#ffff80; clear:both; )
bread-crumbs
/%
/%
/%


%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; margin-left:2em; border:2px solid #bbb; ) 
%%(padding:0 2px; color:black; position:relative; margin:0 0 4px 0; )
%%(padding:0 2px; color:black; float:left; )
app-logo
/%
%%(padding:0 2px; color:black; float:right; )
org-logo
/%
%%(padding:0 2px; color:black; font-size:150%; line-height:150%; background:#e0e0ff; float: left; clear:both;)
pagename
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; position:absolute; right:0; )
search-box
/%
%%(padding:0 2px; color:black; background:#ffff80; clear:both; )
bread-crumbs
/%
%%(padding:0 2px; color:black; clear:both;) 
/%
/%
/%

/%
%%tab-Favorites
!! 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.

%%(padding:2px; color:black; background:#eee; font-size:9px; width:10%; margin-left:2em; border:2px solid #bbb; ) 
%%(padding:0 2px; color:black; position:relative; nowrap:nowrap; overflow:hidden; )
%%(padding:0 2px; color:blue; background:#e0e0ff; )
username
/%
%%(margin:2px 0; padding:0 2px; color:black; background:#ffff80; )
user-favs\\user-favs\\user-favs
/%
%%(margin:2px 0; padding:0 2px; color:black; background:#ffff80; )
leftmenu\\leftmenu\\leftmenu\\leftmenu
/%
%%(margin:2px 0; padding:0 2px; color:black; background:#ffff80;; )
leftmenufooter\\leftmenufooter
/%
%%(padding:0 2px; color:black; background:#bbb; text-align:center; )
wikiversion
/%
%%(padding:0 2px; color:black; background:#bbb; text-align:center; )
rss-image
/%
/%
/%

/%
%%tab-Page
!! 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.
%%(padding:2px; color:black; background:#eee; font-size:9px; width:50%; border:2px solid #bbb; margin:2em;) 
%%(float:right; padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; )
page-actions-top
/%
%%(padding:0 2px; color:black; line-height:1.5em; )
TAB1 TAB2
/%
%%(padding:0 2px; color:black; background:#ffff80; )
page page page page\\page page page page\\page page page page\\page page page page\\page page page page
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; text-align:right; line-height:1.5em; margin-top:4px; clear:both; float:right;)
page-actions-bottom
/%
%%(clear:both;)
/%
/%

/%
%%tab-PageActions
!! 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
}}}

/%
%%tab-Footer
!! Footer

The ''wikibody/footer'' is similar to [header|JSPWikiStylesheetDesign#header]: it contains the application and company logo's, 
the release and application name, and when the rssfeed is activate the JSPWiki RSS-feed link.
If present, the [CopyrightNotice] is included as well.
{{{
<div id="footer" >
  <div class="applicationlogo"> ... </div>  <!-- links to the front-page of this wiki -->
  <div class="companylogo"> ....... </div>
  <div id="copyright"> ............ </div>  <!-- include CopyrightNotice -->
  <div class="wikiversion"> ....... </div>
  <div class="rssfeed"> ........... </div>
</div>
}}}

Here is possible examples of possible ''footer'' layout.

%%(padding:0 2px; color:black; background:#eee; font-size:9px; width:50%; margin-left:2em; border:2px solid #bbb; ) 
%%(padding:0 2px; color:black; position:relative; margin:2px; )
%%(padding:0 2px; color:black; float:left; )
app-logo
/%
%%(padding:0 2px; color:black; float:right; )
org-logo
/%
%%(padding:0 2px; color:black; background:#ffff80; clear:both; text-align:center; )
copyright copyright copyright copyright
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; float:right; clear:both; )
wikiversion
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; float:right; )
rssfeed
/%
%%(clear:both;)
/%
/%
/%


%%(padding:0 2px; color:black; background:#eee; font-size:9px; width:50%; margin-left:2em; border:2px solid #bbb; ) 
%%(padding:0 2px; color:black; margin:0 0 4px 0; )
%%(padding:0 2px; color:black; display:none; )
app-logo
/%
%%(padding:0 2px; color:black; display:none; )
org-logo
/%
%%(padding:0 2px; color:black; background:#ffff80; line-height:1.5;)
copyright copyright copyright copyright
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; float:left;  line-height:1.5;)
wikiversion
/%
%%(padding:0 2px; color:blue; background:#e0e0ff; float:right;  line-height:1.5;)
rssfeed
/%
%%(clear:both;)
/%
/%
/%


/%
/%