The Haddock Template stylesheets are build on the foundation of the BOOTSTRAP 3.0 CSS FrameworkContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png. You can change almost anything about the layout and the look&feel of your wiki site. (either as Administrator, or via %%add-css styles)

This page explains the key components of the HADDOCK Template HTML structure and whichCSS classes it uses. More details can be found in the embedded documentation in the stylesheet files.

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

The body of the document contains one (Bootstrap) container element which wraps all the site contents. Via the UserPreferences you can modify some of the container classes:

  • width of the container: .container for a responsive fixed width, .container-fluid for a full width container, spanning the entire width of your viewport.
  • position of the sidebar: .fav-left, .fav-right or .fav-hidden

The body element is decorated with a context class. (eg context-view, context-edit, ...)

The TitleBox alert box will only 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.topline
      • div.pagename
      • div.navigation
    • div.content[.active]
      • div.page
        • div.page-content
        • div.page-footer.visible-print
      • div.sidebar
    • div.footer

.container.fav-left

.container-fluid.fav-right

The header contains a topline with logo and HomeMenu, the quick navigation bar, the userbox with login/logout and user preference buttons.

div.header
  • div.topline
    • div.pull-left
      • a.logo[href=link to the home page of this wiki] jspωiki
      • ul.dropdown-menu include HomeMenu
    • div.userbox.pull-right.user-authenticated
    • form.searchbox.pull-right
  • div.pagename
  • div.navigation

The userbox provides the controls to login/logout and set the user-preferences.

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 G'day <name>
    • li.divider
    • li.dropdown-header
      • a.btn.btn-link User Preferences
      • a.btn.btn-link.login|logout Log in
      • a.btn.btn-link.register Register a new user

The last element of the header is the Navigation 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 ☰ show/hide the sidebar
    • li#trail …▾
      • ul.dropdown-menu[data-hover-parent="li"] Breadcrumbs
  • ul.nav.nav-pills.pull-right
    • li#attach Attach
    • li#info Info▾
    • li#edit[.disabled] Edit
    • li#more More▾
      • ul.dropdown-menu.pull-right[data-hover-parent="li"] include MoreMenu

The content block act as a container for the main page content and the collapsible sidebar.

The .active class is present when the sidebar is visible; it can be toggled with the ☰ menu toggle button of the navigation bar. Note how the main page block comes before the sidebar in the DOM, to allow faster (first)) rendering of the page-content.

div.content(.active)[data-toggle="#menu"]
  • div.page
    • div.page-content
    • div.page-footer.visible-print
      This page (revision-108) was last changed on
      a[href=..Diff.jsp..] timestamp
      by
      a.wikipage user
      a.feed[href=..rss.jsp..]
      a.btn[href=#top] Top
  • div.sidebar

The sidebar includes the LeftMenu and LeftMenuFooter pages.

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

You can also include automatically your [<username>Favorites] page when authenticated by adding following wiki markup to your LeftMenu page. 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 monolithic CSS file has been replaced by many small LessContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png 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 frameworkContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png will merge all files into final haddock.css file.

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

div.page-content
    form.accordion-close.panel-group
        div.panel-heading 
            span.icon-paper-clip Add new attachment
        div
            div.panel-body
                dir.form-group   File Selection control
                dir.form-group   Change Note input control
                dir.form-group   UPLOAD button
            
    div.slimbox-attachments.table-filter-striped-sort-condensed    
        table
            tr
                th Attachment Name
                th Version
                th Date Modified
                th Size
                th Kind
                th Author
                th Actions
                th Change note
            tr    
                td.attach-name
                    a.attachment <attachement-name>
                    button.slimbox-btn 
                td  <row-nummer>
                td.nowrap[data-sortvalue="1392912030000"] 20-Feb-2014 17:00
                td.nowrap[title="7448 bytes"] 7 KB
                td.attach-type
                    span.icon-file-jpg-o jpg
                td
                    a.wikipage Authos
                td.nowrap
                    a.btn.btn-primary.btn-xs Info
                td.changenote

div.page-content
    div.form-frame
    ul.nav.nav-tab
    div.tabs.tab-content
        div.tab-History
            div.pagination
            div.table-filter-sort-condensed-striped
                table
            div.pagination
        div.tab-PageReferences
            table
                tr
                    th Incoming Links
                    th Outgoing Links
                tr
                    td
                    td
This particular version was published on 21-Jun-2018 19:53 by Dirk Frederickx.  Top