Inspiring

Answered

Studio frameless output Mobile home page header link not is working...

Forum|Forum|2 years ago
August 19, 2023
8 replies
853 views

Using Robohelp 2022.3.93 and Studio frameless output. The mobile home page header link is not working but the desktop home page header link does work. The issue as I see it in development mode is:

In edit mode, the mobile home page header links "container" correctly displays the "red bounding box" to show which item is being edited. No problem here and an icon image is added without issue.

When attempting to edit the mobile home page header links "item" the "red bounding box" does not display; whereas it does diplay as expected in the desktop home page header links "item" edit view.

I cannot set the mobile home page header link hotspot for the custom home page link icon without access to the mobile home page header link "item" that does not display the "red bounding box" in edit mode.

The the mobile home page header link "item" position is key to setting the hotspot focus boundry for firing the mobile home page header link at runtime when the user selects the mobile home page header link icon.

Is the an undocumented feature (aka bug) or am I just missing the concept?

This topic has been closed for replies.

Correct answer Gray28594389k22n

I got it to work last night. The solution did not require editing CSS. Dealing with the mobile skin in the RH editor is not intutive and the https://helpx.adobe.com/robohelp/using/frameless-skin-editor.html documentation skirts mobile editing.

The key was to delete the About and Feedback header links in the Layout tab.

Add an icon to the remaining header link Favorites by swapping the menu.svg icon out in the project folder with your icon of choice.

Remove the header links "Favorites" title and edit the tooltip to reflect your intentent in the Layout tab. In my case the tooltip displays "Home" becusue my users got back to the web page that launched the Studio help file.

Set the Mobile Top Section "Logo" Layout "Display" property to none.

Move the Mobile Header Links "menu" to the left side of the screen where the "Logo" icon was and resize the control to suit your needs.

Swapping out the Desktop "Home Page" logo with a custom header link icon that routes users back to my web site "Home" was a piece of cake as stated in the original post.

Thanks for all the help...it got my brain ticking.

BTW: During the reply to this post; somehow the reply posted @ https://community.adobe.com/t5/robohelp-discussions/robohelp-2022-error-unable-to-edit-layouts/td-p/14017640

Peter Grainge

Community Expert

Nah, Snagit doesn't have that option. 🙂

It was just a mockup to show the idea. In reality it would probably have to be two icons.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

G

Gray28594389k22nAuthorCorrect answer

Inspiring

I got it to work last night. The solution did not require editing CSS. Dealing with the mobile skin in the RH editor is not intutive and the https://helpx.adobe.com/robohelp/using/frameless-skin-editor.html documentation skirts mobile editing.

The key was to delete the About and Feedback header links in the Layout tab.

Add an icon to the remaining header link Favorites by swapping the menu.svg icon out in the project folder with your icon of choice.

Remove the header links "Favorites" title and edit the tooltip to reflect your intentent in the Layout tab. In my case the tooltip displays "Home" becusue my users got back to the web page that launched the Studio help file.

Set the Mobile Top Section "Logo" Layout "Display" property to none.

Move the Mobile Header Links "menu" to the left side of the screen where the "Logo" icon was and resize the control to suit your needs.

Swapping out the Desktop "Home Page" logo with a custom header link icon that routes users back to my web site "Home" was a piece of cake as stated in the original post.

Thanks for all the help...it got my brain ticking.

BTW: During the reply to this post; somehow the reply posted @ https://community.adobe.com/t5/robohelp-discussions/robohelp-2022-error-unable-to-edit-layouts/td-p/14017640

A

Amebr

Community Expert

@Peter Grainge Can you show that in mobile view?

Peter Grainge

Community Expert

@Amebr Thank you for clarifying the requirement.

@Gray28594389k22n I realised my last solution would not work as it would open another tab. As I said, it was late. 🙂

Not what you wanted but would something like this work giving the user the choice?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

A

Amebr

Community Expert

I think trying to change a javascript file would be a terrible idea given they would be overwritten every time you generate and can change without notice.

What I'm suggesting is to create a test project where the only skin customisation is to add the header link. Don't try to position it, just have it display and use Inspect to find the correct element. From there it should be possible to figure out the css you need in the output. You add that to a custom css that you add to the User Assets and that will be applied each time you generate.

A

Amebr

Community Expert

@Peter Grainge What they want is when they are on a topic page for the logo link to go to the home page of the help site. Then when they are on the home page, the link will take them to an external site. They can get this to work for desktop by setting a custom header link (normally positioned on the right side of the page) and using positioning to move the link over the top of the default link. However, they can't manage to do the same in mobile view.

