RoboHelp 2020 Frameless skin: How to get "search-selected" to be the default?

Report · Feb 15, 2022

Hi all!

I am using a rebranded "Orange" frameless skin. There is a search icon that appears in the top-right corner of the output:

When clicked, the icon "toggles" to the Search box (icon disappears and Search box becomes focus in the middle of the header):

What I want to do is set the default value of this "toggle" to "search-selected" so that the Search box above appears on the page upon load, instead of the search icon. I am familiar with the div classes for each element and in digging around, suspect this may need a script or LayoutDiff.css edit...but I just can't nail down where (or how) I can specify this.

On the front-end skin editor, I've tried changing various Display options on the search-icon and search-selected elements, but again coming up empty.

Does anyone have any ideas?

Report · Feb 15, 2022

I think you'll need a script that changes the class assigned to the search box when the page loads.

This is the div that changes when you click the search icon

Before clicking the search icon:

After clicking the search icon:

Report · Feb 15, 2022

Actually, scratch that, just changing the class doesn't work because there's javascript associated with the icon which inserts a bunch of html and makes other changes and my javascript knowledge isn't up to the task. 🙂

A web developer might be able to work it out, or try contacting support using the email address here:
https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp

Report · Feb 16, 2022

Thank you! This is exactly what I found as well. I am hoping I won't have to change any of the script aside from defaulting to "search-selected." The existing functionality and Javascript (clicking in the top-right of the header to toggle between the Search icon and the Search text field) can remain.

I will reach out to Robohelp support and report back here if I make any progress. By the way, did you happen to notice which script is associated with that icon?

Thank you again!

Report · Feb 16, 2022

hmm, I'm trying to remember. I think I used the global search in developer tools to look for 'search-icon' and that returned one js file. maybe topic.min.js? I'm not sure though, that file is way too developer for me so I ignore it. 😛