Topbar and/or Sidebar

The skin supports different layouts, enabling/disabling the left sidebar menu and the topbar menu. Users have just play with flags in the custom.fluidoSkin element in site.xml:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <sideBarEnabled>false</sideBarEnabled>
    </fluidoSkin>
  </custom>
  [...]
</site>

That allows users having 4 skins in only 1!

1. sidebar only;
2. topbar only;
3. both side/top bars;
4. none at all.

Default skin setting is the option 1.

Topbar Icon

When users decide to enable the topbar, they can plug a small icon/logo there (typically 108*20 px) just configuring the custom.fluidoSkin.topBarIcon element in site.xml:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <topBarIcon>
        <name>Maven Fluido Skin</name>
        <alt>Maven Fluido Skin</alt>
        <src>/images/topbar-logo.png</src>
        <href>/index.html</href>
      </topBarIcon>
    </fluidoSkin>
  </custom>
  [...]
</site>

Topbar Container Style

You can configure the style attribute value of the div container for your topbar

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <topBarContainerStyle>width: 90%;</topBarContainerStyle>
    </fluidoSkin>
  </custom>
  [...]
</site>

Navbar Style

You can configure style of your top bar nav (since bootstrap 2.1.0 is not anymore black by default). Use navbar-inverse to have the black one.

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <navBarStyle>navbar-inverse</navBarStyle>
    </fluidoSkin>
  </custom>
  [...]
</site>

Configuring column class

When using sidebar, the navigation column uses by default span2 class and body column uses span10. To prevent weird/ugly result, the sum must be 12. You can change that using:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <leftColumnClass>span3</leftColumnClass>
      <bodyColumnClass>span9</bodyColumnClass>
    </fluidoSkin>
  </custom>
  [...]
</site>

Matomo (e.g. Apache Analytics)

Users can optionally enable Matomo. How to configure it for Apache Analytics, the options element will contain some configuration (here some privacy setup):

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
      <matomo>
        <siteId>xxx</siteId>
        <url>https://analytics.apache.org</url>
        <options>
          <disableCookies/>
          <trackPageView/>
          <enableLinkTracking/>
        </options>
      </matomo>
  </custom>
  [...]
</site>

Google Analytics

Users can optionally enable Google Analytics for the generated site:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <googleAnalytics>
        <accountId>UA-12345...</accountId>
      </googleAnalytics>
    </fluidoSkin>
  </custom>
  [...]
</site>

By default, forceSSL and anonymizeIp are enabled. You can disable both, but this might be illegal in several countries or regions (e.g., in the EU due to GDPR):

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <googleAnalytics>
        <accountId>UA-12345...</accountId>
        <anonymizeIp>true/false</anonymizeIp>
        <forceSSL>true/false</forceSSL>
      </googleAnalytics>
    </fluidoSkin>
  </custom>
  [...]
</site>

Google Search

Users can optionally enable the Google Search for the generated site, requirements are:

• the project.url property in pom.xml, unless the custom.fluidoSkin.googleSearch.sitesearch property is set in the site.xml:

  <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
    [...]
    <url>http://maven.apache.org/skins/maven-fluido-skin</url>
    [...]
  </site>
  

• the custom.fluidoSkin.googleSearch element in site.xml:

  <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
    [...]
    <custom>
      <fluidoSkin>
        <googleSearch>
          <sitesearch/>
        </googleSearch>
      </fluidoSkin>
    </custom>
    [...]
  </site>
  

By default, the search form:

• is not enabled; adding custom.fluidoSkin.googleSearch is enough to enable the searchbox.
• is rendered in the sidebar, if the topbar only is available it will be rendered there.

External links are either rendered in the sidebar or the topbar. When both sidebar and topbar are enabled, they are rendered as dropdown in the topbar only.

Source code line numbers

Source code sections are enhanced by Google Code Prettify, users can optionally enable line numbers rendering (disabled by default):

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <sourceLineNumbersEnabled>true</sourceLineNumbersEnabled>
    </fluidoSkin>
  </custom>
  [...]
</site>

Copyright class

Since version 1.3.1, you can configure a copyright class:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <copyrightClass>pull-right</copyrightClass>
    </fluidoSkin>
  </custom>
  [...]
</site>

head/footer placeholders

This skin will pass your custom head/footer to $render.eval() and replace all variables known to the Velocity context.

GitHub Ribbons

Since version 1.11.1, fluido-skin supports GitHub ribbons to simplify the Fork me on GitHub banner integration. Users must define:

