Flare 12 links in masterpage head not getting into topics

ruthhoward · Post by **ruthhoward** » Fri Jul 01, 2016 5:18 am

I've got a masterpage that contains this header:

    <head>
        <link href="content/resources/foundation/css/foundation.css" rel="stylesheet" type="text/css" />
        <link href="../foundation/icons/foundation-icons.css" rel="stylesheet" type="text/css" />
        <link href="../stylesheets/responsive.css" rel="stylesheet" type="text/css" />
        <!--test-->
    </head>

But this generates compiled HTML5 outputs which contains NEITHER the content/resources/path reference NOR the relative links from the location of the masterpage:

Code: Select all

   <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Overview</title>
        <!--test-->
        <link href="../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Tablet.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Mobile.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../resources/stylesheets/accl_help.css" rel="stylesheet" />
        <script src="../../Resources/Scripts/custom.modernizr.js">
        </script>
        <script src="../../Resources/Scripts/jquery.min.js">
        </script>
        <script src="../../Resources/Scripts/require.min.js">
        </script>
        <script src="../../Resources/Scripts/require.config.js">
        </script>
        <script src="../../Resources/Scripts/foundation.min.js">
        </script>
        <script src="../../Resources/Scripts/plugins.min.js">
        </script>
        <script src="../../Resources/Scripts/MadCapAll.js">
        </script>
    </head>

anyone seen this? the links to the files are definitely correct. The commented out "test" line gets in but not the links.

Post by **NorthEast** » Fri Jul 01, 2016 5:30 am

Have you set a master stylesheet in the target and/or project?

In v11 and earlier, I know setting a master stylesheet will remove all other stylesheet links from the output.
I'm not sure whether this still applies for v12 though.

Also, the first of those links look incorrect - it shouldn't have the content folder in the path, it should be a relative link from the master page.

ruthhoward · Post by **ruthhoward** » Fri Jul 01, 2016 5:31 am

Yes, I've got a master stylesheet set too. That's probably the problem then.

Yes, I know the first was wrong, I was trying something out.

Thanks!

ruthhoward · Post by **ruthhoward** » Mon Jul 04, 2016 12:11 am

Dave Lee wrote:Have you set a master stylesheet in the target and/or project?

In v11 and earlier, I know setting a master stylesheet will remove all other stylesheet links from the output.
I'm not sure whether this still applies for v12 though.

Also, the first of those links look incorrect - it shouldn't have the content folder in the path, it should be a relative link from the master page.

I've unset the CSS from the target and made sure that it isn't already in the topic head but I'm still not getting all my stylesheets added. Something somewhere is setting accl_help.css as the master stylesheet as that's getting added but not the others.

topic head

Code: Select all

    <head><title xmlns=""><MadCap:variable name="ProductVariables.Product Name (short)" /> Overview</title>
    </head>

target

Code: Select all

<CatapultTarget
  Version="2"
  Comment="HTML5 Target for HTTP access"
  Type="WebHelp2"
  Destinations=""
  GlossaryTermConversion="marked"
  GetLatestBeforeCompile="false"
  InsertMOTW="false"
  UseCustomTopicFileExtension="false"
  ExcludeUnreferencedContent="false"
  Skin="(none)"
  Medium="non-print"
  MasterToc="/Project/TOCs/main_toc.fltoc"
  ConditionTagExpression="include[Default.ScreenOnly] exclude[Default.PrintOnly] "
  ReplaceSpacesWithUnderscores="false"
  MakeFileLowerCase="true"
  MasterPage="/Content/Resources/MasterPages/Responsive.flmsp"
  DefaultUrl="/Content/HelpTopics/overview.htm"
  MenuSkin="/Project/Skins/BIOVIA_Resp_Menu.flskn"
  SearchBarSkin="/Project/Skins/BIOVIA_Resp_SearchBar.flskn"
  SearchResultsSkin="/Project/Skins/BIOVIA_Resp_SearchRes.flskn">

masterpage

Code: Select all

    <head>
        <link href="../foundation/css/foundation.css" rel="stylesheet" type="text/css" />
        <link href="../foundation/icons/foundation-icons.css" rel="stylesheet" type="text/css" />
		<link href="../stylesheets/responsive.css" rel="stylesheet" type="text/css" />
		<link href="../stylesheets/accl_help.css" rel="stylesheet" type="text/css" />
        <!--test-->
    </head>

