DITA WebHelp - custom text and footer on front-page
Posted: Mon Nov 03, 2025 5:16 pm
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
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.
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
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;
}
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;
}
Thank you so much for your ideas.
Best
Herdis