@Gray28594389k22n What I would do is set up a test project with an unmodified skin. Generate the output and view in the browser. Resize the browser window smaller so that it takes the mobile view. Then inspect the output code to figure out where and how the header links display in the uncustomised mobile view. From there you should be able to figure out what customised code you need, then add it to a custom css file and add the css in the User Assets section of the skin.

G

Gray28594389k22nAuthor

Inspiring

I've been on it for a few days. Looking at the generated index.htm HTML code at runtime, I see where it needs to be changed...but attempting to find the correct javascript file that generates the runtime path and renders it to the index.htm has been a snipe hunt.

Got to move on and do not have time to dwell on the issue. Some day maybe a build will include the fix.

Respectfully,

Peter Grainge

Community Expert

I'll have to reread this in the morning (late here) but I'm thinking I got your requirement wrong. You seem to want the icon to take the user to home page.

Is the help accessed from your company's web server? If so a URL to the index page would do it.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

G

Gray28594389k22nAuthor

Inspiring

The issue is that I can set a "mobile header link" container as demonstrated in the following image:

But unlike a "desktop header link" item, the "mobile header link" item does not facilitate a means to set the clickable focus boundry for the "mobile header link" icon as demonstrated in the following image which should display a "red" square in edit mode:

It should not matter where a header link URL takes me. The desktop edit view allows me to configure user input focus to the header link icon and the mobile edit view does not. A mobile header link icon is worthless if it cannot detect user selection on the click event.

I have come to terms that this is a "bug" and intend to move on and explain to end users that Adobe does not support header hyper links on mobile screens although it supports header hyper links on desktop screens.

Without any one responding on how edit the HTML file, I'll chalk it up to no product will do all thats advertized and everyone gets painted into a corner. It's a matter of choice to paint youself into the corner near the exit door.

Thanks for your assistance Mr. Grange.

Peter Grainge

Community Expert

Try setting the URL in the preset instead as shown below.

I generated an output and it works fine in desktop opening my website. Note that the full URL is required.

I then shrunk the browser window and opened the help again. The icon still went to my website.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

G

Gray28594389k22nAuthor

Inspiring

Looks good on paper. However, the problem is that when a user navigates to the help file topic page from a help file home page tile; they cannot return to the help file home page to select a different help file home page tile because using the proposed solution routes them to the header logo URL in lieu of the help file home page tiles.

Thus, my work around allows the user to remain in the help file system until clicking the "home page icon" link hack is clicked.

The issue is the mobile skin does not display a "red" bounds box while in edit mode to define the input focus settings for "Header Links" added using the Layout screen.

Whereas the same "header link" does display a "red" bounds box in edit mode to define the input focus settings when viewing the Desktop skin in edit mode.

In lieu of waiting for some future RH patch release; is the a way to manually edit the HTML file to correct the mobile skin issue after compiling the project?

Thank you for your efforts. You're the man for stepping up to the plate and attempting to verify the mobile skin "header link" problem that does not occur in the desktop skin.

Peter Grainge

Community Expert

Please add some images to make the problem clearer. Please use the photo icon to insert images within the post. Seeing an image inline with the text makes it easier for anyone answering or viewing the post.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

G

Gray28594389k22nAuthor

Inspiring

The Studio skin “use template homepage” is selected. When the end user selects the Topic page Header logo RH returns the user to the Home Page and all is good, so we can move that off the table. However, RH does not facilitate a means to set a URL when the Home Page “Logo” is clicked to route the user back to the initial web page that launched the help file. My hack eliminates the default Home Page “Logo” icon and substitutes it with a Home Page “Header link” that allows me to set a “Home” icon and URL link back to the web site that invoked the help file.

With that said; the third image demonstrates that the Desktop Header Links “Item” property allows me to set the hotspot coordinates (where the mouse pointer turns to a hand) to detect the mouse click when in the Desktop view; and all works as expected so no issue there either. But; the last image demonstrates that the Mobile Header Links “Item” selection does not display the “red” bounds box needed to position the hot spot where the “Home” header link icon is located. Again, don’t be fooled by the appearance and position of the Home Page Header Link “Home” icon that replaced the Home Page “Logo” icon. Simply stated, I cannot position the “Item” hotspot when the “red” bounds box does not display on the Mobile skin.

Peter Grainge

Community Expert

If I have got this right, instead of the desktop home page icon taking you to the home page of the help, you have set it up to go to a web page. You cannot set that to work in the mobile view. Is that correct?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded