Introduction to Frameless skin editor

In any web help output, such as, Responsive HTML5 or Frameless, you get an experience that closely mirrors any portal, and contains navigation, search, and other features. The output has a look and feel, which a user wants to customize according to corporate branding or other guidelines.

One such way to customize the output is by customizing the skin. Apart from defining the visual styling, the skin also sets the layout. For example, The Table of Contents can be a drop-down list instead of being just a tree-like structure.  Out of the box, RoboHelp comes with various skins. Using the skin editor, you can customize any skin as per your need.

You can see all the skins in your project from the Skins panel in the Output tab.

Double-clicking on any skin opens the skin editor. The responsive HTML5 skin editor is different than Frameless. 

Most skins have two kinds of pages, the home page, and the topic page. The home page has a hero image, search bar,  TOC tiles, and other optional content. The home page is optional, and some skins don't have it as part of the skin. The topic page contains the actual content, navigation, search, and other widgets. 

Live Preview

The skin editor has a live and interactive preview of sample content. Edits in the skin editor are immediately visible in the preview. You can toggle the preview in desktop or mobile view from the toolbar. 

The preview also has a helpful highlighter with a thick red border. If you select any class in the skin editor, the preview highlights that area. You can switch off the highlight from the toolbar.

How to customize your skin

The skin defines the output experience. The input comes from three different sources: 

 All strings come from the language-specific label file in the Output > Labels panel. The label file has strings for all the presets that you edit in the relevant sections.

The settings in the output preset enable you to display the home page, footer content, custom content on the home page, PDF download button, and so on.

The skin editor lets you decide if you want to make the skin responsive, or if you want to display the cookie acceptance dialog. This document covers the skin editor part of the customization. It will refer to the output preset and labels section as required.

General Settings

This section deals with some common properties and behavior of the skin. The styling of home and topic pages are covered in subsequent sections.

Responsiveness

All skins are responsive and adapt to desktop and mobile views based on the screen resolution. You can control the screen resolution at which the mode must switch from desktop to mobile. You can set the value in the field  Layout > General > Mobile Maximum Width. You can disable the responsiveness using the setting  Layout > General > Responsive. 

GDPR Compliance

General Data Protection Regulation (GDPR) mandates that services must take explicit permission of a user before saving in the browser local storage or cookies.  

You can enable this compliance using the setting Layout > General > GDPR Compliance. Some features like Favorites, TOC state, and Breadcrumbs may not work optimally without this acceptance. 

Theme Settings

The skin editor allows you common control for some aspects of the styling. You can use local overrides if needed. Use Layout > General > Layout Font to define the font family. Use Layout > General > Theme Color to set the color for text and icons.

The changes do not apply to icons and text, which do not follow the theme color. Use Layout > General> Search Highlight Text Color and Layout > General > Search Highlight Background Color to define the highlight color of the search keywords and the background colors. 

Accessibility

All skins are accessible. You can use a screen reader, keyboard shortcuts, and so on, for accessibility. While navigating using the keyboard, the area in focus gets highlighted with a border around it. 

You can control the border color using the setting Layout > General > Focus Outline Color.

User Assets

When you customize the skin, often you don't require any extra files. For some advanced editing, for example, you want some custom action on any button and need to call a JavaScript function. Then you need to add the JavaScript file to the skin, use the Layout > User Assets > Add Asset button for the same. You can manage all the explicitly added assets in the Layout > User Assets panel. 

Home Page

When you customize the skin, you often don't need any extra files. In case of advanced editing, for example, custom action on any button, for which you must call a JavaScript function. Then you need to add the JavaScript file to the skin, use the Layout > User Assets > Add Asset button for the same. You can manage all the explicitly added assets in the Layout > User Assets panel.

The home page has four sections. The top section has the logo, links, main search bar, and hero image. The tile area has the tiles as per the TOC. The custom home page
and the footer sections follow. 

Top Section

The top section has various parts, for example, Logo, Title, Header Links, Filter, and Favorites. The section is similar to the Topic page. You can enable the header links on the home page using the check box Home Page > Header Links. The following image provides the class association details to help with the styling.

Search

The search on the home page works in the same way as the topic page. The search field has search and clear buttons. The search suggestions and search results appear similarly. The following image provides the class association details to help with the styling. 

TOC Tiles

The tiles on the home page correspond to the items in the selected TOC for the output generation. The home page has tiles for both sections and pages. Using the option Layout > Home Page > Drilldown TOC, you can control whether to show tiles for just the top level or every level in the TOC. 

