Page 1 of 1

How to change webhelp homepage based on screen size

Posted: Thu Oct 06, 2016 7:07 pm
by ann.jensen
Hi,
I am looking to implement something like you have on https://www.oxygenxml.com/doc/versions/18.0/ug-editor/ where the editor image and name disappears when the screen size reduced to phone size.
Can you advise how much customisation was required to achieve this?
Thanks in advance,
Ann

Re: How to change webhelp homepage based on screen size

Posted: Fri Oct 07, 2016 10:50 am
by radu_pisoi
Hi,

I think it is not necessary to implement anything if you use the Webhelp Responsive output.

The Webhelp Responsive output is designed to adapt to any device and screen size. By default, when the display size is reduced to the phone size the logo and product name are hidden.

Re: How to change webhelp homepage based on screen size

Posted: Mon Oct 17, 2016 10:15 am
by ann.jensen
Hi Radu,
From what I can see, when I set the Welcome message it appears in the wh_welcome div, whereas in Oxygen site it is part of ug-editor-name div. The ug-editor-name div content disappears when screen size reduces but the wh_welcome div content doesn't.
The ug-editor-name div doesn't appear to be part of any standard oXygen XML Author files.

Regards,
Ann

Re: How to change webhelp homepage based on screen size

Posted: Wed Oct 19, 2016 10:43 am
by bogdan_cercelaru
Hello,

For this message we are using the "webhelp.fragment.before.main.page.search" parameter that points to a file with the following content:

Code: Select all


<div id="ug-editor-name">Oxygen XML Editor 18.1<div id="ug">User Guide</div> </div>
and the following custom CSS:

Code: Select all


@media only screen and (max-width: 767px) {
#ug-editor-name {
display:none;
}
}
Regards,
Bogdan