• custom.fluidoSkin.gitHub.projectId: required, the project id on GitHub and will be used to build the project page URL;
• custom.fluidoSkin.gitHub.ribbonOrientation: optional, the ribbon position, left-top> (left)/right-top (right)/left-bottom/right-bottom are accepted only (left-top by default);
• custom.fluidoSkin.gitHub.ribbonColor: optional, the ribbon color, red/green/black/darkblue/orange/gray are accepted only (red by default).

  <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
    [...]
    <custom>
      <fluidoSkin>
        <gitHub>
          <projectId>apache/maven-skins</projectId>
          <ribbonOrientation>right</ribbonOrientation>
          <ribbonColor>black</ribbonColor>
        </gitHub>
      </fluidoSkin>
    </custom>
    [...]
  </site>
  

Project profile

As shown in MojoHaus Maven plugins list, plugins life-cycle are characterized by different status/stages:

• Production
• Pre-release
• Sandbox
• Graveyard (retired projects)

  Users can configure different backgrounds depending on the project status (except the production) to warrant users they are not using a production ready software:

  <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
    [...]
    <custom>
      <fluidoSkin>
        <profile>(pre-release|sandbox|retired)</profile>
      </fluidoSkin>
    </custom>
    [...]
  </site>
  

Twitter follow button

Since version 1.1, fluido-skin supports the Twitter follow button to simplify its integration. Users must define:

• custom.fluidoSkin.twitter.user: required, it is the Twitter id to suggest to follow;
• custom.fluidoSkin.twitter.showUser: optional, flag to mark the user has to be shown (false by default);
• custom.fluidoSkin.twitter.showFollowers: optional, flag to mark the followers ribbon has to be shown (false by default).

  <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
    [...]
    <custom>
      <fluidoSkin>
        <twitter>
          <user>simonetripodi</user>
          <showUser>true</showUser>
          <showFollowers>true</showFollowers>
        </twitter>
      </fluidoSkin>
    </custom>
    [...]
  </site>
  

  By default, it is rendered in the sidebar, if the topbar only is available it will be rendered there.

Facebook like button

Since version 1.2, fluido-skin supports the Facebook like integration. Users can define similar option to Facebook SDK:

• custom.fluidoSkin.facebookLike.recommend: optional, if set to true Recommend button will be rendered instead of Like
• custom.fluidoSkin.facebookLike.shareButton: optional, if set to true Share Button will be included.
• custom.fluidoSkin.facebookLike.layout: optional facebook layout, Can be one of:
  • standard
  • button_count: default if sidebar is not enabled
  • button
  • box_count: default if sidebar is enabled

    <site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
      [...]
      <custom>
        <fluidoSkin>
          <facebookLike>
            <recommend>true/false</recommend>
            <shareButton>true/false</shareButton>
            <layout>box_count</layout>
          </facebookLike>
        </fluidoSkin>
      </custom>
      [...]
    </site>
    

  By default, it is rendered in the sidebar, if the topbar only is available it will be rendered there.

  Note in order the Facebook like button appears, ${project.url} property must be set in the pom.xml!

Flattr button

As of version 2.0.0-M9, support for Flattr buttons in fluido-skin has been removed.

AnchorJS

You can optionally enable anchor ID generation with AnchorJS:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <anchorJs />
    </fluidoSkin>
  </custom>
  [...]
</site>

Note that the generated IDs are not compatible with IDs generated by the underlying Doxia framework.

Additionally you can provide a CSS selector for the add() function and options:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <anchorJs>
        <cssSelector>h1, h2, h3, h4, h5</cssSelector>
        <options>
          <class>.anchor</class>
          <titleText>foo</titleText>
        </options>
      </anchorJs>
    </fluidoSkin>
  </custom>
  [...]
</site>

Skip generation date

Since version 1.3.1, you can skip generation date from the line "Generated by Apache Maven Doxia at <date>" to enable it:

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <skipGenerationDate>true</skipGenerationDate>
    </fluidoSkin>
  </custom>
  [...]
</site>

Breadcrumb Divider

Since version 1.3.1, you can configure the breadcrumb divider (default is a slash):

<site xmlns="http://maven.apache.org/SITE/2.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SITE/2.0.0 https://maven.apache.org/xsd/site-2.0.0.xsd">
  [...]
  <custom>
    <fluidoSkin>
      <breadcrumbDivider>»</breadcrumbDivider>
    </fluidoSkin>
  </custom>
  [...]
</site>