Export/access to skin

[aharper]

Hi everyone,

I'm a Flare newbie, using version 7.2.0. I'd like to send my projet's skin to our web designer to make it look the way it should to match our product. However, all I have found so far is the skin editor built into Flare. Is there a way to export it as a css so my web designer can just update it and send it back to me for import? Or do you need to be working in Flare to customize the skin?

Thanks,
Adriana

[LTinker68]

You're going to want to do it in Flare.

[aharper]

Thanks Lisa. In that case, I've attached a screenshot (with information removed) b/c I cannot for the life of me get a few particular spots to work properly:

1.png

A: I can't seem to make that entire top piece, from behind the accordion header to all the way across to the right a consistent color. The grey gradient always remains and all I can do is make the accordion header white or a different background color.

B: How do I make the highlighted TOC reference a different color? Its a pale grey right now and you can barely tell what you have selected.

C: Is there a way I can hide this white box? I only want the TOC, Index, and Search to show up (just three accordion items). I have tried setting Webhelp Setup > Visible According Items to 3, but this one with the blank white box still shows up at the bottom.

Many thanks in advance,
Adriana

[lacastle]

A - do you want the gradient? you can set the background color for the AccordionTitle in the ToolbarItem section of the Skin styles. it doesn't look like you can make it a gradient though. to take off the gradient from the rest of the toolbar, change the style option for the BackgroundGradient in Skin> Styles > Frame > Toolbar. (it must be possible, though, because the sample screenshot in the skin shows the gradient. maybe someone else knows about that)
B - see this topic: http://forums.madcapsoftware.com/viewto ... f=6&t=9298
C - the bottom isn't another accordion item, but rather where little icons would display if you manually made your accordion rows show less than the default amount. it is called the IconTray, and you would set the background color there like the other accordion items.

[aharper]

Thank you Laura! I will start with these items and report back.

Adriana

[aharper]

Thanks Laura - all of your tips worked great.

I have a few more questions for anyone out there:

I am curious about javascript needed to add a logout button. I added the button to the Webhelp toolbar, and under Styles > Toolbaritem > Logout I added the logout icon, set it as ControlType > Button. Under OnClick I think I'd need some javascript. Do you know what I might use?

I'd like to change the color used to highlight words in the body based on the search result. Is that also done similar to how the colors used to highlight the TOC were changed (the MadcapAll.js file)?

Icons that I got from my webdesigner that have a transparent background but they are showing up with a white box behind them in the Toolbar (screenshot attached). I am generating a Webhelp output in Firefox. Does anyone know how to fix this?

Lastly, when I click on a TOC item that is too long to be shown in it's entirety in the sidebar navigation, the navigation automatically scrolls over to the right to show the whole name. Is there a way to set it so that it doesn't automatically scroll to the right if a user clicks on a topic that has a long name?

Thanks,
Adriana

[NorthEast]

I am curious about javascript needed to add a logout button. I added the button to the Webhelp toolbar, and under Styles > Toolbaritem > Logout I added the logout icon, set it as ControlType > Button. Under OnClick I think I'd need some javascript. Do you know what I might use?

I'm a bit confused by that one; what is it you are logging out of?

I'd like to change the color used to highlight words in the body based on the search result. Is that also done similar to how the colors used to highlight the TOC were changed (the MadcapAll.js file)?

This is covered in the help:
http://webhelp.madcapsoftware.com/flare ... _Terms.htm

Icons that I got from my webdesigner that have a transparent background but they are showing up with a white box behind them in the Toolbar (screenshot attached). I am generating a Webhelp output in Firefox. Does anyone know how to fix this?

Try placing the icon in a topic on top of a coloured background, and check that it is actually transparent.

If it definitely is transparent, but you're still getting a white background in the skin, check that you haven't set the BackgroundColor property for the skin icon.

[aharper]

Thank you - I'll try the link you sent me for the search term highlight and I'll check my icons against a colored background topic.

Re. Logging out: the webhelp is only available inside our application, accessed one a user logs in.

Adriana

