Possible to modify Navigation Panel border width?

techwriter31 · Post by **techwriter31** » Mon Jun 24, 2013 10:43 am

Hi all,

I'd like to modify the width of the navigation panel border. Flare provides the option of modifying the very outer border, but I'd like to modify the larger border surrounding the navigational panel. Is this possible?

TabBorderWidth.png

Thanks!

Thomas Tregner · Post by **Thomas Tregner** » Wed Jun 26, 2013 9:08 am

Yes you can. But you have to go outside of Flare and the change will affect any HTML5 output from that installation of Flare. You can modify the CSS used by the skin. It is located in the installation folder for Flare. I'm offering no guarantees on side effects or behavior in all browsers with the explanation below. But this will get you started on how to accomplish what you want.

Here is the folder if Flare is installed to the default location:
C:\Program Files (x86)\MadCap Software\MadCap Flare V9\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets\Styles.css

Always back up the CSS when you do something like this. You may want to reset it to the original state. You may have to run as an administrator to change things in that folder.

In this case, the border is actually the background for the div with class tabs-panel. The reason it appears is because the content inside, a div with class tabs-panel-content has padding. If you change the padding, the apparent border will change.

On my installation, the tabs-panel-content style starts at line number 451in Styles.css. To test, I changes the values for top, right, and left to 1px and padding to 1px 1px 0 1px.

Code: Select all

            .tabs-panel-content
            {
                background-color: #FFF;
                border: solid 1px #E1E1E1;
                border-bottom: none;
                position: absolute;
                top: 1px;
                right: 1px;
                bottom: 0;
                left: 1px;
                padding: 1px 1px 0 1px;
                overflow: auto;
            }

techwriter31 · Post by **techwriter31** » Wed Jun 26, 2013 2:38 pm

Darn, I was hoping there was a way to do this that didn't require any post-processing or changes to the installation of Flare. Thanks for providing this workaround!

I have filed an enhancement request with MadCap.

Thanks!

Post by **NorthEast** » Thu Jun 27, 2013 12:31 am

It is possible to make the skin modifications inside a Flare project.

To do this for a HTML5 target, you can use the skin's toolbar script to add a link to a new stylesheet (CSS) file, which contains the skin modifications.

In the skin editor Toolbar tab, you can enter your own custom javascript (on the right).

