Is there a guide to editing custom skins to create my own?

[sanjsrik]

I'd like to take a custom skin that comes with Flare and do some customizations of my own:

move the search bar into the topic window from above the topic window
support typeahead in search

How do I customize the custom skin not just change colors and such, but is there a guide that talks about how to edit the Catapult Skin files and what each means?

Does MadCap offer the ability to create custom skins? Do they charge for this?

Thank you in advance.

[Paulie]

Hi there,

This should get you started...

http://docs.madcapsoftware.com/FlareV11 ... sGuide.pdf

For the things that are not covered in the abovementioned guide, this forum is a pretty good reference. I know that Dave has shared a lot of information about how to perform some of the more advanced custom tweaks.

[NorthEast]

move the search bar into the topic window from above the topic window

You can do this by using a search bar proxy (skin component).
If you look at Flare's top nav project template, the search box on the home page is a search bar proxy.

[sanjsrik]

@Dave Lee:

The searchproxy is rejected in the leftnav skin. I tried to insert it into the home page master page and it is rejected by the compiler with the following error message:

ID: 70007 - The search bar proxy is not supported for HTML5 Tripane output and will be removed

I had chosen the top-nav first and it seemed no issue at all but the company's UXD department wants the tripane view and so this is what I have to use. How do I get the searchbar proxy into the homepage.flmsp file and not have it rejected?

Thanks in advance.

[NorthEast]

@Dave Lee:

The searchproxy is rejected in the leftnav skin. I tried to insert it into the home page master page and it is rejected by the compiler with the following error message:

ID: 70007 - The search bar proxy is not supported for HTML5 Tripane output and will be removed

I had chosen the top-nav first and it seemed no issue at all but the company's UXD department wants the tripane view and so this is what I have to use. How do I get the searchbar proxy into the homepage.flmsp file and not have it rejected?

Thanks in advance.

Sorry, I just assumed you were using the top nav skin - the search bar proxy (and other skin components) can only be used with the top nav skin, you cannot use it with the tripane skin.

[sanjsrik]

Thanks Dave,

is there any way to move the search bar into the topic in the sidenav tripane view? I can't use the search bar proxy, fair enough, are there any other options?

[sanjsrik]

Follow-up question. I'm trying the "no skins" approach and in my HomePage.flmsp, this is what I have to try to recreate some navigational elements as per the UXD requirements (from top to bottom, I have included):

menu proxy
breadcrumbs proxy
search bar proxy - using the sidemenu skin with the master TOC I have assigned to the project and 4 levels of depth indicated, I have all the options for this checked as well
topic body proxy

footer elements

I figured out that this only shows up when a topic is shown. Which is fine, but now the TOC links are at the top. What UXD is requiring is that the TOC is in the left nav. Is there any way to show the menu proxy in the left nav? If I can do this one thing, the UXD requirements would be met.

Thank you in advance.

[NorthEast]

Thanks Dave,

is there any way to move the search bar into the topic in the sidenav tripane view? I can't use the search bar proxy, fair enough, are there any other options?

No, you can't move it.

If you really need to do this, you can create your own search box - if you know some javascript.

I did produce an example a while ago, but can't find it, but can describe roughly what to do:
Create an input box, then use the string entered by the user in a CSH call back to the help itself.
For example, this link opens the Flare 10 help (HTML5 tripane) with the search term "CSH":
http://webhelp.madcapsoftware.com/flare10/Default_CSH.htm#&searchQuery=CSH
As the topic is inside a frameset, you'd open that in the parent (or top) window.

If you can't use an absolute path to your help, you can find the relative path from the current topic using the data-mc-path-to-help-system property on the html tag .

[NorthEast]

I figured out that this only shows up when a topic is shown. Which is fine, but now the TOC links are at the top. What UXD is requiring is that the TOC is in the left nav. Is there any way to show the menu proxy in the left nav? If I can do this one thing, the UXD requirements would be met.

You can place the menu proxy anywhere on the page using CSS; e.g. in the Flare template, the menu proxy is floated on the right.

So if you want it on the left, then just create a container (e.g. div tag) which is positioned or floated on the left, and put the menu proxy inside that.

[devjoe]

Actually, you can move the search bar, but you have to add CSS into the skin, because the search bar is part of the skin.
Following tips from this forum, I created skin.css in my Content folder containing, among other things:
div.search-bar
{
position: fixed;
top: 19px;
}

(In my help, we collapsed the logo/search bar completely using regular skin settings, so this placement put the search bar into the topic toolbar area. You will need to adjust the spacing to wherever you want it to appear, based on the sizes of elements of your skin and/or topics.)

To make this CSS active for skin objects, you have to insert it into the skin using a little jQuery which you add in the Custom JavaScript to include in Toolbar page box on the Toolbar tab of the skin editor:

$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'Content/skin.css');

[sanjsrik]

Thanks Dave, I spent about an hour with the Flare customer support rep and he helped me create a master page that could be applied to all my topics. The downside, since it's not a skin, it isn't responsive. In the end, I ended up going back to the tripane left-TOC skin and altering the base styles.css file in the application (yes, that's unsupported) and got most of the functionality that the UXD folks want, can't move the search box but that's another day.

[NorthEast]

Actually, you can move the search bar, but you have to add CSS into the skin, because the search bar is part of the skin.

I know it's possible to use scripting to copy the HTML from the root help file (Default.htm) into the topic, and duplicate the CSS in your own file.
What I was more concerned about whether MadCap's back-end javascript would work fully - does everything work ok? e.g. search filters, search CSH queries.

In the end, I ended up going back to the tripane left-TOC skin and altering the base styles.css file in the application

You don't need to modify the CSS in the application program folder; you can add your own CSS to a skin using the skin toolbar script.
I've described this in a blog post: https://ukauthor.wordpress.com/2014/08/08/customising-the-flare-html5-skin/