Webhelp Tiles configuring?

[kgajda]

Hi!

I looking at Webhelp Responsive output using Tiles.

I would like to style the first 3 tiles as 3 to a row, with special icons.
I would like to style whatever remains (the number differs by product) as 4 to a row, and no icons.

Can someone help me do this?

Thanks for your help!!
Kim

[alin]

Hello,

You should contribute a custom CSS to the WebHelp transformation. Please follow this procedure: https://www.oxygenxml.com/doc/versions/ ... n-css.html

The tiles are laid out using the CSS Flexbox Layout (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). The amount of tiles displayed on each row is controlled by the "width" property set on each tile. Currently each tile receives 30% of its parent width (3 tiles per row). If you want to display 4 tiles you should decrease the width of the tiles.

For example:

Code: Select all

@media only screen and (min-width: 1200px) {

    /* The tiles on the first row */

    .wh_tile:nth-child(1),

    .wh_tile:nth-child(2),

    .wh_tile:nth-child(3) {

        margin: 1em;

        padding: 1em;

        width: 30%;

        min-width: 300px;

        min-height: 140px;

    }

    /* The rest of the tiles (4 per row) */

    .wh_tile {

        margin: 1em;

        padding: 1em;

        width: 22%;

        min-width: 180px;

        min-height: 140px;

    }

}

Note that the example above is available only when the WebHelp output is displayed on large screens (wider than 1200px - see the media query). On smaller screens the tiles configuration is different (one or two tiles per row).

Regards,
Alin

[alin]

To display icons on the first three tile you can specify the associated images in a custom CSS (se my previous post) or in the DITA Map using the following procedure: https://www.oxygenxml.com/doc/versions/ ... _the_tiles

Regards,
Alin

[kgajda]

Thanks so much, Alin! I had just adjusted those in the CSS and was able to rearrange them as you suggested.
I was wanting to inject something between the rows of tiles using javascript, and I'm testing that now.

I have one more question though, semi-related to the tiles. I might want to add the TOC nav to the left side of the landing page, just as it is in the topics. But, it seems like since I have chosen tiles, that the transform ignores the tag to include the TOC. Is it only one or the other? Is there a way that I can include the TOC nav there as well as the tiles?

Thanks again for all of your help!!
Kim

[alin]

Hi,

You should edit the WebHelp Transformation scenario and ensure that both "webhelp.show.main.page.tiles" and "webhelp.show.main.page.toc" parameters are set to "yes". When selecting a "Tiles" template, the "webhelp.show.main.page.tiles" parameter is implicitly set to "yes".

Regards,
Alin