Responsive SVG backgrounds, SVG buttons, search/index in header

[chrispitude]

Hi everyone,

I wanted to share a WebHelp template project in case others find it useful:

image.png (58.96 KiB) Viewed 1446 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.

Here's the testcase:

webhelp_svg_backgrounds.zip

(43.22 KiB) Downloaded 168 times

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.