How can I remove the Search field from the header?

[Cynthia Pao]

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

[Peter Grainge]

1. Do you mean you have updated to 2022.2?
2. Which skin? 

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

[Cynthia Pao]

Yes, I have updated 2022.2.

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

[Peter Grainge]

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.

[Cynthia Pao]

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

[Amebr]

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

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

[vk-RH]

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: @active_content == 'search'" data-attr="placeholder: @Key_LNG.Search; title: @Key_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: @Key_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 && @search_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]

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.

[Amebr]

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]

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

[vk-RH]

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]

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. 

[Peter Grainge]

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.

[vk-RH]

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.

[Cynthia Pao]

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

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

[Cynthia Pao]

box-shadow: none;

Should really be 

display: none;