Editing a screen layout

A screen layout has two key components, a set of screen layout pages and a CSS. The screen layout pages define the content and the structure. The CSS defines the layout and the skin.

You can edit or customize a screen layout page in various ways. For example, you can add new screen layout pages, edit the screen layout pages to customize the position and style of widgets on the pages, insert widgets, and so on.

Add a screen layout page (SLP)

A screen layout contains standard layout pages for displaying topic contents and search results. However, you can add and design any number of layout pages to display other types of content, for example a home page with the TOC.

note:    You can add a Search Results page if the screen layout does not already have a SearchResults.slp file.

1)In the Output Setup pod, right-click on the screen layout name or on an existing SLP name. Select New > Screen Layout Page.

2)In the General tab, specify a page title and description.

3)In the Appearance tab, attach a style sheet and modify styles if required.

4)(Optional) Add background sound.

5)Click OK.

Screen layout page components

The key component of a screen layout page is a widget. A widget contains placeholders that you can be styled and laid out using cascading style sheets. While generating output, RoboHelp converts the placeholders into standard HTML tags with associated functionality.

note:    The look-and-feel of a widget in the output and in Screen Layout Editor might differ to some extent.

The following customizable widgets are available for achieving different functions:

LNG String

Insert this widget to add a string from the LNG file.

note:    The LNG file contains strings for various user interface elements. RoboHelp loads these strings at runtime.

Tab

Insert this widget to add a tab in a tabbed panel.

Browse Sequence

Choose options from this widget menu to insert browse sequence buttons and links in default or custom styles.

Glossary

Insert this widget to create a placeholder for a glossary.

Index

Insert this widget to create a placeholder for an index.

Print Button

Insert this widget to add an icon for printing.

Print Link

Insert this widget to add a text link for printing.

Project Title

Insert this widget to create a placeholder for the project title.

Tabbed Panel

Insert a group of tabs in two layouts (tabs placed horizontally and tabs placed vertically (accor­dion)). The default tab group consists of Table of Contents, Index, and Glossary. You can also choose Blank Horizontal Tabs or Blank Vertical Tabs(Accordion) to insert blank tab groups.

Search

Insert the Search Options and Search Results Area widgets. The Search Options widget lets you add and style a search box to display in the output. The option to show search results for all words specified in the search box is also added by default.

The Search Results Area widget lets you design and style the area in which search results should be displayed. You can add and configure components such as Search URL and Search Context.

Show/Hide

Insert the Show/Hide widget into a widget to enable end users to show or hide the widget. For example, if you insert the Show/Hide widget into a TOC widget, the end users get the capability to show or hide the TOC in the output.

Choose one of the following options:

Dual State Show/Hide

Displays different text (for example, Show or Hide) in each of the two states

Static Show/Hide

Displays the same text (for example, Show/Hide) in both states

TOC

Choose between Tree and Expanding Node to insert a TOC element on a screen layout page and style the various placeholders. Tree displays TOC items in a hierarchical view. In Expanding Node, arrows next to the TOC items at each level display the items at the next level.

Topic

Insert this widget to create a placeholder for topic contents.

TOC widget

Insert a TOC Tree widget or a TOC Expanding Node widget into a screen layout page to create and style a placeholder for a TOC in the output.

Attributes

Class

Specifies that a Div class should be applied on the parent TOC placeholder

Child placeholders

A TOC Tree widget has the following child placeholders:

Open Book

Defines the look and feel of open book items in the TOC in the output. You can insert any rele­vant HTML content inside this placeholder.

Closed Book

Defines the look and feel of closed book items in the TOC in the output.

Page

Defines the look and feel of page items in the TOC in the output.

Link

Defines the look and feel of TOC items that are linked to web addresses, email messages, multi­media files, Usenet newsgroups, and FTP sites in the output.

Placeholder properties and attributes

Each Multiscreen or Responsive HTML widget has a set of placeholders, and each placeholder has predefined attributes.

The following table lists various placeholders and their properties and attributes:

Placeholder

Parent

Children

Attributes

Alphabet category

Glossary

Text

class, showin

Browse sequence Back

[HTML]

[None]

class

AND Search Control

 

 

 

Browse sequence Nect

[HTML]

[None]

class

Closed book

TOC

Text

Icon

class, classhover, classselected

Filter Box

Glossary

Index

[None]

placeholder

Glossary

Tab Content Group

[HTML}

Glossary TermGlossary DefinitionAlphabet CategoryFilter Box

class, showin

Glossary Definition

Glossary

Text

class, classhover

Icon

Closed Book

Open Book

Page

Link

Note: These placeholders are children of TOC.

Image

class, src, hoversrc, selectedsrc

Index

Tab Content Group[HTML]

Index Keyword

Index Link

Alphabet Category

Filter Box

class, showin

Index Keyword

Index

Text

class, classhover, classbookchilds

Index Link

Index

Text

class, classhover

Lng String

[All]

