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

Having trouble installing Oxygen XML WebHelp? Got a bug to report? Post it all here.
chrispitude
Posts: 922
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

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

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.
You do not have the required permissions to view the files attached to this post.