Conditional header image?
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Conditional header image?
I use Flare with a single project as a content repository. I document 3 different (so far) products. For HTML5 output, I have a single skin that I use for all 3 products. Because Flare's skins don't allow text in the header, only a logo, I have a kludge that puts the product name in the TOC tab. The image I use in the header is a generic company one.
I now have product-specific help images, and I'd like to use these. But I can see no way to add the images to the skin such that the correct one will be used for each target.
Now I'm thinking that I could possibly edit the skin manually, just copy the conditional code from another topic and use it in the skin code. Would that work?
And before someone suggests cloning the skin and using a separate one for each target, let's just make it clear that that's a terrible idea. And I should not have to explain why.
I now have product-specific help images, and I'd like to use these. But I can see no way to add the images to the skin such that the correct one will be used for each target.
Now I'm thinking that I could possibly edit the skin manually, just copy the conditional code from another topic and use it in the skin code. Would that work?
And before someone suggests cloning the skin and using a separate one for each target, let's just make it clear that that's a terrible idea. And I should not have to explain why.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
Looking at the code, I see 2 instances of the image being referenced:
In theory, it looks like I could do what I want in the latter section of code. But the former section of code looks like some sort of hash, and if I change anything there, it'd make the hash invalid, I think.
Guesses, anyone?
Code: Select all
<Resource
Name="Agari_A_small.png">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</Resource>
Code: Select all
<Style
Name="Logo">
<Properties>
<Property
Name="BackgroundImage">url('Agari_A_small.png')</Property>
</Properties>
</Style>
Guesses, anyone?
Re: Conditional header image?
I think the code might be related to data uris?
https://css-tricks.com/data-uris/
Can't help otherwise, sorry.
https://css-tricks.com/data-uris/
Can't help otherwise, sorry.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
I tried this:
This did not work. When I deleted the original image reference, nothing displayed in the output. I did not touch the other reference, with the hash. I do note that having this in the code did not break anything.
Code: Select all
<Styles>
<Style
Name="Logo">
<Properties>
<Property
Name="BackgroundImage">url('Agari_A_small.png')</Property>
<Property
Name="BackgroundImage" MadCap:conditions="Products.Incident Response only">url('apr.help.bigger.png')</Property>
<Property
Name="BackgroundImage" MadCap:conditions="Products.Advanced Threat Protection only">url('apd.help.bigger.png')</Property>
<Property
Name="BackgroundImage" MadCap:conditions="Products.Brand Protection only">url('bp.help.bigger.png')</Property>
</Properties>
</Style>
Re: Conditional header image?
You could probably do this using CSS, for Top Nav or Side Nav skins.
For example, to replace the logo, you could set a different background-image for a.logo:
For example, to replace the logo, you could set a different background-image for a.logo:
Code: Select all
a.logo {
background-image: url('../Images/YourLogo.png') !important;
}
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
Do skins have their own CSS? I don't see any classes in the skin's XML, so I'm not sure how they would "connect."Dave Lee wrote:You could probably do this using CSS, for Top Nav or Side Nav skins.
For example, to replace the logo, you could set a different background-image for a.logo:
Code: Select all
a.logo { background-image: url('../Images/YourLogo.png') !important; }
And how would I conditionalize in CSS?
Re: Conditional header image?
Everything in the skin will end up as HTML and CSS in the output.chuck_agari wrote:Do skins have their own CSS? I don't see any classes in the skin's XML, so I'm not sure how they would "connect."Dave Lee wrote:You could probably do this using CSS, for Top Nav or Side Nav skins.
For example, to replace the logo, you could set a different background-image for a.logo:
Code: Select all
a.logo { background-image: url('../Images/YourLogo.png') !important; }
And how would I conditionalize in CSS?
If you inspect the output, the logo is set as a background image on a.logo.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.Dave Lee wrote:Everything in the skin will end up as HTML and CSS in the output.chuck_agari wrote:Do skins have their own CSS? I don't see any classes in the skin's XML, so I'm not sure how they would "connect."Dave Lee wrote:You could probably do this using CSS, for Top Nav or Side Nav skins.
For example, to replace the logo, you could set a different background-image for a.logo:
Code: Select all
a.logo { background-image: url('../Images/YourLogo.png') !important; }
And how would I conditionalize in CSS?
If you inspect the output, the logo is set as a background image on a.logo.
Re: Conditional header image?
You can't use conditions, but you can use a different CSS file in each target.chuck_agari wrote:Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
Nope. Totally defeats the purpose. I could also use different skins for each target. Completely defeats the idea of single-source, never mind increasing development and debugging time anytime there are any changes to skins.Dave Lee wrote:You can't use conditions, but you can use a different CSS file in each target.chuck_agari wrote:Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.
Re: Conditional header image?
Not really, as you can specify a CSS file per target. Then that can target-specific CSS, and use @import to import the rest of the CSS files.chuck_agari wrote:Nope. Totally defeats the purpose. I could also use different skins for each target. Completely defeats the idea of single-source, never mind increasing development and debugging time anytime there are any changes to skins.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
Well, if it can work, then I'd just call it an ugly solution. Doggone you MadCap, half-assed conditionalizing is, well, half-assed.Dave Lee wrote:Not really, as you can specify a CSS file per target. Then that can target-specific CSS, and use @import to import the rest of the CSS files.chuck_agari wrote:Nope. Totally defeats the purpose. I could also use different skins for each target. Completely defeats the idea of single-source, never mind increasing development and debugging time anytime there are any changes to skins.
That said, I first pass at this did not work. I created this CSS file:
Code: Select all
@import "agari.css";
a.logo {
background-image: url("../Images/apd.help.bigger.png") !important;
}
When I inspect the element in the output, I see this:
Code: Select all
<a class="homeLink logo" href="index.html">
<img src="Skins/Default/Stylesheets/Images/transparent.gif" alt="Logo">
</a>
When I look at the source code of the output, I see no reference at all to any of "my" CSS files, although I do if I look at the source of the frame that contains the topic content. It seems weird that the container does not refer to the CSS file selected in the target.
Re: Conditional header image?
Your code sample is from output using Tripane skin - it would have helped to mention that, because as I said at the start:
The problem with Tripane is that the topic is displayed inside an iframe, so your stylesheet is only applied to that topic, and is not applied to the skin (which contains the topic iframe).Dave Lee wrote:You could probably do this using CSS, for Top Nav or Side Nav skins.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
This, however, is the closest skin design I found to the clean, more modern web-based help systems that many companies deploy today, often via wikis or static site generators.Dave Lee wrote:Your code sample is from output using Tripane skin - it would have helped to mention that, because as I said at the start:
The problem with Tripane is that the topic is displayed inside an iframe, so your stylesheet is only applied to that topic, and is not applied to the skin (which contains the topic iframe).Dave Lee wrote:You could probably do this using CSS, for Top Nav or Side Nav skins.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Conditional header image?
That said, I went back to a side nav skin that I had worked with originally. This seem to make the designated icon work--although I have to find the settings that tweak the size of what's displayed (the new icon, a different size, is being clipped)--and with some work, I think I can get it to look similarly. This may work out after all--especially because the side nav skins are responsive.