Conditional header image?

[chuck_agari]

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.

[chuck_agari]

Looking at the code, I see 2 instances of the image being referenced:

Code: Select all

<Resource
        Name="Agari_A_small.png">H4sIAAAAAAAEANVYB1RTaRYORTo6OtJbqNJCGoEQIPQqCEREmiwheUAgJCEJEMqMomgERJCiMBYWkKUJIkVBKQ4IClIUxUFcqSsIuIiKwqLCJggjozg7Z/acPWffOa/8997vu/e/97/v/ecluu6xExeRFQGBQOIO9tY4zl2Lc2oLCXCuevN0T86Nh4GzswRV9MhPcQZggj3OGQSK0QCBDiWAQEsc0aHnIFAEDASa9geBMNkgkBTt3HU3E45CmGbvxeDQqHJPHlahWSQIJCJPcvdkejo7YQjUMD08kRoA6LHCaCDuYcLCcB7DACYezAojUxgYlqnKqgWG88wVQ1XAqybMUFMVT2dXsBWVDoBRevp6MBWsCBgMNqETAzE4a9s1OGdkqhLMZNIwUGhUVJReFFKPSg+Cwo2MjKAwBBSBgHAsIIxoChPPglAYqp9I1nmsAQaBTqIxSVQKmDvGB1AjmKYqKms2n45PjpikwM+eKIy1aXEmCOVqoHA9GHQzGC2YyqQygqm0zbG/qr9JALBI3/DL1XwTRiT8CqJF0MmrSSESoAAZCAMoTAYHB98Ux8n85t5Y+G/HyAE5O/8+LCxsUySDaRPJ/H0kwz2aBkBxAIMaQScANpGc8D9XkVtIbv4xXD05glvIfRQSE4swgW4m/hLlQidx6PBcPRa+Btko22D/a6UwDlZWrnRqIIkMYLldA3awsTKAGxkYQBB6HI5N7TblsaKSqXRnKhHAIjfCPos3oLi1xriSWADZ05rEqSCDG50+DG0C3VTzJXKVcy8NTwC40/xStKkfrw1+EPob/Xht6odIwARS6WF4JpYUhg8CoDRKkAn0s3CDJWe1YJw5nU7EM/HWeCaARcDg+hAYHIJAuMPhGCQCg4RDYGgMDGYC/cr2Cx4rOsCR/hGWDZZfxkIlkgKj/1Akny03i4NKd6dSyVgL7hIGu64XFGxlBdZ0xhNIFO5Ya0M0a/a/pXJ2xtiTGBxdNPY3/bL6vtoLhP9Wuq4gk1bfXzQ8nQFw+8VUZb1hVL4CcDGrfYdhUAOZUXg6YBHEWfH/Me7NMN/mjgoGKL+Xzw1W3yYhURhMPIUAOFhjOanRI5GIGCMUCo820odBYABKH6IPGMIhAUQCGgIYGAYChngDNB6lv86+Af5tH3jCaqsTVtcHcR26Jv0q2dBP2f5/qQIhGE8JAohY6DpwXfC/L5whHjAiEPBGEH08LBCiTwyAQ9AwGB6CMuRU1AhpgIAHIv9M4Rj4yD9Ztk/S3/bUantu2oNrzenwZ2f2Ffwras6XJ4hEwZOtqYQI7ld6zQXxD6/6b9J85eq/dPE19adcbthPfdqsQdd2a1gRDnR954cVySi/r8zZOx50sLZw9xQ+7+lFPmAncyGHMRu4K9zHHpx/Mau/WF0UrDs24JAlx1tShYrAGVs3tO4+mmnLq6xGf5PQV+eVZp6wy4+VqLRdm9eioqresupWsqqipZRbpr1EZ+B7vSCZppe5DErc5ZcTXf2mk11dZisrvc29wW/FurULa3EsrVq06btY5smRN8rLik3ltSIPtHkHMIeease9bRuPCdEYQ0/Cr5UGemw5z3smSdEsVKr96pGzSjtfD4l6uWyTQkwUNlD9JownC3KRf+liLQW/re6NvNs3nLKoldTfkJvSkWB56cVO6Xmdfs1iO4NL/OGZy6F5Kdq1xbNBJ5LKMVq7ZxXimfuHPbovNmKmpnBGNc16FW4eLmpqJX6OiTsoH+DB7vwKPhHBr8Zm5CJKdj7Bhff3+aIypn+2q/obrmR2wbSx1qOIRvYxgWH5OrSLP9pI2LF5Fp3KIa/3ZJMdZD4W1JtP1Oa8rlbcl9g0m8Aej39NjEmfsRYtxO1iWTxd8pSoxNnEH4yj/FLm8dgwwD6R6XPq6ryzazKIuKB7QPrJ6ERnWf4TQ1jrSRww2rmQX8C3ZaXeW5oNHnzc7lv3qmVA4CiPmagcVs/pgtZudMhjp9uUYafSHQG+woMf++PlpS9Y6qvhopm3ZsfU82pE6s1iX4xCo8ygV16TS84IyAa/D6LfvQguP5r6jmiCxJU76k/ptmXyF5Zk7S+5fTUNdZnIeCV3Trtsed+QVEb+dIeMG4qfhch4o2mJcaWS0KT0fnt5zcScWJn2Ja9tKj/ASyr2yJYW06MXNNBdebfwSz67rzhUazC31lyO/DHurJh6jg7P88XpVNcdcmHfOe+kD8WgxQoHhwcz9asM5DU7Jxt/9vQRtptyvxzlYkkiZ+ZbtOJ9VTMa9z11UkgUdLzd6VlGWOg9+INrgAbCEznQ6eei0d++3QJ3fqhe8G6UwMe29qxMdEB5yZZTnbKNYeWKHy6A1L1Dmm+mRAK4iwutRu2WgCnKS3NRQJvQPINhX+/eG8p3Ln7b7SMpyR7ZPxeXG9xLyavImCa7TVtpbc3EXsrPxhx75FE+LWARU1NoUDO48rzxfjclfyArtSIj5G4M4qK7tGJXUKPz8Qj7/gOIEwUDM1PwvXm33lu2Lwwxb9qM/TN4XCFnJ9sCBbE/gY3vO5zrHiFIlHxWKAKXmROPf1A/iJo0/3tT7d43heVep2ml7tOHrp0NU5cJDI/58EToVOzM8fCbg3qtab7+NXAhF6yl0zFqr7TIIZ5mhWpF5Omg+ZOjtTN+gidwPhO58R3GSLWtfHZvTUfeb9emznurQfv6aMVihxtKHxak6mQ9z2Ud3GkRLy8IVITLKlv+IpYm+NiEj73cJKZcgL8EKYBYKwgkx6S28SfznJDf23PPZ7t1pmSPfilOOMh14cddnYsF26Smb1j6KPV7vCzxyDcbOVEQV9DRLWI7joHcUrQVXpDQwqQ9lhfs7o2c3hsyrpSo3wOMwGSo2f2oQTo/3OlhWy8Mi6LFvMMhvWsTliOWpYaVbsQ//ShZ+jY/O6c0T3yv3cRhUly9R2oq7ztDh/7h6zkaLZbsK/DypvJj2mDhmso8IWlN2zH5AIXjF3bL1NAOhaKb58RuGSocFhV06fXj+QCt8po9heUbrW8/+UIRPs7PxrR1ZaVnEiZ9K+eWT1L9nw5pdsMqflIe1MxFmij/6H2nbTLxnNh0X9z54btnGxHpyqNH7/lWZR23G94ffvgiEtiBhsg4lb0qTDaOEj+3NHf6Lo3h3HPV9yjl6ZtWXlCYomCfhfw+reUimu51f3Zay/C88cpiri4G6dKiI1clgapeLrp2wdzsYJ6HNdRFWVxeN+HIvwYaykRnu0fjHou9y0RLdoZnGYpPRpZvkfo+MeAOM+lsKS87rsRl0d8krIvu7/V9ULbDOYsyl+iQ1tSrukJzkfCM237AVjMjs6b4rWXejnUaGv3ne4/mqEOH2HLHw/YlpvRYnL6vQUm7EsDoHteJRSIpupSbyQf0BOe3V5GxZWxll5JBuRy9+BCYQ2IlcwytH9PC6Df85yWeVq3K2wVK2PnI+KzzDCKg2lMic6b2EDE2vfZ0qK3ryOjJRoNwcEiGrKP3uJW6zN9iopnIhiXzhxZJ9zKkVHwOlX0UfZlyMIM12zTnOC2k5RddNG7Cy7cMDqcfdDavGH81IKqzNNtiw0Y+Yz9wyXHyaI+/cDM84niUsbSlc39lLj+v09jxpPn9cybGzsZDH8Zv1JZldLeV2eSO+/7j/Sv9EfZ03rP6dmrL1Jzqsc4rhpNt02HKzKDQkGuU/Xv6YaEJ6Z2DeU/qJGUsisEZOlaZ/rQriNw3DSGmS993rZxvKdlmdkpaNH/qbA5/2pn4l6wthanVp6+mqz36rsih2Tt15Wha7ZHtys92qxmdcR+uRc28G7MlqoVnS+AiP3RkPKLWnfpw/UUe2sDszP1qYb4Su9vTTLwmn4BqAvw+3XhfUXD0i31eww0Gz70mzYX/0nJHKOB7ZdWCPYGMHXyPXx5LG3FnK+nxV8rEHuGbclNtfMh7p3twHLPdQUQiezb13qJa6LNSV8R3i7CGJAK51Cm1mf+VfKVFtRbzZ5KXL/+pRiW5lcsJOsM+M5K7hPMUF3/561Lqm7oC61BwYJGzatRPMluVicMZycbNttn1Oqp/Tdd3krepGnY9ut+/+MzO+s4QyYA6iqJJxLiiYFJhVbBaY8yPs0GGSqAHEYGavK/vF8igyU67kPBSaM12sm+Aqinc4xWxRVbh2Fu/a+0k39EAQ++D5ub379Btadj08FAsbcE8/7Vi8FG+a26FqR8nWzzjr/hcrYO1G4eZ+rFH8zs8t7m116lySn8vT4/hFno6O8elxw7TJMyu2/YA7KgMnlNQelSmHJhf8/7R0oCksIZYtEdjyvTZDuxNTzNbxdg6cxvFC90r/3jXnPicjOt4czbsdekNY1lW1LvmtF7xFJy4b1KmvHVRkXzszKVBVd+HOzp1fWU/7vBo1uq/5mOXxVypVvSH1Uz3+rY4LjuVPJ7w9IXdu9vAK58kBAZy+16cVAoB+rfuFJy61y769pTl0PCtaTmRjpFAx/HKp8u9oTrHj1hIvSWqV03I5oygFI851JVkZRzeYndnBpbC9rTTQLmXGN8fRXsLXBm2vCFXWXtNDB1794BUmd3cjPrFZBt33eS6pANjsf9SmqhMKPiFIACq9PGrZr3fWq9dGuDjo6Nh2Gr1smeoTXL5ZKu8xJznXM2YgGmf03Mo/rZLiIS8UM1Pi2Ztf7ftdHXp/oH7Y87BZo91haX/4X8DW83hCy4UAAA=</Resource>

