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

Having trouble installing Oxygen XML WebHelp? Got a bug to report? Post it all here.
Posts: 908
Joined: Thu May 02, 2019 2:32 pm

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

Post by chrispitude »

Hi everyone,

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

image.png (58.96 KiB) Viewed 1213 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:
(43.22 KiB) Downloaded 142 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.