Add external link to logo in HTML5 output
Add external link to logo in HTML5 output
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!
Thanks!
Re: Add external link to logo in HTML5 output
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: 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!
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>
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!
Re: Add external link to logo in HTML5 output
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
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
Re: Add external link to logo in HTML5 output
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!
-
- Propellus Maximus
- Posts: 810
- Joined: Wed Jul 25, 2012 11:36 am
- Location: Ann Arbor, MI
Re: Add external link to logo in HTML5 output
Is this what you're trying to do? http://forums.madcapsoftware.com/viewto ... =9&t=16337
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
Re: Add external link to logo in HTML5 output
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!
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!
Re: Add external link to logo in HTML5 output
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:
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
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/");
});
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
Re: Add external link to logo in HTML5 output
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.
Re: Add external link to logo in HTML5 output
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.C_Nielsen wrote: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.
Re: Add external link to logo in HTML5 output
QuadraQ wrote: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.C_Nielsen wrote: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.
Try:
Code: Select all
$(document).ready(function(){
$("div#header>a").attr({href: "http://www.google.com/", target:"_blank" });
});
-
- Propeller Head
- Posts: 33
- Joined: Thu Feb 06, 2014 9:43 pm
Re: Add external link to logo in HTML5 output
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
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
Re: Add external link to logo in HTML5 output
*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...
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...
Re: Add external link to logo in HTML5 output
Just type it into the field instead of using the ellipsis button, worked for me.
Re: Add external link to logo in HTML5 output
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.).
-
- Propeller Head
- Posts: 54
- Joined: Mon Nov 12, 2007 6:53 am
Re: Add external link to logo in HTML5 output
Can someone please tell me where to find Logo URL? I don't see it in the skin editor. Thanks.
Re: Add external link to logo in HTML5 output
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.
-
- Propeller Head
- Posts: 42
- Joined: Thu Nov 27, 2014 7:44 am
- Location: United Kingdom
Re: Add external link to logo in HTML5 output
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.
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.
Re: Add external link to logo in HTML5 output
There is a separate header for the responsive mode (tablet/phone mediums), so you need both:SoleWriter wrote: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.
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" });
});
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Add external link to logo in HTML5 output
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,
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,
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Re: Add external link to logo in HTML5 output
The script above is only required if you are using a Tripane skin.MC Hammer wrote: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,
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.)
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed Aug 08, 2007 3:04 am
- Location: In a galaxy far, far away
Re: Add external link to logo in HTML5 output
Ooops, I think I got confused. Thank you for clarifying things for me Dave
Marie-Claire
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Flare 2019 r2 - Windows 10 Pro - HTML5 help / "clean" XHTML output
Re: Add external link to logo in HTML5 output
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!
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!
Re: Add external link to logo in HTML5 output
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 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?
Re: Add external link to logo in HTML5 output
To disable it, you can use this line instead, which will remove the link altogether:tpmtpm56 wrote: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?
Code: Select all
$("#header>a>h1").unwrap();