Haddock features a clean, modern look and feel which builds upon the Bootstrap framework. It has a responsive design, allowing wiki pages to render well on a variety of devices and window or screen sizes. The template supports many new styles, including video viewers, a new slimbox, a carousel viewer, support for adding inline css, and much more. It also comes with a new plain and a wysiwyg editor.
The template JSP's and other assets are located in <your wiki url>/templates/haddock.
To activate the haddock template, add this to your jspwiki-custom.properties file:
jspwiki.templateDir = haddock
- The styling of all JSP's is based on CSS, instead of html tables and tabs. CSS3 is used for basic animations.
- The stylesheet is build on the foundation of the BOOTSTRAP 3.0 CSS Framework. This improves cross-browser compatibility, responsiveness of the design on various platforms, and provides many reusable css building blocks. (see Haddock Styles) Bootstrap is released under the Apache 2 license.
- The quick search and navigation menu is redesigned to make it easier to create new pages or clone existing pages.
- The sidebar, aka LeftMenu, has become collapsible. You can toggle it to full screen to view or edit pages.
- Haddock supports both a fluid and a fixed-width layout, which can be toggled via the UserPreferences.
- The menubar remains always on top for quick access to the key actions of the page.
- The attachment upload UI has been redesigned: you can upload multiple files in one go; and use drag & drop if your browser supports it.
- The styling of weblogs has been improved as well.
A new plain editor UI#
See Haddock Editor
- Live Preview will immediately render the page while editing. The preview area can be displayed side-by-side next to the main editor area.
- The sidebar is by default collapsed in Edit mode.
- Suggestion popup dialogs provide assistance while entering wiki markup. Help is available for links, plugins, images, ACLs, %%styles, colors, fonts, symbols, but can easily be extended.
- All icons (eg editor toolbar) are now based on Font Awesome by Dave Gandy, replacing the FamFamFam icon set. See Icon Style
- Other features: section editing (zoom in a partical page section during edit), Find & Replace UI, tab completion with snippets (press the TAB key to complete shortcut commands), smart typing pairs, and more.
- The Haddock Template comes with a light-weight WYSIWYG editor installed.
- You can add your own WYSIWYG editor to JSPWiki. Hooks are already provided for TinyMCE and CKeditor.
- WYSIWYG editors also support LivePreview.
- You can switch between the available editors from the UserPreferences as well as from the Edit view.
See Haddock Styles for more details.
- All dynamic styles adopt the Bootstrap look and feel.
- The markup for Tabbed Sections has been simplified, while maintaining backwards compatibility with previous markup.
- GraphBars have been extended to provide more display options and colors
- Prettified code-blocks now also display line-numbers
- Table styles have been improved (%%table-filter, %%sortable) and more Bootstrap table styles are available.
- Embedding video, or other media has become much easier. The new %%viewer style allows to embed video (like YouTube, and other formats), wiki-pages or external web-content directly into a wikipage. %%slimbox now supports those same media formats. A %%carousel style is added with an auto-rotating viewer.
- The %%add-css style brings the full power of CSS and CSS3 to your wikipages.
The Raw view or Raw: interwiki link will display the raw page markup.
The Reader view or Reader: interwiki link (also accessible via the More... menu) will view the page with no clutter : no header (only the pagename), no footer, no sidebar and no menu-bars. This is great view for printing. When in Reader view, clicking the page name on top of the screen will get you back to the default page view.
[Raw:Haddock Template] => raw wiki markup [Reader:Haddock Template] => Reader view
- LoginHelp : add a help button to the login, lost-password and register page
- EditPageHelp : add a help button to the Edit page.
- SearchPageHelp : add a help button to the Search page
- TitleBox : add an alert message above the page header, which can be used as temporary web-site banner with news flash
- MoreMenu : extend the standard More... dropdown with your own links.
- Use * [some link] to add additional menu entries.
- Use * ---- to add a menu separator line
- HomeMenu : add a dropdown menu below the logo, which can be used for showing key general info of the site, system info, etc. Use the same formatting rules as for the MoreMenu.
- CopyrightNotice : add it to the page footer
- SessionExpired : this page is shown after an inactive edit session timeout. The timeout value is configured in the web.xml file <session-timeout>60</session-timeout> )
Under the hood#
- The JS still runs on top of the mootools JS library.
- With the new modularized design, it is easy to write your own dynamic styles.
See How To Add a Dynamic Style to the Haddock Template
- The monolithic jspwiki.css file has been broken up into many small Less files; many which are reused from the BOOTSTRAP framework.
- Less is a CSS pre-processor, extending the CSS language with variables, mixins, functions, etc. This makes the jspwiki stylesheets more maintainable, and extendable.
- At build time, the LESS pre-processor and CSS minimizer are run via the wro4j framework.
How to extend the Haddock Template#
- Category.Haddock Behavior
- How to change the site logo
- How To Add a Behavior to the Haddock Template
- How To Add CKEditor 4.0 to the Haddock Template
- How To Add TinyMCE to the Haddock Template