Add external link to logo in HTML5 output

[jhamrick]

The old WebHelp output let me attach a link to our corporate website (an external site) to the company logo at the top of the help. I'm converting to HTML5 and would like the same functionality. Has anyone figured out a way to do this?

Thanks!

[nzschumi]

Hi,

I have been headscratching myself about some of the HTML5 issues. I think the only way to do this is to edit the code after it's been published.

Go to the default.htm file that has been created and look for follwing line:

Code: Select all

<div id="header"><a href="Default.htm"><h1 class="logo"></h1></a>

Change the hyperlink to what you need it to be.

Disadvantage is obviously that you need to do this every time you have published, but I haven't managed a "permanent" solution to this.

Happy for the gurus to make a better suggestion.

Cheerio!

[3lliot]

Bump...

I too would like to know how to point the html5 skin logo hyperlink to somewhere other than 'home.htm'. The logo was an important navigation element in my previous webhelp output.

Alternatively, if someone knows how to add additional (hyperlinked) logos to the html5 skin, any tips much appreciated...

cheers
-E

[C_Nielsen]

I wish I could offer some advice on this, I'm just trying to bump this conversation up. Has there been any further development on this? We also use this feature in our web help and I'm really hoping a more permanent solution has been found!

[kwag_myers]

Is this what you're trying to do? http://forums.madcapsoftware.com/viewto ... =9&t=16337

[C_Nielsen]

I don't think so, but that may be an option if I can't figure out how to make the logo a clickable external link. What I'm trying to do is this:

When you view flare's online help they have their logo in the header (top left) and it is a clickable link that directs you back to the welcome page topic. In the HTML5 skin editor I am able to change the logo image but not where the link points to (I would like it to point to a company website, not a help topic). This is a feature in the WebHelp skin but I can't figure out how to do this in the HTML5 skin.

Thanks for the suggestion, I may just end up checking that out if I can't figure this one out!

[NorthEast]

You can do this easily using a bit of jQuery, and it doesn't require editing the output.

1. Open the skin Toolbar tab, and click Edit (to add custom script to the toolbar).
2. Add the following code:

Code: Select all

$(document).ready(function(){
	$("div#header>a").attr("href", "http://www.google.com/");
});

That will change the logo link to Google.

With regards to adding other links to the header, see my comment in this post:
http://forums.madcapsoftware.com/viewtopic.php?f=13&p=87220#p87220

[C_Nielsen]

That's perfect, thanks! One more question though, is there a way to alter this jQuery script to open the link in a new tab/window? I've tried a few things by my limited knowledge of jQuery doesn't get me too far.

[QuadraQ]

That's perfect, thanks! One more question though, is there a way to alter this jQuery script to open the link in a new tab/window? I've tried a few things by my limited knowledge of jQuery doesn't get me too far.

I know this is a very old topic, but it looks like this is still the way to do this (and it still works), but I too would like to know if there's a way to have this ling open in a new tab/window. I know nothing about jQuery unfortunately. Any help would be appreciated.

[NorthEast]

That's perfect, thanks! One more question though, is there a way to alter this jQuery script to open the link in a new tab/window? I've tried a few things by my limited knowledge of jQuery doesn't get me too far.

I know this is a very old topic, but it looks like this is still the way to do this (and it still works), but I too would like to know if there's a way to have this ling open in a new tab/window. I know nothing about jQuery unfortunately. Any help would be appreciated.

Try:

Code: Select all

$(document).ready(function(){
   $("div#header>a").attr({href: "http://www.google.com/", target:"_blank" });   
});

[Ken Fredric]

Does anyone know if it is possible to do this for a HTML5 TopNav skin?

There is a Logo URL option on the Setup tab, but it only allows you to choose a file from the current project.

I only have one topic in my project that I want to do this for, so the hyperlink isn't pointing to the only topic in the project.

Thanks,
Ken

[cirrus]

*BUMP*

This has also been puzzling me - how to link my company logo top-left of the skin to the company hompage?

The Logo URL setting in the Skin Settings only appears to be able to link to topics in the project...

[nzschumi]

Just type it into the field instead of using the ellipsis button, worked for me.

[Smoreno]

You can point to a URL external to your project by typing it into the "Logo Url" field manually, make sure to include the transfer protocol(http, https, etc.).

[eklisiewicz]

Can someone please tell me where to find Logo URL? I don't see it in the skin editor. Thanks.

[MattyQ]

