Responsive SVG backgrounds, SVG buttons, search/index in header
Posted: Thu Jun 23, 2022 7:01 pm
Hi everyone,
I wanted to share a WebHelp template project in case others find it useful:
It implements the following:
To publish it, publish the deliverable defined in the "project.xml" DITA-OT project file.
Please forgive the ugly colors, ugly header background, and ugly logo - I changed them from what my company is using. There are comments in the various files that provide more information on what each setting does.
I wanted to share a WebHelp template project in case others find it useful:
- image.png (58.96 KiB) Viewed 1642 times
It implements the following:
- The header background is an SVG that resizes responsively.
- Both the search bar and the book index buttons are moved to the header (accomplished using this template plus some additional XSLT).
- The footer contains multiple sections that are responsively arranged using CSS flexbox.
- The footer social media buttons use SVG-based images that are CSS-defined for efficiency.
To publish it, publish the deliverable defined in the "project.xml" DITA-OT project file.
Please forgive the ugly colors, ugly header background, and ugly logo - I changed them from what my company is using. There are comments in the various files that provide more information on what each setting does.