output

Code: Select all

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Pipeline Pilot Web Port Overview</title>
        <!--test-->
        <link href="../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Tablet.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../../Skins/Default/Stylesheets/Components/Mobile.css" rel="stylesheet" data-mc-generated="True" />
        <link href="../resources/stylesheets/accl_help.css" rel="stylesheet" />
        <script src="../../Resources/Scripts/custom.modernizr.js">
        </script>
        <script src="../../Resources/Scripts/jquery.min.js">
        </script>
        <script src="../../Resources/Scripts/require.min.js">
        </script>
        <script src="../../Resources/Scripts/require.config.js">
        </script>
        <script src="../../Resources/Scripts/foundation.min.js">
        </script>
        <script src="../../Resources/Scripts/plugins.min.js">
        </script>
        <script src="../../Resources/Scripts/MadCapAll.js">
        </script>
    </head>

PS I'm working on getting a responsive skin with side TOC from http://straygoat-technicalauthor.co.uk/ ... -part-one/ which I think you worked on

very nice!

Post by **NorthEast** » Mon Jul 04, 2016 12:35 am

ruthhoward wrote:
Dave Lee wrote:Have you set a master stylesheet in the target and/or project?
I've unset the CSS from the target and made sure that it isn't already in the topic head but I'm still not getting all my stylesheets added. Something somewhere is setting accl_help.css as the master stylesheet as that's getting added but not the others.

You can set a master stylesheet for the target and/or project - have you checked the project properties?

ruthhoward · Post by **ruthhoward** » Mon Jul 04, 2016 12:42 am

Dave Lee wrote:
ruthhoward wrote:
Dave Lee wrote:Have you set a master stylesheet in the target and/or project?
I've unset the CSS from the target and made sure that it isn't already in the topic head but I'm still not getting all my stylesheets added. Something somewhere is setting accl_help.css as the master stylesheet as that's getting added but not the others.
You can set a master stylesheet for the target and/or project - have you checked the project properties?

BINGO!! Thanks so much! This is going to be a bit of a pest as I think non-responsive HTML5 projects use the project setting to control the master stylesheet so I'm going to have to update all the other targets for those other projects that use this template (and get my team to do the same). Ho hum.

Post by **NorthEast** » Mon Jul 04, 2016 2:42 am

ruthhoward wrote:BINGO!! Thanks so much! This is going to be a bit of a pest as I think non-responsive HTML5 projects use the project setting to control the master stylesheet so I'm going to have to update all the other targets for those other projects that use this template (and get my team to do the same). Ho hum.

