Haddock Stylesheet Design

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. (either as Administrator, or via %%add-css styles)

This page explains the key components of the HADDOCK Template HTML structure and which CSS 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

Container#

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

[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 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

Userbox#

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 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
  • div.btn
    • span.icon-user
    • span.caret
  • ul.dropdown-menu.pull-right[data-hover-parent=".searchbox"]
    • li.dropdown-header
      • input#query.form-control[type="text"][placeholder="To search, type ahead"]
    • li.dropdown-header
      • button#searchSubmit.btn[type="submit"] For full search, hit enter ...
    • li.findpages ...create & clone buttons
      • a.href
        • label.btn.btn-dange.pull-right[for=cloney] Clone this page
          • input#cloney[type=checkbox]
        • span.createpage <name of the page>
    • li.findpages ...as many as quick search results
    • li.divider
    • li.dropdown-header Recent Searches
    • li.recents ...list of recent searches
    • li.recents.clear Clear Recent Searches

Navigation bar#

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

Content#

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

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 footer includes the CopyrightNotice page, and shows the JSPWiki version your site is running. It also contains a link to the rss-feed of your site.

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

Other pages#

Attachement#

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

Info#

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



Group#







  

.feather {
 background-image:url(CopyrightNotice/feather-small.png);
 background-repeat:no-repeat;
 background-position:top;
 background-size:48px;
 text-align:center;
}




Copyright © 2024 The Apache Software Foundation, 

Licensed under the Apache License, Version 2.0.

Apache and the Apache feather logo are trademarks of The Apache Software Foundation.