How to Configure the Main Page Tiles

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 transformation scenario DITA map.

Hiding some of the tiles displayed in the main page

When the documentation is very large and the number of topics on the first level is very large, you might want to hide some of them. Also, this might prove useful when you want to display in the first page only the topics that are most relevant to your intended audience.

There are two methods of 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 control which topic on the first level of the DITA map will not be displayed as a tile:

Open the DITA map in the Text mode of Oxygen XML Editor.
Add the following metadata information in the topicref element (or any of its specializations) for each first-level topic 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 control which topic on the first level of the DITA map will not be displayed as a tile:

Make sure you set an id to the topic you want to hide. For the purpose of this procedure, we suppose that the id you set to a topic has the value growing-flowers.
Create a new CSS file that contains a rule that hides the tile generated for our topic (identified by the topic id growing-flowers). The CSS file has the following content:
```
.wh_tile [data-id='growing-flowers'] {
  display:none;
}
```
Use the Customizing WebHelp Output with a Custom CSS method to pass the CSS file you just created to the transformation scenario.

Setting an Image in the Tiles Displayed in the Main Page

There are two methods to set an image in a tile: one of them involves setting metainformation in a DITA map and the other one that uses a CSS .

Editing the DITA Map

Open the DITA map in the Text mode of Oxygen XML Editor.
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>  
</topicmeta>
```
Note: The attr-width and attr-height attributes can be used to control the size of the image, but they are optional.

Using a Customized CSS

Make sure you set an id to the topic for which the tile will be decorated with an image. For the purpose of this procedure, we suppose that the id you set to a topic has the value growing-flowers.
Create a new CSS file that contains a rule that associates an image with a specific tile. The CSS file has the following content:
```
.wh_tile[data-id='growing-flowers']> div {
    background-image:url('resources/flower.png');
}
```
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.