How to change webhelp homepage based on screen size

ann.jensen
Posts: 230
Joined: Wed Jun 17, 2015 10:19 am

How to change webhelp homepage based on screen size

Post by ann.jensen » Thu Oct 06, 2016 7:07 pm

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

radu_pisoi
Posts: 348
Joined: Thu Aug 21, 2003 11:36 am
Location: Craiova
Contact:

Re: How to change webhelp homepage based on screen size

Post by radu_pisoi » Fri Oct 07, 2016 10:50 am

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.
Radu Pisoi
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

ann.jensen
Posts: 230
Joined: Wed Jun 17, 2015 10:19 am

Re: How to change webhelp homepage based on screen size

Post by ann.jensen » Mon Oct 17, 2016 10:15 am

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

bogdan_cercelaru
Posts: 213
Joined: Tue Jul 01, 2014 11:48 am

Re: How to change webhelp homepage based on screen size

Post by bogdan_cercelaru » Wed Oct 19, 2016 10:43 am

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
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

Post Reply