Add Custom Content to Header

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Evetsm
Propeller Head
Posts: 90
Joined: Wed Apr 30, 2014 8:32 am

Add Custom Content to Header

Post by Evetsm »

Hi,

I'm a newbie with Flare 10. I would like to add custom content to the header area:
My company's logo
Some Text
Some Links

Can anyone provide advice on the best way to do this? I was thinking of creating some kind of post processing step that would add the content. I believe I might also have to set the logo image to "none" in the skin editor.

Thanks!
Steve
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

Flare doesn't provide any options in the skin to add content to the header area, such as text or links.

However, I use a technique to modify the header area in HTML5 outputs, which doesn't require any post-processing steps.
I use the skin's toolbar script option to include some jQuery script, which inserts content in the header area.

For example, on the skin's Toolbar tab, click Edit (on the right) to enter the custom Toolbar script:

Code: Select all

$(document).ready(function(){
	$('#header>a').after('<a href="http://www.madcapsoftware.com" target="_blank" style="position:absolute; right:300px; top:40%;">Test link</a>');
});
(Edited code example)

That will add a link to that top area above the topic toolbar; it basically finds the header logo h1.logo, then uses jQuery after to add the code (in brackets) after the logo.

This works for HTML5, which uses jQuery. There's quite a lot you can do with jQuery to manipulate the HTML/CSS, without requiring any template changes. It's not actually very hard to learn (I find it easier than javascript), but if you don't fancy it then your web developers should be able to sort it out.


It's also likely that you might want to style the content you place in the header area using a stylesheet.

To do this, I use this code (also in the toolbar script, as above) to add a stylesheet link to my own stylesheet (skin.css). Note the CSS file could be anywhere inside the Content folder.

Code: Select all

$('<link>')
  .appendTo($('head'))
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', 'Content/Resources/Stylesheets/skin.css');
Then I create the stylesheet skin.css, and include the styles for the elements I've added to the header area.
Evetsm
Propeller Head
Posts: 90
Joined: Wed Apr 30, 2014 8:32 am

Re: Add Custom Content to Header

Post by Evetsm »

Thanks, Dave.

That's absolutely amazing. I will give that a try.

Thanks again.
Steve
Evetsm
Propeller Head
Posts: 90
Joined: Wed Apr 30, 2014 8:32 am

Re: Add Custom Content to Header

Post by Evetsm »

Dave,

I'll need a little more hand holding as I learn more about that part of the page.

I attempted to insert an image and then some text. In the output they were both rendered as links. For the image that's fine, but I need the text to be plan text. (I will add styles later via CSS.)
Here is the code I used:

Code: Select all

$(document).ready(function(){
	$('h1.logo').after('<img src="myImage.jpg" height="42" width="42">   <span id="productName">Product Name</span>');

});
Can you advise on how I make "Product Name" plain text?

Thanks,
Steve
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

Yep, that's probably adding the content inside the logo's link, rather than after it.

Try this instead:

Code: Select all

$(document).ready(function(){
	$('#header>a').after('<img src="myImage.jpg" height="42" width="42">   <span id="productName">Product Name</span>');

});
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Add Custom Content to Header

Post by kathryngz »

I found this post and thought it was exactly what I wanted... until I opened Flare's new frameless skin and found that the Toolbar tab has disappeared!
flare_html5_frameless_skin.png
Is anyone aware of a way I can still add jQuery to the skin? I'm comfortable doing that, if I just know where to do it :)

Thanks!

Kathryn
You do not have the required permissions to view the files attached to this post.
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Add Custom Content to Header

Post by kathryngz »

Update: I just found a post that may have the answer:
viewtopic.php?f=13&t=20922

I promise I looked and didn't see this one before <wry grin>. I'll post an update after I try the solution.

Kathryn
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Add Custom Content to Header

Post by techwriter31 »

kathryngz wrote:Is anyone aware of a way I can still add jQuery to the skin? I'm comfortable doing that, if I just know where to do it :)
You can add it to the new Flare 11 Toolbar skin file. On the Setup tab of the Toolbar skin is the "Custom JavaScript to include in Toolbar page" option.
Kellie
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Add Custom Content to Header

Post by kathryngz »

You can add it to the new Flare 11 Toolbar skin file. On the Setup tab of the Toolbar skin is the "Custom JavaScript to include in Toolbar page" option.
Kellie, thanks! Unfortunately, the Toolbar tab doesn't appear to be included in the frameless skin.

However, I played with solutions from several other posts (viewtopic.php?f=13&t=20922 and viewtopic.php?f=9&t=16714), and here's what I ended up with.