[None]

class

Navigation Link

[All]

[None]

class, href

Open Book

TOC

Text

Icon

class, classhover, classselected, classbookchilds

Search Field

[All]

[None]

placeholder

Search Combo

Search Results

[None]

[None]

Search Context

Search Result Item

[None]

class

Search URL

[All]

[None]

class

Search Message

Search Results

[None]

class

Search Page Numbers

Search Results

[None]

class, ckasspagelink, classpage

Search Result Back

Search Results

[None]

class

Search Result Item

Search Results

Search Title

Search Context

class, classhover

Search Result Next

Search Results

[None]

class

Search Results

Tab Content Group[HTML]

Search Message

Search Combo

Search Result Item

Search Page Numbers

Search Result Back

Search Result Next

class

Search Title

Search Result Item

[None]

class

Show/Hide

[All]

[None]

class

Tab

Tab Group

[None]

class, classhover, classselected

Tab Content

Tab Content Group

[None]

class

Tab Content Group

Tabbed Panel

[None]

class

Tab Group

Tabbed Panel

[None]

defaulttab

Tabbed Panel

[HTML]

[None]

class, showin

Text

Closed Book

Open Book

Page

Link

Index Keyword

Index Link

Alphabet Category

Glossary Term

Glossary Definition

[None]

class

TOC

Tab Content Group[HTML]

Closed Book

Open Book

Page

Link

class, showin

Page

TOC

Text

Icon

class, classhover, classselected

Link

TOC

Text

Icon

class, classhover, classselected

Topic

Tab Content Group[HTML]

[None]

class

Guidelines for screen layout design

Design the screen layouts using the standard widgets available with RoboHelp.

Avoid reusing any image from the standard widgets or default layouts in any new screen layout.

Define styles for all widgets in a screen layout CSS regardless of whether or not the widget is used in the screen layout. This ensures that the look-and-feel of the screen layout is not affected if a widget is added later.

Create only simple class styles in the CSS. Make sure that each style has a modular definition.

Make sure that all the icons and images are present in the screen layout folder regardless of whether or not they are used in the screen layout. The image names and formats should be in the required format.

Specify height and width of images in px for img styles.

Make sure that required style names are used in the screen layout. If you need to define addi­tional styles in the CSS, follow a similar naming convention but do not use 'w' as first the char­acter. Style names starting with 'w' are reserved for predefined widgets.

Do not use absolute positioning in styles. Fluid layouts work better for Multiscreen HTML5 or Responsive HTML5 output.

Do not use positioning attributes (for example, float) in the styles of top-level parent element of widgets. Examples of these elements are Topic, Index, and Tabbed Panel.

Include pseudo-class definition for hyperlink styles.

Make sure that the font family used in styles is appropriate and taking care of supported devices

Make sure that hyperlink styles take care of touch scenarios and include webkit proprietary attributes (for example, -webkit-tap-highlight-color) if required.

note:    These attributes cannot be inserted through RoboHelp CSS Editor and need to be inserted manually.

Use LNG strings for inserting generic text in screen layouts.

Do not use any inline styling in screen layouts.

Provide a representative image of each screen layout for use in its preview.

Make sure that a Layout.css file includes the style definition used internally by Multiscreen or Responsive widgets. Refer to the Layout.css file of any factory screen layout available in the Gallery folder of your RoboHelp installation.

Edit a screen layout page (SLP)

1)In the Output Setup pod, expand the screen layout you want to edit.

2)Double-click the screen layout page. Screen Layout Editor opens. You can add new compo­nents by inserting available widgets, change their placement, and modify their properties.

Screen layout page in Screen Layout Editor

la_ScreenLayoutEditor-Government.png

3)Edit the screen layout page as required.

To insert a widget, do one of the following:

Select Insert > Multiscreen Widgets. Select a widget.

Click a tool button on the Widget toolbar in Screen Layout Editor.

To select a placeholder in the widget, click the placeholder name in the Tag list below the Screen Layout Editor title bar. For example, to navigate to the LNG String placeholder in a Tabbed Panel widget, click LNG String in the Tag list.

To view or modify the attributes of a widget, do the following:

Select Project > Open > Pods > Screen Layout Properties.

Customize the default Topic page

A new screen layout comes with two default pages, Search Results Page and Topic Page. You can customize these pages in various ways.

Here are some examples of how you can customize the Topic page:

Place the project title placeholder at the bottom of the page.

Change the background color of the Topic page. Click Document in the Tag list, right-click and select Topic Borders And Shading. Select a color and click OK.

Customize the tabbed panel. To remove a tab, select the tab from the Tag list and press Delete. To add a tab, select the tab before which you want to add a tab and click the Insert Tab widget. Specify the tab name.

Replace the images in the browse sequence. Select an image in the browse sequence. Right-click and select Image Properties. Browse and select the PNG file for the new image. Change the other image in the same way.


September 30, 2016

Legal Notices | Online Privacy Policy