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!