Code: Select all

<Style
        Name="Logo">
        <Properties>
          <Property
            Name="BackgroundImage">url('Agari_A_small.png')</Property>
        </Properties>
      </Style>

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?

[Psider]

I think the code might be related to data uris?
https://css-tricks.com/data-uris/

Can't help otherwise, sorry.

[chuck_agari]

I tried this:

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>

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.

[NorthEast]

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;
}

[chuck_agari]

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;
}

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."

And how would I conditionalize in CSS?

[NorthEast]

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;
}

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."

And how would I conditionalize in CSS?

Everything in the skin will end up as HTML and CSS in the output.
If you inspect the output, the logo is set as a background image on a.logo.

[chuck_agari]

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;
}

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."

And how would I conditionalize in CSS?

Everything in the skin will end up as HTML and CSS in the output.
If you inspect the output, the logo is set as a background image on a.logo.

Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.

[NorthEast]

Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.

You can't use conditions, but you can use a different CSS file in each target.

[chuck_agari]

Of course, but can you add conditions in CSS? I have not seen anything that would lead me to believe you can.

You can't use conditions, but you can use a different CSS file in each target.

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.

[NorthEast]

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.

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]

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.

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.

Well, if it can work, then I'd just call it an ugly solution. Doggone you MadCap, half-assed conditionalizing is, well, half-assed.

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;
}

I pointed the target that would use this image in the header to this CSS file. The imported CSS worked as it should. The image? Not so much.

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>

Looking through that folder in the output, I see this image, and the (default) image referenced in the skin itself. And I see the image I used in the CSS in the Images folder, so I know it's in the output. And I'm sure the path is correct.

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.

[NorthEast]

Your code sample is from output using Tripane skin - it would have helped to mention that, because as I said at the start:

You could probably do this using CSS, for Top Nav or Side Nav skins.

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).

[chuck_agari]

Your code sample is from output using Tripane skin - it would have helped to mention that, because as I said at the start:

You could probably do this using CSS, for Top Nav or Side Nav skins.

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).

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.

[chuck_agari]

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.