The Haddock Template stylesheets are build on the foundation of the BOOTSTRAP 3.0 CSS Framework. You can change almost anything about the layout and the look&feel of your wiki site.

This page explains the key components of the new structure of the modularised stylesheets. More details can be found in the embedded documentation in the stylesheet files. See the DEVELOPMENT tab where to find the stylesheet files.

See also Haddock Template, Haddock Styles, Haddock Styles Test page

Container#

All starts with a (Bootstrap) container element at the top of the DOM to wrap the site contents:

  • Use .container for a responsive fixed width container.
  • Use .container-fluid for a full width container, spanning the entire width of your viewport.
Additionally, you can choose the overall screen layout:
  • Use .fav-left for the sidebar / content layout
  • Use .fav-right for the content / sidebar layout
  • Use .fav-hidden to hide the sidebar
The container css classes are set via the UserPreferences.
The body element is decorated with the CheckRequestContextTag class.
The TitleBox alert will be added when it has content to be displayed. (non-empty)

body.context-[view|edit|info|..]
    div[.container|.container-fluid][.fav-left|.fav-right|.fav-hidden]
        div.titlebox.alert (optional)
        div.header
            div.navigation                            
        div.content[.active]            
            div.page
                div.page-content
                div.page-footer.visible-print
            div.sidebar
        div.footer
[class^=ex]{ display:block; margin-bottom:.25em; border-radius:.25em;} .ex-container > * { margin:0 auto .25em; min-width:12em; max-width:20em; } .ex-container-fluid > * { margin:0 0 .25em; } .ex-header, .ex-footer { height:3em; padding:0 !important; background: CornflowerBlue; } .ex-navigation { position:relative; top:2em; height:1em; background:rgba(255,255,255,.15); } .ex-content > * { transition: all 0.3s; } .ex-page { height:8em; background: silver; float:right;width:78%;} .ex-sidebar { height:8em; background: darkkhaki; float:left; width:21%;} .ex-footer { clear:both; } .fav-right .ex-page { float:left;width:78%;} .fav-right .ex-sidebar { float:right; width:21%;} .ex-content:hover .ex-page { width:100%;} .ex-content:hover .ex-sidebar{ width:0;}

.container.fav-left


.container-fluid.fav-right

Header#

The .header block contains a topline with the quick navigation bar, the userbox with login/logout and user preference buttons and the apache jspωiki logo. The .breadcrumbs are only shown when you hover the mouse over the header.

div.header
    div.topline
        div.pull-left
            a.logo.href jspωiki  //link to the home page of this wiki
        div.userbox.pull-right.user-authenticated
        form.searchbox.pull-right
    div.pagename
    div.breadcrumbs
    div.navigation

Userbox#

div.userbox.pull-right.user-[anonymous|asserted|authenticated]
    div.btn
        span.icon-user
        span.caret
    ul.dropdown-menu[data-hover-parent="userbox"]
        li
              label.username.anonymous|asserted|authenticated
          li
            a.btn.btn-link.login|logout  Log-in
            a.btn.btn-link.prefs  Prefs

The Searchbox contains the quick search pull-down menu. As you enter the quick search input field, an ajax lookup is done on matching wiki-pages. If no exact match is found, buttons are shown for creating or cloning new wiki-pages. The content of the dropdown menu is created on the fly by javascript.

form#searchform.searchbox.pull-right.form-inline
    input#query.form-control[type="text"][placeholder="to search, type ahead"]

    ul.dropdown-menu.pull-right[data-hover-parent="searchbox"]
        li.dropdown-header
            button#searchSubmit.btn[type="submit"] For full search, hit enter ...
    li.findpages ...create & clone buttons
    li.findpages ...<quick search results>
    li.divider
    li.recents ...
    li.recents.clear ...

Menu bar#

The last element of the header is the menu bar. A special item is the more menu which contains a number of predefined entries and the content of the MoreMenu.

div.navigation
    ul.nav.nav-pills.pull-left
    li#menu   ☰

    ul.nav.nav-pills.pull-right
        li#attach
        li#info
        li#edit[.disabled]
        li#more
            More
            span.caret
            ul.dropdown-menu.pull-right data-hover-parent="li"
            ...    

Content#

The .content act as a container for the collapsible sidebar. The .active class is present when the sidebar is visible; it can be toggled with the ☰ menu toggle button of the menu bar. Note how the .page comes before the .sidebar in the DOM, to allow faster rendering of the page-content.

div.content[.active] data-toggle="li#menu, .sidebar > .close"
    div.page
        div.page-content
        div.page-footer
    div.sidebar

Sidebar#

The .sidebar contains the LeftMenu and LeftMenuFooter pages.

div.sidebar
    div.leftmenu
        [{InsertPage page='LeftMenu' }]
    div.leftmenufooter
        [{InsertPage page='LeftMenuFooter' }]

The link to [<username>Favorites] when you are authenticated has been removed from the static sidebar JSP. If you want you can still add it to your LeftMenu. Here is an example how to do that.

EG: when user Alex logs in, the page with the name AlexFavorites will be inserted in the sidebar.

[{If page='{$username}Favorites' exists='true'

! [ {$username} Favorites | {$username}Favorites]
[{InsertPage page='{$username}Favorites' }]
}]

The .footer content includes the CopyrightNotice page.

div.footer
    [{InsertPage page='CopyrightNotice' }]
    div.wikiversion <JSPWiki version-number>
    a.feed

Niñjas#

The monolithic CSS file has been replaced by many small Less files; many of which are reused from the BOOTSTRAP framework. Check out build.less to see which components from BOOTSTRAP are reused, which are modified and which JSPWiki specific components have been added.

/jspwiki-war
  • /src
    • /main
      • /config
        • /wro
          • wro.properties build information for JS and CSS
      • /scripts all js files
      • /styles
        • /haddock
          • /bootstrap bootstrap library of .less files
            • bootstrap.less
          • /default haddock .less files
            • build.less master build file
            • style.less general style elements (links, ...)
            • variables.less includes colors, border-styles,...
          • /fontjspwiki
      • /webapp all JSP files, including all static TEMPLATE JSP files

At build time, the LESS pre-processor and CSS minimizer of the wro4j framework will merge all files into final haddock.css file.

/templates
  • /default
  • /haddock
    • haddock.css