00:00:06The purpose of this video is to introduce you to
the Oxygen Styles Basket, a handy web-based tool
00:00:13that helps you to customize the visual aspects
of both PDF and WebHelp output by creating a
00:00:18publishing template based on CSS rules that
are defined using the Styles Basket interface.
00:00:24The interface is divided into four
sections, branding, PDF-specific galleries,
00:00:31WebHelp-specific galleries, and common
galleries for content styling.
00:00:36To get you familiar with the Oxygen Styles Basket,
I’ll use it to define a customization for both PDF
00:00:43and WebHelp output and throughout the
video, you’ll see just a small portion
00:00:47of the virtually limitless customization
possibilities you have at your disposal.
00:00:54I’ll start in the Branding section where I can
define colors, fonts, and logos.
00:01:00 I could define my own custom color or font scheme or I can select one of the presets. I’ll choose the light preset color scheme
00:01:10 … note that the selected branding
Color scheme will be applied on other galleries as well...
00:01:18then I’ll choose the Roboto Open
Sans preset for the font scheme.
00:01:27Now I’ll go to the PDF section.
00:01:30 Here, I have access to numerous
galleries that are specific to PDF output.
00:01:37Notice that whenever I make a change, the Preview
area is updated to show a representation of how my
00:01:43change will look in the output. Next I’ll choose
a color scheme for the cover page title.
00:01:53For the header, I can specify what type of
information is shown in the header of the
00:01:59PDF publication. For example, I choose to show
the publication title in the left side pages ...
00:02:07and the chapter title in the right side pages.
00:02:12and I can make similar choices for the footer.
By the way, you can see that the interface is
00:02:17quite intuitive and self-explanatory, but I will
continue to define various aspects so that you can
00:02:23see the vast amount of customization possibilities
that are available in the various galleries.
00:02:31Now I’ll go to the WebHelp section.
Similar to the previous one,
00:02:36this section has numerous galleries, this
time specific to WebHelp output. For example,
00:02:42I can choose a color scheme for the tiles and
links on the main page of the WebHelp output.
00:02:50then I’ll define the color scheme
for the breadcrumb component …
00:02:59and some other aspects for
the topic table of contents …
00:03:05and the main publication table of contents
00:03:09I’ll also choose a matching color
scheme for the menu component.
00:03:25The content styling section has a
myriad of options for customizing
00:03:29various aspects that will be reflected
in both PDF and WebHelp output.
00:03:34For example, I’ll change the layout
for tables to have no lateral borders …
00:03:44and I’ll choose some colors and styles
for hazard statements and notes.
00:04:08Another thing to mention … notice that a
checkmark icon is displayed in the left
00:04:13side pane next to any of the categories where
I have made a change.
00:04:17This helps you to keep track of which aspects have been customized.
To preview all of my changes, I can click the
00:04:23“See Results” button on the top header stripe
and choose either PDF or WebHelp and it will
00:04:29generate a preview of the content so that I
can visualize the effects of my changes.
00:04:36Once I’m finished with my customization,
I can download the result as a publishing
00:04:41template … note that I could have chosen
to download it as a CSS file instead.
00:04:48Then, I can use it in my
transformation directly in Oxygen.
00:04:53I’ll configure a DITA Map to WebHelp Responsive
ransformation scenario and I’ll choose the
00:04:59custom publishing template option and select the
publishing template package that I downloaded.
00:05:07Then I’ll do the same for the
DITA Map to PDF transformation,
00:05:12again referencing my
downloaded template package.
00:05:17I can even run both transformations at once … and
the results of my customizations using the Oxygen
00:05:25Styles Basket is reflected in the output, in both
the PDF version and in the WebHelp version.
00:05:39For more advanced customizations, we recommend
that you unzip the publishing template file, then
00:05:45create a new CSS that imports the one generated
by the styles basket, and then add your own rules.
00:05:52To find out more about advanced customizations,
see the Oxygen Publishing Engine documentation.
00:05:59This concludes the video demonstration. We hope
you find the Oxygen Styles Basket to be a helpful
00:06:04part of your publishing process.
00:06:07Thank you for watching.