Customize header

[cayennep]

I need to add links to support, training, bugtracker, etc to the header in the html output

I don't see any way to do this - I could add customized toolbar icons, but they wouldn't be in the right place, eg they'd be more inside the help docs instead of indicating the higher level, to go elsewhere.

anybody done this? I suppose it could be done by customizing the stylesheet, but then I'd always have to do any stylesheet modifications that way, right?

Any tips appreciated, thx

[whunter]

You can customize the masterpage you use for your webhelp output (in \Resources\MasterPages).

It sounds like maybe you have not explored the masterpage before. I don't remember what it looks like by default. You may see a breadcrumbs proxy and you will definitely see a topic body proxy (because that's how your topic content gets in there). But basically the "header" of your webhelp output is anything you add to this page *above* the topic body proxy, and the "footer" of your webhelp output is anything you add to this page below the topic body proxy.

Unless by "header" you mean the top part of the webhelp frame -- the part where the webhelp toolbar icons and your logo displays -- in which case I don't know how you could put links there other than to use custom buttons in the toolbar.

[cayennep]

hmm, ok, thanks - always helpful to have a suggested starting place

you're right that I haven't done anything with the master page, but I will explore it. Offhand, I don't see much in there.

You mention the logo and the toolbar - these are actually two different sections. I need to put logos & links _above_ the toolbar, so in the same area where the logo is. You can modify the skin in flare to add custom icons to the toolbar, but not to the header area above it.

any more thoughts, please advise, and thanks for the tip!

[whunter]

Well hmm maybe we are not talking about the same things. For example here is a screencap of a default WebHelp skin:

temp2.png

If you just replace the MadCap logo with your logo, it is inline with the toolbar icons. If you have two "sections" in your top frame, with the logo above the toolbar, then it sounds like perhaps some customizations have already been made to your output, in which case I don't have any further suggestions as it probably depends on what has been done.

However, do you mean the *topic* toolbar, which would display in the topic frame, above the "Topic Title" text here? In which case I still don't know how to help you because I don't use the topic toolbar and I don't know how to customize around it, but maybe clarifying what you are looking for will help someone else help you.

[cayennep]

yeah, it's the area above this - in line with the logo

I haven't done any customization on this, apart from replacing the logo and then modifying what the logo links to - which I do post-publish. O, and also made that area a company color - all thru flare, without modifying the stylesheet or master page.

I'm pretty sure the default, out-of-box has something above what you show here.

Trouble is, Flare is a documentation system/tool, and we're wanting to make it a support tool - so links to support, issue-tracking, and training need to appear outside the document/page, eg above this toolbar.

as always, any tips appreciated

[sfoley]

Trouble is, Flare is a documentation system/tool, and we're wanting to make it a support tool - so links to support, issue-tracking, and training need to appear outside the document/page, eg above this toolbar.

Off the top of my head, two ways you can make this happen:

1. Create links using new files in your TOC. In those topics, you can either show the link and give more information about it (let the user click to open the external site), or you could add some JavaScript to those topics that automatically opens the external site in a new window and then goes back to the previous topic. Ask the developers at your organization for help with the JavaScript, but here's a starting point:

Code: Select all

window.onload = function() {
	window.open("http://www.example.com/");
	window.history.go(-1);
}

2. Modify the default skin files to change the WebHelp template. This is pretty straightforward and not all that dangerous, but ...
a. You do this at your own risk. Don't expect support from MadCap.
b. Make backups of the files! If you don't, you'll have to reinstall Flare if things go wrong.
c. Keep a list of the changes you make. You'll need to make the changes again when you upgrade to a new version of Flare.

If you're okay with all of that, you can find the default files for the WebHelp template here:
C:\Program Files (x86)\MadCap Software\MadCap Flare V8\Flare.app\Resources\WebHelp
You'll probably want to muck around with the HTML in /Default.flwht/Toolbar.htm if you want the links at the top.

[cayennep]

I have links to the external support and training sites, but have been asked to also put icons that link to those

however, the toolbar is NOT the place for them, I could do that in Flare but as I keep saying they should go in the somewhat blank space ABOVE the toolbar, as it's not part of the html doc (which is what the toolbar is for, to navigate that doc).

It's where the logo is, aligned with that area - the red box in the screenshot

Yes, I may have to modify the css but not even sure what files to look at, so again any tips appreciated.

[whunter]

Oh, you are using the HTML5 output, not WebHelp output.

I still don't have any suggestions for you, but that at least clarifies why we were talking about two different things.

[sfoley]

however, the toolbar is NOT the place for them, I could do that in Flare but as I keep saying they should go in the somewhat blank space ABOVE the toolbar, as it's not part of the html doc (which is what the toolbar is for, to navigate that doc).

The HTML5 template files are in a slightly different folder than indicated in my last post:
C:\Program Files (x86)\MadCap Software\MadCap Flare V8\Flare.app\Resources\WebHelp2

The easiest thing to do is create a new element (like a div) inside the header area that contains your links. You can then use CSS to make sure they appear in the precise location you want, and adjust the look and feel. If you're not familiar with web development, I recommend that you use a DOM inspector in your favorite browser to learn more about the layout and structure of Flare's help system. (A DOM inspector is available as an add-on, or as part of the developer tools, for all major browsers.)

If you don't feel comfortable making changes to the template files, you can also create a script to make changes to your output files after each build. Search the forums for more information.

[cayennep]

thanks for this

I was hoping for a tip about which file to modify, at least - but I can use the firefox debug and see if I can sort it. I'm afraid I may have done this in the past and not been very successful, but will have another look.

Was hoping this would be a bit easier - once I figure out what I think needs to happen, I can do the web development, or ask the creative team for help (they'll have to create the icons anyway).

thanks again, or anyway

[NorthEast]

If you're using HTML5 output, instead of changing the template files, I'd suggest using a jQuery script in the skin that inserts the code you want.

For example, on the skin's Toolbar tab, click Edit to enter the custom Toolbar script:

Code: Select all

$(document).ready(function(){
	$('h1.logo').after('<a href="http://www.madcapsoftware.com" target="_blank" style="position:absolute; right:300px; top:40%;">Test link</a>');
});

That will add a link to that top area above the topic toolbar; it basically finds the header logo h1.logo, then uses jQuery after to add the code (in brackets) after the logo.

This works for HTML5, which uses jQuery. There's quite a lot you can do with jQuery to manipulate the HTML/CSS, without requiring any template changes. It's not actually very hard to learn (I find it easier than javascript), but if you don't fancy it then your web developers should be able to sort it out.

[cayennep]

Thanks so much, Dave! This is brilliant, just had a look with my boss and he explained how/why this would work - basically, that toolbar customization spot is the only place you can put custom code, but it can still apply to the right place.

This will allow me to simply copy the skin to all my projects, instead of editing the text of any flare files, so that's great - we can also solve another issue I was having to modify the output files each time to resolve.

Hope this helps others too, thanks again!

[hillaryfay]

I just wanted to thank you for this information also. It was exactly the answer I was looking for!

[rpendse]

Thanks a lot for this! We needed to add custom logos to our web output and this post really is going to help us nail it.

In Flare 10, can the folks at MadCap make it easier for people to customize the header area?

regards,
Reshma

[NorthEast]

No problem - you might also be interested in this post, which shows how to add a CSS file link to style the header.
http://forums.madcapsoftware.com/viewto ... =6&t=16643

I'll have to write an article on how to modify the standard HTML5 skin.

I agree the skin editor is a bit limited, hence why I've had to resort to using scripting to modify mine.
I also think MadCap desperately need to get a designer to make a handful of different professional-looking skins.