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

Community Beginner ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

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:

JoeJitsu_0-1644950458103.png

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

JoeJitsu_1-1644950517411.png

 

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?

Views

46

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

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:

<div class="rh-layout-SEARCHBOX-search ">

After clicking the search icon:

<div class="rh-layout-SEARCHBOX-search-selected ">

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

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! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

LATEST

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. 😛

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp