DITA WebHelp - custom text and footer on front-page

[sopuli]

Dear all,

For my WebHelp transformation, I adapted the oXygen "light" template (tiles look) via CSS and parameters as much as possible. It's looking good, but there are a few open issues which I would like to solve (I am sure they are solvable ):
-> For your answers, please bear in mind that I have no coding skills and that I have worked my way through all the customizations using the help pages and ChatGPT and trial&error with the CSS code.

1 - How can I add custom text into the tiles on the front-page? I managed to a add a symbol next to the title in the tiles, but I would like to add an explanatory phrase

Code: Select all

.wh_tile_title a::after {
  content: "→";              /* Unicode arrow*/
  font-size: 0.9em;
  color: rgb(11,88,148);
  margin-left: 0.4em;        
  vertical-align: middle;    
  font-weight: normal;
}

2 - I need a custom footer with clickable links. I managed to block the oxygen footer and show my custom footer. But how can I show 3 different items with external links in my custom footer? I need the copyright note and clickable links to our data protection and contact pages.

Code: Select all

/* do not show oxygen footer */
.footer-container.mx-auto {
  display: none !important;
}

/* show custom footer */
body::after {
  content: "© 2025 xyz – www.xyz.com";
  display: block;
  text-align: center;
  color: white;
  background-color: rgb(122,165,210);
  font-size: 0.9em;
  padding: 1em 0;
}

3. I need a small text box between the page title and the search field. How can I manage to add this?

Thank you so much for your ideas.

Best
Herdis

[julien_lacour]

Hello Herdis,

Sure your issues are solvable, here are the answers to your questions:

1. A simple way to add content into tiles is to use DITA <shortdesc> element: all content from the chapters short description is by default copied under the title.
2. To customize WebHelp footer you can use a custom HTML fragment, all the detailed information is available in our user guide.
3. As for the previous point, you can add a custom HTML fragment after the search input, you can for example use the webhelp.fragment.before.main.content.area.topic.page placeholder, the fragment will be displayed just before the topic title.
   For more information about HTML Fragments please check this topic. The list of topic page placeholders can be found here.

Regards,
Julien

[sopuli]

Dear Julien,
everything worked just like you described it. Thank you very much for your help!

Best
Herdis