Every tile has three parts - image, description, and title. You can define a set of images in the skin editor to use for the tiles. Alternatively, you can switch on the option Layout > Home Page > Manage Tiles from TOC  to define the images in the TOC for every section and page. This option gives you greater flexibility to manage the tiles. If you do not want any particular tile, then don't specify the image. The title is the same as what you have in the TOC.  

The description field must be enabled using the option Layout > Home Page > Tile Description. The value of the description comes from what you define in the topic properties.

The following image provides the class association details to help with the styling. For example, if you don't want TOC Tiles at all on your home page. Navigate to Home Page > TOC Tiles > container > Layout > Display and select none from the drop-down.

Topic Area

The topic area is a placeholder container in TOC tiles if you want to add any additional content. Sometimes, you may want to switch off the TOC Tiles area and have only custom content. To display your content in the topic area, select the HTML topic with the content in the field Layout > Home Page of the output preset. 

Footer

To display the footer on the home page, you must select an HTML topic with the footer content. Specify the topic in the field Layout > Footer Content of the output preset.

Topic Page

The topic page has three areas- header, body, and footer. The header area contains a logo, title, top-level links, and a search box. The body area has left, middle, and right sections. The left section contains a Table of Contents, Index, and Glossary panels. The midsection has a toolbar panel and the topic content area. The right section has Topic TOC, Favorites, and Dynamic Filters panels.

Header

The header has various sections. You can control the styles and layout using the respective classes. For example, to increase the height, edit the field Topic Page > Header > container > LAYOUT > Height. 

Logo

To set a logo, navigate to the field Topic Page > Header > logo > BACKGROUND > Image Path.

Click the browse button to select the image for the logo. A copy of the image gets created in the skin folder if you select the image from outside. Use the Height and Width fields to modify the dimension of the image. 

Title

The text for the title comes from the Title field in the output preset. You can control the dimension, font, text size, and other attributes from the skin editor. Select Topic Page > Header > title > FONT group to set font family, font size, and other properties. 

Select Topic Page > Header > title > LAYOUT group to control the width. Use left padding or margin to manage the gap from the logo, and so on. 

Use Layout > General section to set common font family and color for the entire skin.

Header Links

Header links appear on the right side of the header. When you create any skin, there are no header links. You can define the links from the Layout > Header Links section. Use the following steps.

You can style any link in the Topic Page tab. See the layout of the boxes above in the header image. Use Topic Page > Header Links > item to style the links like font size, text color, text styling, etc. To set the icon for any link, select Topic Page > Header Links > icon-000N and do the following steps. (Note: N represents the icon number defined in Step 5 above) 

Search

Search has many components, and the structure is complex. You can modify common parts like icon color and font family using the theme settings in the Layout tab. However, seeing the following screenshot with labels, you can customize most components.

Static header and footer

The feature sticks the header and footer on the output, even on scrolling. The header or footer will always be visible on the screen. We've provided two toggle switches on the Home Page and Topic Page sections in the Skin Editor.

Body

The body lies in the middle part of the topic page. The body has four parts - toolbar, left panel, topic content area, and right panel.

Toolbar

Every skin has toolbar buttons for different user actions. You will find the list in the Topic Page > Buttons section. You can rename, reorder and delete from the list. Click Add Button to add a new one. To define the properties of any button, select it from the Select button dropdown. You can specify the following properties.

• ID:  The ID is auto-generated to give a unique value to any button. Topic Page > Buttons section uses this ID to edit the settings for a particular button. 
  
• Title: Title shows as the tooltip of the button. The button displays the icon only. Use the option Layout > Topic Page > Button Name to show the name on the buttons. The value of the button's name is the same as the title.
  
• Toggle State Title: If any button changes the state, then you can provide a different title for the toggled state. For example,  Expand/Collapse All button.
  
• URL:  Specify the URL you want to get triggered on a button click. It can be any local topic, weblink, or an email link. 
  
• JavaScript: Advanced users can provide their JavaScript function name for different states of the button. Custom JavaScript files can be attached to the skin from the Layout > User Assets section.

The following image illustrates all the classes for the toolbar. 

Share in social media

The share button on the toolbar shows the list of options to share when clicked. Every skin has a pre-defined list of sharing options. Use the Layout > Sharing Options section to customize the list. Click the button Add Share Option to add any new option. 

Select the option from the Select Option dropdown list to modify. Use the following steps for customization: 

• ID: This is auto-generated to give a unique id to any button. It is used while editing the settings in Topic Page > Share Buttons section. 
  
• Title:  Defines the label of the button.
  