I use the following jQuery* script to add a stylesheet link to my own stylesheet (skin.css). Note the CSS file could be anywhere inside the Content folder. (*jQuery is already used by HTML5 help, you don't need to include it.)

Code: Select all

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

(Edit: Updated this code 15/11/2013, this is a better way to add the link.)

Then I create the stylesheet skin.css, and include any modifications like those shown above.

---

To understand how this works, the script adds the link to skin.css to the head section of the main output file (Default.htm, Default_CSH.htm), and because it comes after Flare's own CSS files, anything in your CSS file will overwrite the default skin settings.

Code: Select all

<head>
...
<link href="Skins/Default/Stylesheets/Styles.css" rel="Stylesheet">
<link href="Skins/Default/Stylesheets/TextEffects.css" rel="Stylesheet">
...
<link type="text/css" href="Content/Resources/Stylesheets/Skin.css" rel="stylesheet">
</head>

Thomas Tregner · Post by **Thomas Tregner** » Wed Jul 03, 2013 9:44 am

Dave's approach to adding styles to a skin is probably better than modifying the source.

Here are a few additional notes:window.onload is incorrect. My test was

Edit: This first highlighted note is wrong. See Dave's reply.

Something has to run the jQuery script. One way to do that is:

Code: Select all

window.onload = function(){$('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/extra-skin.css" type="text/css" />');}

Assigning something to window.onload should only be done once. If that is already in Toolbar JavaScript, append Dave's script to the end of the anonymous function. If you add another, the value of window.onload will only be the last assignment.[/color]

If Advanced > Output Options > Exclude content not linked directly or indirectly from the target is selected, you will have to additionally link the stylesheet somewhere for it to be included. For example you can link to it from the master page or create a stylesheet link on the topic stylesheet.

If Do not use "Content" folder in output is selected, you will have to change the path in Dave's sample to Resources/Stylesheets/skin.css.

The CSS sample in my previous reply should work out-of-the-box to override the style in the skin CSS. You can place that in a blank CSS named and located as Dave specified.

Post by **NorthEast** » Wed Jul 03, 2013 11:59 pm

Thomas Tregner wrote: Something has to run the jQuery script. One way to do that is:
Code: Select all
window.onload = function(){$('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/extra-skin.css" type="text/css" />');} 

No, you don't need to do this - the example I provided works fine without any additional steps. Try it out.

As mentioned, the jQuery script should be entered on the skin Toolbar tab, which means Flare will already include and run this script in the output (the script is placed in a file named Toolbar.js file, which is linked to by Default.htm).

Thomas Tregner · Post by **Thomas Tregner** » Thu Jul 04, 2013 4:44 am

Dave Lee wrote:No, you don't need to do this

I tried it again and it worked as Dave described. I had checked the wrong output when I tested it. Thanks Dave!

techwriter31 · Post by **techwriter31** » Mon Nov 18, 2013 4:37 pm

Thanks to you both for this information! I finally implemented the "skin.css" method that Dave describes.

I was able to modify the padding for the navigational panel and that worked! However, I originally wanted to modify this border width, with the hope of creating more separation between the navigational panel on the left and the body content on the right. We've got a background gradient for the header, a different background gradient for the topic container and a very mild gradient for the navigational panel. With the default settings, it can look a bit "busy" as it appears as three bands of color. Here's an example of the Flare 9 help. It has the same issue, but the colors are more subtle than ours, so not as noticeable.

notextended.png

I was able to modify my skin.css file to extend the left side of the body and extend the size of the show/hide navigational button to stretch. I then rounded the corner of the navigational panel and extended the width of the navigational resize bar so users can hover over the entire area and see the icon to drag it. Here's the code I used:

Code: Select all

html.left-layout #contentBody
{
	left: 315px;
}

html.left-layout #show-hide-navigation
{
	width: 19px;
}

.tabs-panel
{
	-webkit-border-radius: 0 3px 3px 0;
}

#navigationResizeBar 
{
width: 20px;
}

Once modified this area appears as:

extended.png

However, if the user grabs & drags the navigational panel by using the resize bar, the appearance is reset to the default appearance until the page is reloaded. Is there a workaround for this to force these settings to stick?

Any help is greatly appreciated!

figurnov · Post by **figurnov** » Mon Nov 18, 2013 6:43 pm

techwriter31 wrote:However, if the user grabs & drags the navigational panel by using the resize bar, the appearance is reset to the default appearance until the page is reloaded. Is there a workaround for this to force these settings to stick?

The width of the gap between navigation and topic panes after dragging is set by the MadCapAll.js script.

$("#contentBody").css(ai,(aj+5)+"px") -- here 5 is the default gap width.

You can patch the MadCapAll.js script and change "5" to the value you want.

techwriter31 · Post by **techwriter31** » Wed Dec 04, 2013 5:08 pm

figurnov wrote:The width of the gap between navigation and topic panes after dragging is set by the MadCapAll.js script.

$("#contentBody").css(ai,(aj+5)+"px") -- here 5 is the default gap width.

You can patch the MadCapAll.js script and change "5" to the value you want.

Thanks figurnov! I tried manually modifying the MadCapAll.js script within the output folder on both my local PC and the published output on the server, and could not get it to work.

Is it possible to automate this, using the Custom JavaScript Toolbar option in the skin file? I attempted to use this method as well, but was unsuccessful...but most likely due to user error on my part!

MadCap Software Forums

Possible to modify Navigation Panel border width?

Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?

Re: Possible to modify Navigation Panel border width?