• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How can I remove the Search field from the header?

Explorer ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

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:

RHForumScreenShot.png

Thank you!

Cindy

 

 

TOPICS
New UI , Output presets

Views

460

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 Expert ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

  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.

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

Votes

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
Explorer ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

Yes, I have updated 2022.2.

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

 

Votes

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 Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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

 

image.png

 

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.

 

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

Votes

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
Explorer ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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

 

Votes

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 Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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.

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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.

Votes

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 Expert ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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.

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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. 

 

Votes

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 Expert ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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.

 

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

Votes

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 ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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.

Votes

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
Explorer ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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

 

Votes

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
Explorer ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

LATEST

box-shadow: none;

 

Should really be 

display: none;

 

Votes

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