1. In the skin, I removed the logo image completely.
2. In the master page, I included the following jQuery just below the opening body tag:

Code: Select all

 <script type="text/javascript">
$(document).ready(function(){
// add div for header text
$("a.logo").after('<div class="title"><p>MY HELP SYSTEM</p><p>Help for Admins</p></div>');
});
</script>
(I originally put the script in the head tag, but when help was compiled it ended up before the reference to jquery.js, so of course it didn't work).

I'm going to play around with populating the second <p> tag with variables. But essentially I got what I needed: the ability to use text in the help header.

Kathryn
Last edited by kathryngz on Tue Oct 06, 2015 5:23 pm, edited 1 time in total.
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Add Custom Content to Header

Post by techwriter31 »

Glad it's working! Sorry, my previous post wasn't very clear.

You're right; this tab is not available in the new "Top Nav" skin. You have to create a new, separate "Toolbar" skin file in your project and then you can access the Setup tab in the Toolbar skin file that has the "Custom JavaScript to include in Toolbar page" option. After creating the Toolbar skin, you have to specify this skin from your target file (> Skin tab > Component Default Skins > Topic Toolbar).
Kellie
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

techwriter31 wrote:Glad it's working! Sorry, my previous post wasn't very clear.

You're right; this tab is not available in the new "Top Nav" skin. You have to create a new, separate "Toolbar" skin file in your project and then you can access the Setup tab in the Toolbar skin file that has the "Custom JavaScript to include in Toolbar page" option. After creating the Toolbar skin, you have to specify this skin from your target file (> Skin tab > Component Default Skins > Topic Toolbar).
No, if you're using the top nav skin, then you just add your script directly to your master page or topic - Kathryn is on the right track.

The skin toolbar script is only for tripane HTML5 skins, not the top nav skin. In a tripane output, the skin toolbar script is run by the file Default.htm, which is the skin container with the header, toolbar and navigation. But the top nav output is frameless (there's no skin container), so you just add scripts directly to your master page or topic.
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Add Custom Content to Header

Post by techwriter31 »

Dave Lee wrote:No, if you're using the top nav skin, then you just add your script directly to your master page or topic - Kathryn is on the right track.

The skin toolbar script is only for tripane HTML5 skins, not the top nav skin. In a tripane output, the skin toolbar script is run by the file Default.htm, which is the skin container with the header, toolbar and navigation. But the top nav output is frameless (there's no skin container), so you just add scripts directly to your master page or topic.
Thanks for the clarification Dave! Interesting; when I contacted MC Tech Support, I asked this exact question:
it appears that the top nav skins do not include a Custom JavaScript toolbar. What is the best method to now enter JS for our outputs? Should this be included in the master pages now as well?
Their response was:
Create a master page with a topic toolbar proxy and assign it in the Advanced tab of the target -Add a Topic Toolbar HTML5 skin component to the skins folder -Add the Javascript in the Setup tab of the Topic Toolbar component -In the HTML5 skin editor, in the Skin tab assign the Topic Toolbar component -Save and rebuild the target
However, I've been doing a lot of tests lately using Flare 11+Tripane and Flare 11+TopNav and had mixed results. I've found that certain scripts that used to work in my Tripane skin no longer function and had to be added to a separate Toolbar skin, while others do still function properly in the tripane skin and could be left there. I've also found that certain scripts were no longer needed for the TopNav, so I didn't need to include them in the Toolbar skin, but did end up adding one to my master page as it didn't work with the Toolbar skin (which corresponds with what you're saying).
Kellie
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

techwriter31 wrote:Thanks for the clarification Dave! Interesting; when I contacted MC Tech Support, I asked this exact question:
it appears that the top nav skins do not include a Custom JavaScript toolbar. What is the best method to now enter JS for our outputs? Should this be included in the master pages now as well?
Their response was:
Create a master page with a topic toolbar proxy and assign it in the Advanced tab of the target -Add a Topic Toolbar HTML5 skin component to the skins folder -Add the Javascript in the Setup tab of the Topic Toolbar component -In the HTML5 skin editor, in the Skin tab assign the Topic Toolbar component -Save and rebuild the target
Yep, looking at the toolbar skin, it will work, but it means you'd have to include a topic toolbar proxy in your topics even if you didn't want one. That makes sense if the script itself is actually used in the toolbar, but here we're just modifying the header.

If you put your script in the topic toolbar component skin, and then add the topic toolbar proxy to the master page; the end result is that Flare will create a js file with your script, and add a link to it in the head section of the topic.

My suggestion is that you can just create your own script file and link to it from your master page - you don't need to mess about with the toolbar.
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: Add Custom Content to Header

Post by AlanKearns »

I'm trying to move from a design which originally had a custom logo in tri-pane HTML5 help, to some custom text as per this thread. As you know, the default Flare behaviour is that the logo is to the left in tri-pane view, and centred when the browser is shrunk to tablet or mobile width.

I first took Kathryn's suggestion of turning off the logo in the skin, then put something based on Dave's suggestion in the Toolbar | Jscript dialog box:

Code: Select all

$(document).ready(function(){
   $('#header>a').after('<p class="SkinTitle">Maintitle <span class="SkinSubtitle">subtitle</span></p');
});
and styled the text Dave's way, in terms of font, colour, size and margins.

It worked for tri-pane help, but when the browser width is shrunk to mobile/tablet width, the custom text disappears. I'd be grateful for suggestions on making the custom text behave like the default logo, that is to display across all three views.

I'm hoping to avoid the workround of bitmapping multiple text blocks or turning off responsive view.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

AlanKearns wrote:It worked for tri-pane help, but when the browser width is shrunk to mobile/tablet width, the custom text disappears. I'd be grateful for suggestions on making the custom text behave like the default logo, that is to display across all three views.
I've written some instructions on how to do this for the tri-pane skin, with an example project.

You can find it here - there's a section on how to add text to the main header (desktop medium) and responsive header (tablet/mobile mediums).
http://ukauthor.esy.es/SkinMods/Default.htm#Add-Header.htm
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

Re: Add Custom Content to Header

Post by AlanKearns »

Thank you so much!
Olin
Jr. Propeller Head
Posts: 5
Joined: Tue May 13, 2014 1:22 pm

Re: Add Custom Content to Header

Post by Olin »

Is it possible to use a variable in the header? I have 3 HTML5 outputs, with each output being for a different product. I am hoping to find a way to use the variables for each output to add the product name in the header. I tried adding this script to the Custom JavaScript, but it doesn't appear to work:
$(document).ready(function(){
$("#responsiveHeader>a").after('<div id="responsive-header-title"></div>');
$("#responsive-header-title").text([%=g_variables_global.ProductName-long%]);
});
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

Olin wrote:Is it possible to use a variable in the header?
It'd be possible using variables, somehow, but I don't know how to get a variable into the main skin file (Default.htm), so it'd involve inserting it in a topic and reading it from that topic.

Anyway, an easier way to set the heading from the target (rather than the skin), would be to use a meta tag.

For example, in the target Advanced tab, enter a meta tag with your title:

Code: Select all

<meta name="header-title" content="I really hope this works" />
Then in your skin Toolbar tab, the script would get the content of that meta tag, and use it as the heading:

Code: Select all

$(document).ready(function(){

	var headerTitle = $("meta[name='header-title']").attr("content");

	$("#header>a").after('<div id="header-title"></div>');
	$("#header-title").text(headerTitle);

	$("#responsiveHeader>a").after('<div id="responsive-header-title"></div>');
	$("#responsive-header-title").text(headerTitle);

});
dorcutt
Sr. Propeller Head
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Add Custom Content to Header

Post by dorcutt »

Wow, thanks for this tip Dave. I hadn't realized that you could name meta tags at the target level and then reference them with the script!

This just allowed me to meet the requirement that each of our different webhelps be clearly labelled without having to individually maintain virtually identical (pre-Top Nav) skins. That was driving me nuts.
-Dan, Propellerhead-in-training
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Add Custom Content to Header

Post by kathryngz »

I've written some instructions on how to do this for the tri-pane skin, with an example project.

You can find it here - there's a section on how to add text to the main header (desktop medium) and responsive header (tablet/mobile mediums).
http://ukauthor.esy.es/SkinMods/Default.htm#Add-Header.htm
Many thanks, Dave! Just what I needed for the tripane help I'm working on now.
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Add Custom Content to Header

Post by kathryngz »

Update to my post above of Wed Apr 29, 2015 6:01 pm:

Today I tried the jQuery solution in a different frameless help system. This one had a first-level menu visible in the header (my other one had no menu in the header). It looked fine in Firefox, but in IE it jumped a bit, and in Chrome it jumped badly--to the point where I didn't feel comfortable giving it to my manager for review.

After some experimentation, I was able to find another solution for putting custom content in the header--a bit of a hack, but it works :) Instead of using jQuery, I just put the plain HTML right below the body tag on the master page and moved it up into the header with a negative margin, like so:

Code: Select all

<body>
<div class="title" style="margin-top:-5em;"><p>MY HELP SYSTEM</p><p>Help for Admins</p></div>
And voilà , no jumping!

Just wanted to post that in case it's helpful to anyone else.

Kathryn
pdenchfield
Propellus Maximus
Posts: 574
Joined: Tue Oct 03, 2006 7:56 am
Location: Seattle, WA
Contact:

Re: Add Custom Content to Header

Post by pdenchfield »

Hi Dave,

How can I style the title in the meta tag? I tried adding a .css line (middle below) but it appeared to be ignored. For several tripane outputs.

Code: Select all

$(document).ready(function(){

   var headerTitle = $("meta[name='header-title']").attr("content");

   $("#header>a").after('<div id="header-title"></div>');
   $("#header-title").text(headerTitle);
$("#header-title").css({ right: "300px" });

   $("#responsiveHeader>a").after('<div id="responsive-header-title"></div>');
   $("#responsive-header-title").text(headerTitle);

});
Dave Lee wrote:
Olin wrote:Is it possible to use a variable in the header?
It'd be possible using variables, somehow, but I don't know how to get a variable into the main skin file (Default.htm), so it'd involve inserting it in a topic and reading it from that topic.

Anyway, an easier way to set the heading from the target (rather than the skin), would be to use a meta tag.

For example, in the target Advanced tab, enter a meta tag with your title:

Code: Select all

<meta name="header-title" content="I really hope this works" />
Then in your skin Toolbar tab, the script would get the content of that meta tag, and use it as the heading:

Code: Select all

$(document).ready(function(){

	var headerTitle = $("meta[name='header-title']").attr("content");

	$("#header>a").after('<div id="header-title"></div>');
	$("#header-title").text(headerTitle);

	$("#responsiveHeader>a").after('<div id="responsive-header-title"></div>');
	$("#responsive-header-title").text(headerTitle);

});
pdenchfield
Propellus Maximus
Posts: 574
Joined: Tue Oct 03, 2006 7:56 am
Location: Seattle, WA
Contact:

Re: Add Custom Content to Header

Post by pdenchfield »

Resolved! Earlier sample was mis-punctuated :)