Do you just mean that your other projects already use master stylesheets? (Flare itself doesn't care if you use them, whatever the output.)

If that's a problem, then you can still use a master stylesheet, but you'd need to link the others using an @import.

You can have one main stylesheet (set as your master), and include links to all your other stylesheets like this:

Code: Select all

@import url('stylesheet1.css');

@import url('stylesheet2.css');

@import url('stylesheet3.css');

(The url is relative to this stylesheet.)

ruthhoward · Post by **ruthhoward** » Mon Jul 04, 2016 2:47 am

yes it seems that our template project and therefore all other use a master stylesheet set at the project level. of course we can do the CSS linking (in fact I'd already used that to make things work but wanted to understand why the content of the master page wasn't working)

I'm having enormous fun (!) trying to get rid of the margins around the whole content now and persuading my custom font to show up. I'm using all the standard things for the fonts but I think one of my developers will be able to help.

Do you know what style is controlling the margins? I can see using FF developer plug in that div class="off-canvas-wrapper" has the margins but I don't see where or in which style sheet its set. Any ideas? (asking you Dave as StrayGoat credits you with the solution)

Post by **NorthEast** » Mon Jul 04, 2016 3:19 am

ruthhoward wrote:yes it seems that our template project and therefore all other use a master stylesheet set at the project level. of course we can do the CSS linking (in fact I'd already used that to make things work but wanted to understand why the content of the master page wasn't working)

I'm having enormous fun (!) trying to get rid of the margins around the whole content now and persuading my custom font to show up. I'm using all the standard things for the fonts but I think one of my developers will be able to help.

Do you know what style is controlling the margins? I can see using FF developer plug in that div class="off-canvas-wrapper" has the margins but I don't see where or in which style sheet its set. Any ideas? (asking you Dave as StrayGoat credits you with the solution)

Check the top nav skin, Styles > Global > Main page. Check the padding, and also size > maximum width which limits how wide the topic can get (e.g. you can set this to 100% to be unrestricted).

In my projects I've started putting everything inside my master page in a div, e.g. div.topic_container, and setting any padding or whatever on that.
I think the topic container is section.main-section in the top nav output, but this saves trying to remember what it's called.

ruthhoward · Post by **ruthhoward** » Mon Jul 04, 2016 3:22 am

Dave Lee wrote:
Check the top nav skin, Styles > Global > Main page. Check the padding, and also size > maximum width which limits how wide the topic can get (e.g. you can set this to 100% to be unrestricted).

In my projects I've started putting everything inside my master page in a div, e.g. div.topic_container, and setting any padding or whatever on that.
I think the topic container is section.main-section in the top nav output, but this saves trying to remember what it's called.

turns out I'm far too quick to ask questions! I'm re-purposing an existing project so using a CSS that had right/left margins for tripane body which was therefore filtering thru to the topnav layout. I've just overridden it by adding margin:0 to body in my responsive.css (which is called after my corporate one) so that my corporate CSS works for both standard tripane and top nav outputs.

PS thanks for the speedy responses

ruthhoward · Post by **ruthhoward** » Thu Aug 02, 2018 8:51 am

I'm currently battling this again because it seems that Edge on Windows 10 x64 1709 doesn't load linked CSS files on FILE protocol:

https://developer.microsoft.com/en-us/m ... /17981647/

so linking my CSS together doesn't work and trying to load them all individually into the topic head through the master page doesn't work either

Post by **NorthEast** » Thu Aug 02, 2018 9:52 pm

ruthhoward wrote:and trying to load them all individually into the topic head through the master page doesn't work either

You can have stylesheet links in the master page - just make sure that you select the Allow local stylesheets option in the target settings, otherwise they're removed from the output.

ruthhoward · Post by **ruthhoward** » Fri Aug 03, 2018 12:10 am

by "doesn't work", I mean that I think there's a bug somewhere with my custom miniTOCproxy styles. With the CSS specified in the target and other CSS linked from it I get a Topic.css file containing this (my custom miniTOC style is called MS and is defined in a linked CSS):

Code: Select all

div.MCMiniTocBox_MS_0
{
	border-top-width: 1px;
	border-top-style: none;
	border-top-color: black;
	padding-top: 0px;
	margin-top: 0px;
	padding-left: 10px;
	font-weight: normal;
	color: #1269c3;
	font-size: 11pt;
	text-decoration: underline;
	line-height: 12px;
	font-style: normal;
}

If I remove the target CSS spec and unlink the CSS files but include them all in my master page (where the custom miniTOC style is defined in the second CSS listed in the master page), Topic.css contains this instead:

Code: Select all

div.MCMiniTocBox_MS_0
{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: black;
	padding-top: 10px;
	margin-top: 10px;
	padding-left: 20px;
}

So I'm getting a black top border which looks awful.

I can't check allow local stylesheets because its greyed out when I don't specify a target CSS.

Post by **NorthEast** » Sun Aug 05, 2018 11:48 pm

ruthhoward wrote:So I'm getting a black top border which looks awful.

This is one of Flare's "gotchas" that's been there for years, and is a bit annoying.

Flare adds this border by default - it automatically adds styles for several of the proxies (miniTOC, breadcrumbs, etc.), although you won't actually see them in the (source) stylesheet CSS.

If you look at the miniTOC styles in Flare's stylesheet editor, and look at set properties, you'll see there's a black top border defined. Set the border style to none to override it.

MadCap Software Forums

Flare 12 links in masterpage head not getting into topics

Flare 12 links in masterpage head not getting into topics

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic

Re: Flare 12 links in masterpage head not getting into topic