Set the Search Bar in the Middle of the Tri-pane Header

[bangmaster]

I set up a new tri-pane project, and I'm wondering if there's a way to display the search bar in the middle of the header. I know you can do it in top-nav, but my readers like the side menu as it appears in the tri-pane output, so I'd prefer to use that format for now.

If I can't move the search bar in tri-pane, can I set up a top nav project that has the top nav TOC removed and a tri-pane format added?

The Bomgar Vault example in MadCap's Customer Showcase is a good indicator for what I'm trying to accomplish.

https://www.bomgar.com/docs/vault/index.htm

I know this is a lot to ask, so any help would be useful.

[GregStenhouse]

Put this code in the Skin | Toolbar | Custom Javascript... section

Code: Select all

$("head").append("<link rel=\"stylesheet\" type=\"text/css\" href=\"Resources/Stylesheets/overrides.css\">");	

Add a new stylesheet to the Content | Stylesheets folder called "overrides.css".

Use that file to further customise the web help skin. For example, to bump the search box further to middle of the header, do something like this (Note Chrome F12 developer tools are your friend!):

Code: Select all

/*Override search bar*/
.search-bar {
	right:40%;
}

[bangmaster]

Hi Greg. Thanks for getting back to me. I did as you stated, but I'm not getting any result.

1. I opened the tripane skin and clicked the Toolbar tab. In the Custom Javascript to include in Toolbar page field, I clicked Edit and then added the following text.

$("head").append("<link rel=\"stylesheet\" type=\"text/css\" href=\"Resources/Stylesheets/overrides.css\">");

2. I then click the Content Explorer, right-click the Stylesheets folder, and then select New > Stylesheet.

3. I name the stylesheet overrides.css.

4. I right-click the overrides.css stylesheet and then select Open With > Internal Text Editor.

5. I add the following text:

/*<meta />*/

p.MyStyle
{
font-family: Arial;
font-size: 12pt;
margin: 0px;
}

img
{
border: none;
}

a.Popup
{

}

/*Override search bar*/

.search-bar
{
right: 40%;
top: 80%;
background-color: #ff0000;
}

6. I click Save and generate my output.

The project appears as shown in the attachment without any change to the search bar positioning.

NOTE: I use the Developer Tools to change the Top: 50% to Top: 80% to position the search bar. That is working correctly.

Any ideas?

[GregStenhouse]

Does overrides.css appear in your output? If not then maybe "Exclude content not linked.." is enabled in the target - clear that and try again? Also try clearing the cache (with F12 developer tools showing right click the refresh button and select Empty Cache and Hard Reload). Otherwise not too many ideas why it's not working, this is the approach we are using for our customised web help skin.

Cheers
Greg

[bangmaster]

Called MadCap with single support license and we figured out that if you go to the following path:

C:\Program Files\MadCap Software\MadCap Flare 12\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets

and open Styles.css, you can change the Search-bar style. With this particular problem, I changed the Top: 50%; to Top: 85%;.

Worked perfectly.

One thing to keep in mind. Changing the install stylesheets impacts all your outputs that use the styles you modify, so use these steps carefully and as sparingly as possible.

[NorthEast]

One thing to keep in mind. Changing the install stylesheets impacts all your outputs that use the styles you modify, so use these steps carefully and as sparingly as possible.

What MadCap suggest isn't a very good solution - it also only applies to your own PC, for that version of Flare, and none of it is saved with the project.

Greg's suggestion above is a far better solution.

I've written a blog post about this here which also has examples:
https://ukauthor.wordpress.com/2014/08/ ... tml5-skin/

[doc_guy]

I'll second Dave's comment. This is bad management of your project. Making these changes means you lose your changes each time you upgrade Flare. The changes apply to every project you generate. The changes are only on your machine, they are not part of the project. That means they aren't backed up in source control, and they are not shared with other writers who build your project.

Go look at Dave's blog post on this. It is an excellent way to change styles that apply to the overall page (not the content of the iFrame where the topic content lives). The change I made to my project was in addition to the steps you've already taken, make sure you add the following to the top if your regular stylesheet:

Code: Select all

@import url(override.css);
/* The above import will import the override.css stylesheet that makes changes to the skin in HTML5 Tri-pane output */

That way the override.css file will be included in the build. I add a comment after these types of items so that I (or whoever inherits the project after me) understand why I added the import. At some point in the future, you may forget how you made the magic work, so leaving yourself notes in the right places can help trigger your memory.