Modifying the search button

[Liz_A]

Hi there.

I'm building my first mobile output and I've been editing the appearance of the skin. No matter what I change, the "search" button still has a very pale grey surround which clashes with the dark background I'm using. Is it possible to change the colour of the surround and if so, how would I do that?

Hope someone can help!

[Thomas Tregner]

You can modify the common stylesheets used by WebHelp Mobile targets. Located here:
C:\Program Files (x86)\MadCap Software\MadCap Flare V8\Flare.app\Resources\WebHelpMobile\Advanced\Skins\Default\Stylesheets

In particular, you can modify this style in Header.css:

Code: Select all

#searchSubmit
{
	margin: 0px 0px 0px 4px;
}

To this:

Code: Select all

#searchSubmit
{
	margin: 0px 0px 0px 4px;
	border: 0px 0px 0px 0px;
}

If you do this, every WebHelp Mobile target generated from your machine will have the change. So you should make a backup copy of the stylesheet in case you want to change it back. And you will have to make the change on every machine from which you intend to generate an output.

[Liz_A]

Thanks Thomas, I'll give that a go!

[subquark]

Here's an example of modifying the search field and button by styling #searchField and #searchField as Thomas indicated.

I use Chrome and "Inspect Element" to see what CSS needs to be edited. There's even a magnifying glass added as a background image in the searchField.

Good luck. =)