Inspiring

Question

How can I remove the Search field from the header?

Forum|Forum|2 years ago
May 5, 2023
8 replies
1053 views

I would like to remove the right-hand search field from my generated help. I've been digging around in the template editor, but I don't see a way to remove it.

I updated my help project to the latest RH version this week.

The field I'm trying to remove is circled in black in this screen shot:

Thank you!

Cindy

This topic has been closed for replies.

C

Cynthia PaoAuthor

Inspiring

I did it!

Based on what vk-RH said, I found the layout.css file and copied it to the YourProyectName > publish > skins > skin_your_using folder.

Then, looking at the advice from this post: https://community.adobe.com/t5/robohelp-discussions/robo-2019-full-remove-shadow-around-search-field-on-header-bar/td-p/11047813

I edited the css file in this way:

body.media-desktop div.searchbar-extra {
box-shadow: none;
}

After I compiled, the Search field is gone.

Thanks everyone!

Cindy

C

Cynthia PaoAuthor

Inspiring

box-shadow: none;

Should really be

display: none;

Peter Grainge

Community Expert

Have you tested whether that still works if you make a further customisation using the template editor? I am just questioning whether that would override this method.

________________________________________________________

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

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

vk-RH

Known Participant

Yes Peter, the setting at RoboHelp still working well.

The only thing I have seen is that you will see the search bar at the heading in the editor, but when you 'll do the output it'll dissapear.

A

Amebr

Community Expert

I wouldn't recommend editing the files in the installation directory as they may be overwritten during program updates and will not make it to new versions as they are released. Adding your changes to a custom css file and adding that file to the User Assets section of the skin is the recommended method and will ensure your change is not overwritten by program updates.

vk-RH

Known Participant

of course you'r right. Let me investigate one thing that's in my mind.

vk-RH

Known Participant

Ok, I did the following:

Copy the file layout.css that's inside the folder :

C:\Program Files\Adobe\Adobe RoboHelp\resources\data\template\layouts\YourLayout

and now copy it to:

YourProyectName > publish > skins > skin_your_using

edit this file and add the following:

   #fts-panel{
      display:none;
    }
    #search-results{
      display:none;
    }
    .searchbar-extra{
      display:none;
    }
    .fts{
      display: none !important;
    }

that worked for me and it is a better solution according what you said before. 🙂

vk-RH

Known Participant

The following worked for me:

Access to the folder where you have the proyect and navigate to:

YourProyectName > publish > skins > skin_your_using

Inside of this folder you will find "html5.skn"

You should open this file with a code editor like note++ or Visual Studio Code.

This file give us some info about our config skin. Take note of the name inside the tags <layout>name_layout</layout>

After that, you have to navigate into the program folder to the following route:

C:\Program Files\Adobe\Adobe RoboHelp\resources\data\template\layouts

There you will find a folder with the same name as you see inside the tags. Access to it.

Now you should open "index.ejs" (with note++ or VSCode) and do the following:

Search a div with "class = searchbar-extra" and comment all the block as you can see in the image. (You can delete it, but it is better to comment it cause maybe you will use it in a future)

<!-- <div class="searchbar-extra" data-if="KEY_SCREEN_DESKTOP" data-mouseover="@mousein_searchbox(true)" data-mouseout="@mousein_searchbox(false)"
				data-controller="SearchController:sc" data-attr="aria-hidden: !@KEY_SCREEN_DESKTOP">
			<input id="inp" class="wSearchField" type="text" data-class="searchpage-mode: @168091_content == 'search'" data-attr="placeholder: @11361180_LNG.Search; title: @11361180_LNG.Search"
					data-focus="@focusin_searchbox(true)" data-blur="$sc.handleFocusOut('focusin_searchbox')|timeout:200" data-value="KEY_SEARCH_TERM"
					data-keyup="$sc.handleKey(event)|debounce:150"/>

			<a class="wSearchLink" data-click="@EVT_SEARCH_TERM(true)" data-attr="href: '#'; title: @11361180_LNG.Search;; aria-label:@KEY_LNG.Search">
				&nbsp;<span class="rh-hide" aria-hidden="true" data-html="@KEY_LNG.Search"></span>
			</a>

			<div data-if="@focusin_searchbox && @3351385_RESULTS_KEY!== undefined &&  (@SEARCH_RESULTS_KEY).length>0" class="search-list" >
				<table>
					<tr data-repeat="search_results" data-class="search-suggestion:true; search-selected:@selected===#{@index}" data-click="$sc.handleClick(#{@index})">
						<td class="search-text-column">
							<div class="search-text" data-itext="item.term"></div>
						</td>
						<td>
							<div class="search-delete" data-if="$sc.canDelete(#{@index})" data-click="$sc.handleDelete(#{@index})"></div>
						</td>
					</tr>
				</table>
			</div>
		</div> -->

Then, do the same with the block called "Search field" and "Search results".

And that's all, check if everything is working well.

PD: If you don't have permissions to edit the file inside program files, you should duplicate the folder and work on it.

C:\Program Files\Adobe\Adobe RoboHelp\resources\data\template\layouts\new_name(duplicated)

And now you must change file html5.skn: change name inside tags <layout>new_name</layout>

Hope it is helpfull for you. After investigating is the only way I know and it is working fine for me.

If you have any further questions don't heasitate to contact me.

vk-RH

Known Participant

Notice that, if you do this and then you try to edit the tamplate from RoboHelp, you will see a blank page.

This will be a big problem if you are editing the tamplate from there... 😞

I will continue investigating a better way to do it.

A

Amebr

Community Expert

Have a look at this post. https://community.adobe.com/t5/robohelp-discussions/robo-2019-full-remove-shadow-around-search-field-on-header-bar/td-p/11047813

Instead of specifying shadow-box: none (which will remove the shadow ), try display: none (which should hide the whole thing).

C

Cynthia PaoAuthor

Inspiring

I do see that icon, Peter, so I guess I can't change it in its current layout - which is framed.

I was hoping that I was simply missing an option somewhere, but I have not missed it for a change.

Thanks, Peter!

Cindy

Peter Grainge

Community Expert

I am guessing in the presets panel it has an image alongside that is like the bottom one here.

If it is, that is an HTML5 output and the templates have relatively few customisation options compared with frameless outputs.

I can't see an option to remove or hide it in the way you could with frameless. If changing is not an option, then maybe someone else knows of a way. Sorry but I don't.

________________________________________________________

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

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Do you mean you have updated to 2022.2?
Which skin?

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

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

C

Cynthia PaoAuthor

Inspiring

Yes, I have updated 2022.2.

The skin is a custom skin called "Halliburton_Red" - I can't remember how I created it, though.

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