[NorthEast]

Re. Logging out: the webhelp is only available inside our application, accessed one a user logs in.

Presumably you have a developer that is working on the application login/logout; only they can tell you how to incorporate the logout in your help, if that's what you want to do.

From what you've said though, assuming that you login from the application, I would have thought that it would make sense to also logout from the application; rather than have a logout feature in the WebHelp.

[aharper]

Thanks Dave - I agree. I've passed that one along to my developers for now.

Does anyone know how to make the default width of the table of contents wider?

Thanks,
Adriana

[lacastle]

Does anyone know how to make the default width of the table of contents wider?

it is in the skin properties under WebHelp Setup

[aharper]

You are fast, Laura! Thank you!

Adriana

[aharper]

My apologies to all - but I continue to not be able to figure things out in my webhelp output.

Breadcrumbs - I want the part in the middle to be the same blue and size as the other parts of the breadcrumbs. The black in this screenshot is what I'm trying to change and I'd also like to add some space below the breadcrumb:

1.png

Mini TOC: I would like to make a few changes that I can't seem to get working.
1- always blue text (visited is black - but I don't see visited option under the styles for pMiniTOC1
2- add some leading text before the list: For more information, see: - but I don't know how to add text to the proxy?
3- reduce space between items listed in the mini toc

2.png

Footnote popup size: How do I set it so that the footnote popup window size in my online help is consistent? And in some instances I have xrefs in my footnote popups in the online help - they are not xrefs in the popup. Can I update that?

Thanks to all,
Adriana

[LTinker68]

For breadcrumbs, I manually added the link states to the stylesheet. You might be able to do that through the GUI now (I'm not running Flare at the moment to check), but when I first started doing it you couldn't so they had to be added manually. Then in v6 or v7, they changed the resolved link style, so I had to rename the styles to match. In older versions of Flare, you'd create a.MCBreadcrumbsLink:link, a.MCBreadcrumbsLink:visited, and so on. In v6 or v7, whenever it changed, the style names need to change to a.MCBreadcrumbsLink_0:link, a.MCBreadcrumbsLink_0:visited, and so on. For spacing below the breadcrumbs, you'd want to add margin-bottom or padding-bottom attributes to the MadCap|breadcrumbsProxy style in the Stylesheet Editor.

For the mini-TOC, you'd probably also have to manually add the missing pseudo-classes to the stylesheet file, but they wouldn't be under the p.miniTOC1 style, they'd be under the <a> tag. So they'd be a.MiniTOC1:link or a.MiniTOC1_0:link and so on, depending on which version of Flare you have. For the "See", you can add that as an mc-auto-number-format to the div.MCMiniTocBox or div.MCMiniTocBox_0. If you created a class, then the div name would be different. For instance, I have a mini-TOC proxy class called howDoI that adds "In this section: How do I..." to the div. You also need an accompanying span class to style it. For example:

Code: Select all

div.MCMiniTocBox_howDoI_0
{
	mc-auto-number-class: miniTocBoxTitle;
	mc-auto-number-format: 'In this section: How do I...';
}
span.miniTocBoxTitle
{
	font-weight: bold;
	color: #b88932;
}

You'd set your spacing before and after the mini-TOC in the same div. For spacing between items in the mini-TOC, you modify the p.MiniTOC1, p.MiniTOC2, etc., by adding margin-bottom or padding-bottom. (Or margin-top or padding-top if you prefer.)

I don't deal with footnotes so I don't know what styles are applicable, but as a general rule of thumb, if you generate the WebHelp output, then look at the source code for the topic in the browser, you can see what styles Flare uses to build the effect. Which may or may not work for footnotes, now that I think about it -- I don't know what Flare does for footnotes in WebHelp output.

[aharper]

Thank you Lisa,

Your advice for the breadcrumbs worked really well and I managed to edit my footnote style in the CSS. It appears as though the default for Flare footnotes in online help is for them to be a pop-up when the footnote is clicked and then you can set the width/height (etc) of that window.

I am still working on the mini-tocs

Adriana