Tripane Nav Radius - Solved

[kwag_myers]

Flare 12, HTML5 Tripane

I'm trying to set the top-right radius of the navigation pane, but I'm unable to find the setting. I have the tab settings at zero and here's the output:

tripaneNavRadius.png

I've tried using the Navigation Panel Border settings, but for some reason there is no response to the settings in the Skin Editor.

I would either like to remove the radius from the Topic pane, or (preferably) add radius to the top-right corner of the Navigation pane. I tried displaying the tab and setting the width to 300px, which is perfect in the Skin Editor. But the output reverts to a smaller width for some reason. In fact, anything over 295px does not work.

I've also tried adding several styles to the CSS, to no avail. What's frustrating is that I can get the desired results in the Browser's Inspector, but when I add the style to the CSS, it doesn't show in the output.

Remedy: I ended up implementing Dave Lee's suggestion of adding a stylesheet to the skin and added the following styles:

Code: Select all

/*Set Header background color separate from Main Page background*/
#header 
{
	background-color: #1CBDFF;
}

/*Remove the Hide Arrow*/
#show-hide-navigation
{
	display: none;
}

/*Adjust the TOC panel to line up with the Content panel*/
#toc.tabs-panel-content
{
	margin-top: 3px;
}

With the Main Page background color the same as the border colors for each pane, there is no border radius - problem solved.

[asbahr+]

Adding this to a skins.css seemed to fix radius for me.

html.left-layout #contentBody
{
-webkit-border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
border-radius: 0px 0 0 0;

}

To resolve the issue I had to override the default Flare skin settings by importing my own css. Here is how I did it:

1. Opened my stylesheet (properties/stylesheets/scribes.css) and added this directive near the top of the file:
@import url('skins.css');
2. Created skins.css stylesheet (properties/stylesheets/skins.css) with the style shown above, plus this style to suppress a double scrollbar issue I was having.
#contentBodyInner
{
overflow: unset;
}
3. In Flare, opened the skin editor on my Tripane skin and added this javascript in my toolbar page:
$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'properties/stylesheets/skins.css');
4. Built the project, and double-scrollbar is gone and radius problem is solved.

NOTE: I use a properties folder instead of a resources folder to prevent other issues. In your case you may be using a Resources folder.