All styling of the Haddock Template is done through CSS.
This means that it is If you are familiar with CSS to change almost anything on the template by using an %%add-css style.

How to replace the site logo, with a company logo.#

If you want to put another logo on your site, all you need to change is the style of the a.logo element. This element is located in the header of the page.

In this example, we are changing the default top left corner logo with the logo of the CleanBlue skin.

Step1: remove the default jspwiki logo.#

%%add-css
/* hide the default jspwiki logo */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }
/%

Note: in this particular example, the background style could have been omitted, as it is overwritten in Step-2.

Step 2: add the new logo#

Add the CleanBlue logo background image, and put it inside a rounded box.

%%add-css
/*hide the default jspwiki logo */
a.logo { border:none; text-indent:-99em;}
a.logo b:before { content:""; }

/* put the clean-blue logo, attached to this page */
a.logo {
    background: url([logo-hi.png]);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 180px; 

    /* add a fancy button like effect */
    box-shadow:0 0 .25em white;
    border-radius:2em;
    background-color: rgba(255,255,255,0.15);
}
/%

Keep in mind that in the background-image: url([logo-hi.png]); line of code, logo-hi.png is an image attached to your page as explained on the Add CSS Style page.

Step-3: deploy #

If you are happy with the style changes you've made, you can make them available to the rest of the site.

Adding styles to the LeftMenu

When using %%add-css in the LeftMenu page, the styles will be inserted in the sidebar; and become effective to all page views of your site.
(You do protect your LeftMenu with [{ALLOW edit Admin}], do you ? )

Adding styles to your personal favorites page

When using %%add-css inside your [<username>Favorites] page, the additional styles will become available as soon as you are authenticated. (logged in)
Note: when you are logged in as Alice, the page [AliceFavorites] is automatically inserted in the sidebar.

Voilà, that's all there is to it !

One more thing: favicons.#

The Favicon or Site Icon is the tiny image that appears next to your website title in the browser's tab.

This is default haddock favicon:

JSPWiki does not have a UI to change the favicon. Instead, the site Administrator can go to <jspwiki-root>/favicons and update its content, if needed. You can use an online service like https://realfavicongenerator.net/ to generate a set of favicon image files of different types and sizes, which can be dropped in the /favicons directory.

Following snippet from templates/haddock/commonheader.jsp shows you which favicon files are referenced by the Haddock Template.

<%-- Generated by https://realfavicongenerator.net/ --%>
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#da532c">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

---

Category.Add CSS Style