Code: Select all

$("#header-title").css({
	"padding-left": "235px",
	"padding-top": "35px",
	"color" : "#72a5e1"
});
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add Custom Content to Header

Post by NorthEast »

pdenchfield wrote:Hi Dave,

How can I style the title in the meta tag? I tried adding a .css line (middle below) but it appeared to be ignored.
I do it by adding my own stylesheet to style the header - described here: http://ukauthor.esy.es/SkinMods/Default.htm#Skin-Stylesheet.htm
pdenchfield
Propellus Maximus
Posts: 574
Joined: Tue Oct 03, 2006 7:56 am
Location: Seattle, WA
Contact:

Re: Add Custom Content to Header

Post by pdenchfield »

Thanks, Dave. How can I position the text to the right of the logo and still have it be responsive? I hard-coded format within the toolbar javascript but it's not responsive (second screenshot). The first screenshot shows how the text looks when I use your style approach verbatim, without edits. Thanks in advance for any help you can provide!
header-text-notresponsive2.png
EDIT: Also, it turns out that the header text is NOT responsive in certain browser sizes. It moves under the buttons.
header-text-movesunderbuttons.png
Toolbar javascript:

Code: Select all

$(document).ready(function(){
   $('head').append('<link rel="icon" type="image/png" href="http://help.nintex.com/Resources/Images/landingpage/FaviconGrey-sm.png" />	');
});
$(document).ready(function () {
$('body').append(' <!-- Google Tag Manager --><script src="../../../Resources/scripts/googleanalytics-new.js"></script><!-- End Google Tag Manager -->');
});
$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'Content/Resources/Stylesheets/skin.css');

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'content/resources/stylesheets/skin.css');
$(document).ready(function(){

   var headerTitle = $("meta[name='header-title']").attr("content");

   $("#header>a").after('<div id="header-title"></div>');
   $("#header-title").text(headerTitle);


   $("#responsiveHeader>a").after('<div id="responsive-header-title"></div>');
   $("#responsive-header-title").text(headerTitle);

});
CSS (direct copy from your excellent instructions - thanks!) -

Code: Select all

div#header-title
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #cccccc;
	display: inline-block;
	position: relative;
	left: 200px;
	top: 15px;
}

div#responsive-header-title
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #cccccc;
	display: inline-block;
	position: relative;
	left: 100px;
	top: 0px;
}

#responsiveHeader .logo
{
	display: inline-block;
	margin: 0;
	position: relative;
	left: 60px;
}
You do not have the required permissions to view the files attached to this post.
Post Reply