• URL: The link which will get triggered at the click of the button. Service providers have fixed URLs for Social media buttons.
  
• Tooltip: Defines the tooltip of the button. 

The following image illustrates all the classes for the sharing widget. 

Left Panels

On the left-hand side, there are the Table of Contents, Index, and Glossary panels. The Contents panel is mandatory; Index and Glossary are optional. You can switch on and off Index and Glossary panels from the  Layout > Topic Page section. You can also control the panel that comes up first for the user. If you do not select Index and Glossary content in the output preset, the respective panel will not show. 

The names of the panel tabs come from Labels. Go to the Output tab of the application and open the Labels panel from the left toolbar. Select or create labels file for required language. When you open the file for editing, see the Frameless tab to find all the relevant strings for the output.

The following image illustrates all the classes for styling the TOC panel.

The following image illustrates all the classes for styling the Index panel. 

The following image illustrates all the classes for styling the Glossary panel.

Topic Area

The topic area has three parts:

• Breadcrumbs are at the top.
  
• Topic content in the center.
  
• Browse sequence at the bottom.
  

Use a stylesheet to style the topic content. You can use masterpage to override the stylesheet at the time of output generation.

Breadcrumbs at the top show the hierarchy of the current topic as per the TOC. In the beginning, it can have a label, which can work as the link to go to the default topic. Text of this label comes from the field Output > Labels > (language file) > FRAMELESS > BreadcrumbStart in the language-specific label file. Use the check box Layout > Topic Page > Breadcrumbs Home Hyperlink to make the label static or not.

Most skins have Browse Sequence at the bottom. Use option Layout > Topic Page > Browse Sequence in Right Panel to move it to the bottom of the right panel. Some skins have it at the top.

The following image illustrates all the classes for styling the topic area.

Right Panel

The right panel contains various features like Mini TOC, Favorites, Dynamic Filter, and Share options. It also has a toolbar with buttons and few buttons at the bottom. You have the choice to hide the right panel. Use the Layout > Topic Page > Right Panel setting to hide the panel. Add the right panel buttons to the main toolbar in case you want to hide the right panel. 

There are three buttons at the top and two buttons at the bottom. You can optionally select to have browse sequence navigation along with the buttons at the bottom using the option Layout > Topic Page > Browse Sequence in Right Panel. 

Buttons and Mini TOC

Mini TOC or the Topic TOC is shown on the right panel by default. Use the Layout > Mini TOC setting to control the heading levels. The following image illustrates all the classes for styling the toolbar and Mini TOC.

Favorites

Your users can mark any topic as a favorite and revisit the list later. The list is shown on the right side when the user clicks on the Favorite button from the main toolbar. Users can delete any favorite by clicking on the pencil button to get in the edit mode and then make the changes. The following image illustrates all the classes for styling the Favorites panel.

Dynamic Content Filter

Dynamic content filtering options are visible only if your content has any filter defined. You do that from the output preset. The toolbar has a button to show the filtering options which come up in the right panel. Users can click the same button to hide it. Selected filters show up at the top above the topic area. The filtering text comes from what you have specified in the Dynamic Content Filter panel. The rest of the text comes from the Frameless section of the labels file. 

The following image illustrates all the classes for Dynamic Content Filters.

Footer

You can define the footer for the home page and topic pages as any HTML topic. Specify the file in the field Layout > Footer Content of the output preset. You can style the footer area box using the class Topic Page > Footer > Container.

Cookies Acceptance Dialog

GDPR stands for General Data Protection Regulation. It's the core of Europe's digital privacy legislation. GDPR and some other regulation mandates to take explicit user acceptance before saving in the browser local storage or cookies. Use the setting Layout > General > GDPR Compliance to enable this compliance. The user is shown a cookies acceptance dialog for the first time. He can accept or reject it. Default text provided for the acceptance explains why it is needed. You can customize the text from the Labels. The following image illustrates all the classes to style this dialog.

Advanced Editing

The skin editor is sufficient for customizing the skin in most of the use cases. If you are comfortable and want to get under the hood, then the following are some of the details which will be helpful.

• When you create a skin, few files get copied to the project folder. Select Show in Explorer on right-click on the skin to open the folder. 
  
• The template files homepage.ejs and topicpage.ejs contain the layout of the page. You can edit these files like an HTML file. When Adobe releases any update, then these files may get overwritten.
  
• The file layoutDiff.css contains all the CSS classes to modify the style. Any changes made in the skin editor get saved in this. You can make edits directly in this file but do not change the structure of the file.