The Logo Url box is visible on the Setup tab of the Top Navigation skin, but, unfortunately, isn't supported for the Tripane skin. If you don't see it on the Setup tab, my guess is you're using Tripane.

[SoleWriter]

Hello all,

Just picking up on this post again. Dave Lee - you're JQuery tip is very helpful, thank you. However, in my tripane HTML5 skin the link to our external website from the logo only seems to work from the web medium. When the Help screen size is reduced to tablet or mobile mediums, the link does not work.

Any thoughts?
Many thanks.

[NorthEast]

Just picking up on this post again. Dave Lee - you're JQuery tip is very helpful, thank you. However, in my tripane HTML5 skin the link to our external website from the logo only seems to work from the web medium. When the Help screen size is reduced to tablet or mobile mediums, the link does not work.

There is a separate header for the responsive mode (tablet/phone mediums), so you need both:

Code: Select all

$(document).ready(function(){
   $("div#header>a").attr({href: "http://www.google.com/", target:"_blank" });   
   $("div#responsiveHeader>a").attr({href: "http://www.google.com/", target:"_blank" });   
});

[MC Hammer]

I would like to change the link on the logo (top left of the HTML5 help) so that it points to the start page of our publicly available documentation (it is an external link starting with https).
I would like to use the suggested JQuery script but am struggling to see where on the UI to use it.
I cannot see a Toolbar tab on my top nav skin. I only seem to have the following tabs: Setup, Community, Styles and UI Text. Am I looking in the right place?

Thank you in advance,

[NorthEast]

I would like to change the link on the logo (top left of the HTML5 help) so that it points to the start page of our publicly available documentation (it is an external link starting with https).
I would like to use the suggested JQuery script but am struggling to see where on the UI to use it.
I cannot see a Toolbar tab on my top nav skin. I only seem to have the following tabs: Setup, Community, Styles and UI Text. Am I looking in the right place?

Thank you in advance,

The script above is only required if you are using a Tripane skin.

If you're using a Top Nav skin, you can simply enter the logo link using the Logo Url on the skin's Setup tab.


(This thread was started when there was only a Tripane skin, before Top Nav existed.)

[MC Hammer]

Ooops, I think I got confused. Thank you for clarifying things for me Dave

[peggy_123]

Hi,

I am a new user to Flare and have two questions.Pardon me please if I ask a silly question .


1)While trying to upload image of my company logo in one of our projects by using the following steps HTML5 Tripane - Styles- Logo.
I am unable to resize the logo. The logo goes beyond the tripane area and looks awkward. Is there a way to resize the logo size in Flare? If yes, how.

2) The generated output on HTML 5 Mobile view, shows scroll bar on the right side but no scroll bar at the bottom. My content has a table with 8 columns and they are getting cut-off in mobile view, any solution to this?

Many thanks for your help here!

[tpmtpm56]

I was able to disable and change the logo link in the header of HTML5 output:

To disable I simply commented (#) the URL call line of the HTML5 skin (in this case 'HTML5_Tripane.flskn'):

$(document).ready(function(){
# $("div#header>a").attr({href: "http://www.mycompany.com/", target:"_blank" });
});</Script>

This worked - clicking the logo in the header did not go to the URL, even though the mouse toggles to show that this is a hotspot.

I then uncommented the line and inserted another URL. This also worked - clicking the logo opened the URL specified in the line.

But my question is this: Surely this is not the right way to handle link behaviour for the header logo in HTML5 output. If it is, is sure is a clunky way to do things.
Why not simply have a parameter in the skin editor? Or does that exist, and I'm blind?

[NorthEast]

I was able to disable and change the logo link in the header of HTML5 output:

To disable I simply commented (#) the URL call line of the HTML5 skin (in this case 'HTML5_Tripane.flskn'):

$(document).ready(function(){
# $("div#header>a").attr({href: "http://www.mycompany.com/", target:"_blank" });
});</Script>

This worked - clicking the logo in the header did not go to the URL, even though the mouse toggles to show that this is a hotspot.

I then uncommented the line and inserted another URL. This also worked - clicking the logo opened the URL specified in the line.

But my question is this: Surely this is not the right way to handle link behaviour for the header logo in HTML5 output. If it is, is sure is a clunky way to do things.
Why not simply have a parameter in the skin editor? Or does that exist, and I'm blind?

To disable it, you can use this line instead, which will remove the link altogether:

Code: Select all

$("#header>a>h1").unwrap(); 

You can change the logo link if you're using a top nav skin, but the tripane skin hasn't really changed much in the last 4 years or so.