VideosIntroducing the New Oxygen Styles Basket


Duration: 06:12

This video provides a brief overview of the Oxygen Styles Basket, a web-based visual tool that helps you customize the look and style of your PDF or WebHelp output.


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.

Use Oxygen Feedback to ask us anything about this video.