QR code for this page

Powered by Titania Delivery

Configuring the Tiles on the Main Page

The tiles version of the main page of the WebHelp Responsive output displays a tile for each topic found on the first level of the DITA map source. However, you might want to customize the way they look or even to hide some of them.

Depending on your particular setup, you can choose to customize the these tiles either by setting metadata information in the DITA map or by customizing the CSS that is associated with the DITA map.

How to Hide Some of the Tiles

If your documentation is very large or there is a large number of topics on the first level, you might want to hide some of the tiles. Also, this might be useful if you only want to display the topics in the first page that are most relevant to your intended audience.

There are two methods for doing this. One of them involves editing the DITA map and marking the topics that do not need to be displayed as tiles, and another one that uses a small CSS customization level to hide some tiles identified by the id of the topic.

Editing the DITA Map

To edit the metadata in the DITA map to control which topics on the first level of the DITA map will not be displayed as a tile, follow these steps:

  1. Open the DITA map in the Text editing mode of Oxygen XML Developer plugin.
  2. Add the following metadata information in the topicref element (or any of its specializations) for each first-level topic that you do not want to be displayed as a tile:
    <topicmeta>
  <data name="wh-tile">
    <data name="hide" value="yes"/>        
  </data>
</topicmeta>

Customizing the CSS

To customize the CSS to control which topics on the first level of the DITA map will not be displayed as a tile, follow these steps:

  1. Make sure you set an id on the topic you want to hide.
  2. Create a new CSS file that contains a rule that hides the tile generated for the topic (identified in the following example by the topic id growing-flowers). The CSS file should have content that is similar to this:
    .wh_tile [data-id='growing-flowers'] {
  display:none;
}
  3. Use the Customizing WebHelp Output with a Custom CSS method to pass the CSS file you just created to the transformation scenario.

How to Add an Image to the Tiles

There are two methods that you can use to add an image to a tile. One of them involves editing the DITA map, and the other uses a CSS customization.

Editing the DITA Map

To edit the metadata in the DITA map to set an image to be displayed in a tile, follow these steps:

  1. Open the DITA map in the Text editing mode of Oxygen XML Developer plugin.
  2. Add the following metadata information in the topicref element (or any of its specializations) for each first-level topic that will have an image displayed in the corresponding tile:
    <topicmeta>
  <data name="wh-tile">
    <data name="image" href="img/tile-image.png" format="png">
     <data name="attr-width" value="64"/>
     <data name="attr-height" value="64"/>
    </data>
  </data>  
</topicmeta>

    Note

    The attr-width and attr-height attributes can be used to control the size of the image, but they are optional.

Customizing the CSS

To customize the CSS to set an image to be displayed in a tile, follow these steps:

  1. Make sure you set an id on the topic that you want the tile include an image.
  2. Create a new CSS file that contains a rule that associates an image with a specific tile. The CSS file should have content that is similar to this:
    .wh_tile[data-id='growing-flowers']> div {
    background-image:url('resources/flower.png');
}
  3. Use the Customizing WebHelp Output with a Custom CSS or the Create a WebHelp Responsive Skin method to pass the CSS file you just created to the transformation scenario.

Parent topic: Customizing the WebHelp Responsive Output

Was this helpful?