Hi. I have an HTML5 skin in which I want to change the logo (Styles > Logo > Background) depending on the product. I tried conditionalizing the logo in Capture, but the skin doesn't recognize the conditionalization. Does anyone know of a way to do this (short of creating multiple skins)?
Thanks!
Multiple logos?
-
ddiemetric
- Propeller Head
- Posts: 59
- Joined: Mon Nov 24, 2008 12:31 pm
- Location: Is it Spring yet?
Re: Multiple logos?
ddiemetric wrote:Hi. I have an HTML5 skin in which I want to change the logo (Styles > Logo > Background) depending on the product. I tried conditionalizing the logo in Capture, but the skin doesn't recognize the conditionalization. Does anyone know of a way to do this (short of creating multiple skins)?
To explain, when you set a logo image in the skin, the image is actually embedded in the skin file, it is not linked to the image file. Therefore, if you change the original image file or set conditions, then that won't affect the image in the skin.
I don't think there's a way to do this in Flare, other than have multiple skins.
-
ddiemetric
- Propeller Head
- Posts: 59
- Joined: Mon Nov 24, 2008 12:31 pm
- Location: Is it Spring yet?
Re: Multiple logos?
That's what I figured. Thanks very much for your response.
Re: Multiple logos?
I had the same issue: I wanted to use one skin for all my help projects, but vary the logo within. I stumbled across this: http://forums.madcapsoftware.com/viewtopic.php?t=16714
I modified this for my purposes. Basically, I have a master project with a skin and other files (my copyright page and others that don't vary between products), then I Import that project, including only the files I want, into each of my help projects.
The master project's HTML5 skin file is modified to accommodate two features I wanted: the ability to include a different logo for each project, and the ability to link to logo to my company home page.
My solution means that all the product logo graphics must be the same dimensions.
In the skin's Toolbar, I added this custom Javascript:
The second-to-last line redirects a click on the logo graphic to google.com; the last line causes it to open in a new tab or window. If you omit these, clicking the logo opens your startup topic.
Still in the skin editor, click Styles > Logo > Background > Background and select the image that you want to use as your default logo. (I use a transparent rectangle the same size as my other logos, so when I build my help, if the logo space is empty, I know something's wrong.)
This logo image is embedded in the skin and will be used by default if you don't include a logo graphic named "Logo.png" in your project.
Still in the skin editor, click Styles > Header > Height > Height and set the height of the help system's header to something at least as tall as your logo graphic.
= = = =
In each help project, create a folder Skin inside the Content/Resources/ folder.
Create a file Skin.htm in the Skin folder, and replace the contents of <body> with this:
Add the file Logo.png to the Skin folder. (Use a different Logo.png for each product.)
If "Exclude content not linked directly or indirectly from target" is checked in the target's Advanced tab, then the Skin.htm and Logo.png files will not be included when you build your help system.
I add the following to the bottom of my Startup Topic:
This ensures that the new pages are included with the project without adding them to the TOC, and without displaying any indication in the Start page.
= = = =
Please note that while this works well for me (so far!), I am NOT an expert on Javascript, JQuery, or Flare; I pieced this together from multiple posts here. If it helps, I can cobble together some example projects.
I modified this for my purposes. Basically, I have a master project with a skin and other files (my copyright page and others that don't vary between products), then I Import that project, including only the files I want, into each of my help projects.
The master project's HTML5 skin file is modified to accommodate two features I wanted: the ability to include a different logo for each project, and the ability to link to logo to my company home page.
My solution means that all the product logo graphics must be the same dimensions.
In the skin's Toolbar, I added this custom Javascript:
Code: Select all
$(document).ready(function(){
$("#header>a").after('<div id="header-content"></div>');
$('h1.logo').css("background-image","url('Content/Resources/Skin/Logo.png')");
$("#header-content").load("Content/Resources/Skin/Skin.htm #header-content > *");
$("div#header>a").attr("href", "http://www.google.com/");
$("div#header>a").attr(“targetâ€, “_blankâ€);
});
Still in the skin editor, click Styles > Logo > Background > Background and select the image that you want to use as your default logo. (I use a transparent rectangle the same size as my other logos, so when I build my help, if the logo space is empty, I know something's wrong.)
This logo image is embedded in the skin and will be used by default if you don't include a logo graphic named "Logo.png" in your project.
Still in the skin editor, click Styles > Header > Height > Height and set the height of the help system's header to something at least as tall as your logo graphic.
= = = =
In each help project, create a folder Skin inside the Content/Resources/ folder.
Create a file Skin.htm in the Skin folder, and replace the contents of <body> with this:
Code: Select all
<div id="header-content">
<!-- start header content -->
<div id="header-title"></div>
<!-- end header content -->
</div>
If "Exclude content not linked directly or indirectly from target" is checked in the target's Advanced tab, then the Skin.htm and Logo.png files will not be included when you build your help system.
I add the following to the bottom of my Startup Topic:
Code: Select all
<div style="visibility: hidden; height:0; margin: 0; padding: 0;" MadCap:conditions="Default.ScreenOnly">
<p><a href="Resources/Skin/Skin.htm">load the file Skin.html</a></p>
<p><img src="Resources/Skin/Logo.png" height="1" width="1" /></p>
</div>
= = = =
Please note that while this works well for me (so far!), I am NOT an expert on Javascript, JQuery, or Flare; I pieced this together from multiple posts here. If it helps, I can cobble together some example projects.
Don Johnson
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
Re: Multiple logos?
Very helpful thanks. I too have ended up with one skin for each output because I wanted to change the text in the skin caption. I'll try this when I have some time.
I have raised a feature request asking for it to be possible to override the skin caption at the target level. I don't think it's unreasonable to want to change the caption or logo.
Well done for figuring out how to do this!
I have raised a feature request asking for it to be possible to override the skin caption at the target level. I don't think it's unreasonable to want to change the caption or logo.
Well done for figuring out how to do this!
Marjorie
My goal in life is to be as good a person as my dogs already think I am.
My goal in life is to be as good a person as my dogs already think I am.
Re: Multiple logos?
This solution works when you only need to modify the logo between projects - i.e. all targets in the project use the same logo.
There's still the problem of how you would change the logo between targets in the same project.
One approach would be to set the logo filename as a variable, as you can set the variable at the target level.
You could then use some scripting to read the variable (from a topic), and then use it to modify the src path of the logo.
- The Skin.htm file.
- The two lines:
$("#header>a").after('<div id="header-content"></div>');
$("#header-content").load("Content/Resources/Skin/Skin.htm #header-content > *");
There's still the problem of how you would change the logo between targets in the same project.
One approach would be to set the logo filename as a variable, as you can set the variable at the target level.
You could then use some scripting to read the variable (from a topic), and then use it to modify the src path of the logo.
In your case, as you're not adding content to the header area, you don't need:djohnson wrote:I modified this for my purposes. Basically, I have a master project with a skin and other files (my copyright page and others that don't vary between products), then I Import that project, including only the files I want, into each of my help projects.
- The Skin.htm file.
- The two lines:
$("#header>a").after('<div id="header-content"></div>');
$("#header-content").load("Content/Resources/Skin/Skin.htm #header-content > *");