VideosCustomizing WebHelp Output Using the Skin Builder

Table of Contents
  • Introduction00:30
  • Customizing the WebHelp Output05:43
  • Inserting a Product Logo00:31
  • Export Settings from Skin Builder00:20
  • Apply Transformation Scenario01:15

Overview

Duration: 08:20
This video shows how to visually customize the look and feel of WebHelp output using the Skin Builder.

Transcript

00:00:09The WebHelp Skin Builder is a simple, easy-to-use tool, specially designed to assist users to
00:00:14visually customize the look and feel of the WebHelp output.
00:00:18It is implemented as an online tool hosted on the oXygen XML website and allows you to
00:00:24experiment with different styles and colors over a documentation sample.
00:00:29In our demonstration we will use one of the DITA Map samples that comes bundled with oXygen
00:00:36XML.
00:00:38We want to publish the project as an WebHelp output, but we want to customize a bit the
00:00:42way the output looks.
00:00:44We open the Configure Transformation Scenarios dialog from the DITA Maps Manager View since
00:00:49we want to apply the transformation scenario on the entire DITA Map.
00:00:53Oxygen provides three DitaMap webhelp scenarios but only two of them support skin customization...DITA
00:01:00Map WebHelp and DitaMap WebHelp with Feedback.
00:01:03We choose the DITA Map WebHelp transformation scenario.
00:01:11The Skins tab displays the available predefined customization skins, covering a wide range
00:01:17of chromatic themes, ranging from a very light one to a high-contrast variant.
00:01:25By default, the Oxygen skin is selected.... Note that the currently selected skin is highlighted
00:01:30in light blue. For our output, we prefer a lighter color
00:01:36scheme... The Light skin seems to be closer to what we are looking for... Let's see how
00:01:42it looks like applied over a documentation sample.
00:01:47Still, we want to customize the look of a couple of elements. To visually customize
00:01:57this skin, we'll use the WebHelp Skin Builder.
00:02:01Click Select skin, then Customize Skin shortcut to start the Skin Builder.
00:02:07The left side panel of the Skin Builder is divided into three functional sections:
00:02:15- Actions - with buttons for importing and exporting the skin;
00:02:19- Settings - containing the Highlight selection checkbox which helps you identify the areas
00:02:24affected by a particular element customization. - Customize - provides a series of customizable
00:02:32elements organized under four main categories: Header, TOC Area, Vertical Splitter and Content.
00:02:42Any alteration made in the customizable elements menu is applied in real time over the sample
00:02:48area.
00:02:49Next we'll start customizing some of the elements:
00:02:52First ... the header.
00:02:54We'll change the icons theme. From the header icons set drop down we choose the Default
00:03:01theme.
00:03:02Next, we'll show the navigation links labels and we'll go to the navigation links section.
00:03:10By default, all customizable elements display a single property, but we can make more properties
00:03:16visible if we click the + button and choose from the available ones.
00:03:22From the list we choose the Show/Hide item. Note that the property was added.
00:03:27From the display drop down we choose Initial and now the links labels are displayed.
00:03:33Note that a red border is displayed around the navigation links.
00:03:37This is because the Highlight selection option is on.
00:03:40Let's move on to the TOC area...
00:03:44We'll change the TOC Icons Set from the Dark color scheme to the Default blue ones.
00:03:51Next, let's take care of the Vertical Splitter bar.
00:03:56We want a much lighter color... so we set a white background color. Still... we're not
00:04:05happy with the vertical splitter look.... Probably it will look nicer if we hide the
00:04:10left border of the splitter.
00:04:12We uncheck the Highlight selection option because the highlight's red border interferes
00:04:17withe the splitter's border.
00:04:18We add the Border property and set the width value of the left border to zero.
00:04:27Now, moving on to the Content area.... We'll adjust the topic title padding... .We'll modify
00:04:42the bottom padding value to 11 pixels... Still... it does not look right. We use this button
00:04:51to revert the property to its initial value. Let's try with a value of 14 pixels. Now it
00:05:03looks ok...
00:05:09Next... let's change the background color of the CALS table . We like the background
00:05:18color of the Selected TOC element, so we'll use it for the table's background color too...
00:05:25We'll copy the color code...
00:05:43and paste it in the Table Background color picker.
00:05:49Now we'll also change the header's cell background color
00:06:05and then change the font color to white.
00:06:12At the end, all we need is a product logo inserted in the "upper left corner".
00:06:24The Add Logo action in the Header area allows us to do just that: add an URL to the logo
00:06:30file, and adjust the logo area width... and height. Note how the logo area dimensions
00:06:41are adjusted in real time.
00:06:49We are happy with the current form of the skin, so we export it. All properties and
00:06:54their values are exported as a single CSS file.
00:07:08Now we'll go back to oXygen, and in the transformation scenario we set the CSS file obtained earlier
00:07:14in the Custom section.
00:07:15Now we are ready to run the transformation scenario.
00:07:28All modifications we've made in the customization skin are reflected in the final output.
00:07:33As you have seen so far, even though the customization process involved a lot of CSS styling, using
00:07:39the WebHelp Skin Builder required no knowledge of the CSS language.
00:07:44All modifications were made in a visual environment, using an intuitive interface.
00:07:49Using the WebHelp Skin Builder requires: - an Internet connection with access to oXygen
00:07:54XML website. - a later version web browser
00:07:58In our demonstration we have applied the customized skin to a DITA Map source. However, you can
00:08:06also apply skins to DocBook to WebHelp transformation scenarios.
00:08:10For more information about this topic, please refer to the UserGuide.
00:08:12And this concludes our demonstration... Thanks for watching!

Use Oxygen Feedback to ask us anything about this video.

Products

Features

Shop

Resources

Support

Company

© 2002-2024 SyncRO Soft SRL. All rights reserved.

This website was created & generated with <oXygen/>®XML Editor