Webhelp Tiles configuring?

kgajda
Posts: 25

Webhelp Tiles configuring?

Mon Aug 21, 2017 8:38 pm

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
Site Admin
Posts: 132

Re: Webhelp Tiles configuring?

Wed Aug 23, 2017 9:56 am

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 Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
alin
Site Admin
Posts: 132

Re: Webhelp Tiles configuring?

Wed Aug 23, 2017 10:02 am

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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
kgajda
Posts: 25

Re: Webhelp Tiles configuring?

Fri Aug 25, 2017 7:31 pm

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
Site Admin
Posts: 132

Re: Webhelp Tiles configuring?

Mon Aug 28, 2017 11:11 am

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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest