asciidocasciidoctorantora

Custom css with supplemental-ui in Antora does not work


According to UI-supplemental-files and Stackoverflow antora-top-navigation-bar-customization I replaced my top navigation (supplemental-ui/partials/header-content.hbs), but the same thing for CSS doesn't work as expected.

Here is my folder structure, my footer.css in which I try to change the background to #fff, and my antora playbook where I add the supplemental folder path:

enter image description here

Footer background does not change to white.

Any suggestions why exchanging the *.hbs files work but *.css does not?

Edit: This is my footer-content.hbs:

<footer class="footer">
  <p>This page was built using the Antora default UI.</p>
  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
</footer>


Solution

  • You should register your custom css file in 'head-styles.hbs' template.

        <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
        <link rel="stylesheet" href="{{{uiRootPath}}}/css/footer.css">