Highlighted

Robo 2019 (Full) Remove Shadow Around Search Field on Header Bar

New Here ,
Apr 14, 2020

Copy link to clipboard

Copied

I'm using RoboHelp 2019 and producing Responsive HTML 5 help.

I'm trying to match the help design to that of the web based app. I would like to remove the shadow that appears on the Search field on the header bar, but can't find which .CSS the setting is stored.

 

shadow_search_field.png

 

Any ideas?

Many thanks in advance.

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

I was actually playing around seeing if I could get a layout that looks like our current (RH11) output.

 

You can remove the shadow if you add a custom css file to your skin using the User Assets in the Layout section.

 

I've only investigated desktop view, so you'd need to inspect the output using the browser developer tools to see what, if anything, is needed for tablet or phone sized screens.

 

The css code to remove the shadow should be: 

 

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

 

 

EDIT: I was working with Azure Blue, but the code for other skins could be different.

 

Views

402

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

Robo 2019 (Full) Remove Shadow Around Search Field on Header Bar

New Here ,
Apr 14, 2020

Copy link to clipboard

Copied

I'm using RoboHelp 2019 and producing Responsive HTML 5 help.

I'm trying to match the help design to that of the web based app. I would like to remove the shadow that appears on the Search field on the header bar, but can't find which .CSS the setting is stored.

 

shadow_search_field.png

 

Any ideas?

Many thanks in advance.

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

I was actually playing around seeing if I could get a layout that looks like our current (RH11) output.

 

You can remove the shadow if you add a custom css file to your skin using the User Assets in the Layout section.

 

I've only investigated desktop view, so you'd need to inspect the output using the browser developer tools to see what, if anything, is needed for tablet or phone sized screens.

 

The css code to remove the shadow should be: 

 

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

 

 

EDIT: I was working with Azure Blue, but the code for other skins could be different.

 

Views

403

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
Adobe Community Professional ,
Apr 14, 2020

Copy link to clipboard

Copied

I can't quite see what you mean by shadow from the image even when enlarged. Do you mean the light grey border? Also you haven't said which skin you are using.

 

I looked at one skin and the editor shows Header Search Box settings.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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
Reply
Loading...
New Here ,
Apr 14, 2020

Copy link to clipboard

Copied

Hi Peter

Apologies - I'm still learning what imfpormation needs to be provided. 

 

The skin is based on Azure Blue. It looks to me like a grey border with a dropped shadow.

 

None of the settings in the skin affect the 'shadowed' border. As you can see from my settings, the field border is the same as the background.

 

Snag_29d292df.png

 

Thanks

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
Reply
Loading...
New Here ,
Apr 14, 2020

Copy link to clipboard

Copied

Apologies that I forgot to use the blue Reply button!

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
Reply
Loading...
Adobe Community Professional ,
Apr 14, 2020

Copy link to clipboard

Copied

image.png

 

I see a feint shadow and there is no way I can see to remove it. Looks like another feature request.

 

If it helps, I had to look hard to see it and I have a decent screen. I'm thinking users will notice it less than you and I might.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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
Reply
Loading...
Adobe Community Professional ,
Apr 14, 2020

Copy link to clipboard

Copied

I was actually playing around seeing if I could get a layout that looks like our current (RH11) output.

 

You can remove the shadow if you add a custom css file to your skin using the User Assets in the Layout section.

 

I've only investigated desktop view, so you'd need to inspect the output using the browser developer tools to see what, if anything, is needed for tablet or phone sized screens.

 

The css code to remove the shadow should be: 

 

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

 

 

EDIT: I was working with Azure Blue, but the code for other skins could be different.

 

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