Multiple Skins for HTML5 Output

[jkovach]

Hello Everyone,

Is it possible to create an HTML5 Top Navigation skin that applies to the entire project and HTML5 Top Navigation no header that would only apply to the startup topic?

Many Thanks,


Jon

[lcp]

I'm wondering this, too! Did you ever get a response?

I'm looking to create a landing page that uses a different skin from the rest of the topics -- really just to get rid of the header. So far, applying a different skin in the TOC hasn't worked -- the skin selected for the rest of the project always overrides it.

Please let me know if you solved it -- thanks!

[doc_guy]

Last time I looked at this (and it's been a hot minute) you couldn't change the skin of HTML5 output.

We were pulling up content from the help in a small CSH panel. So I wrote a jquery that would check to see if the cshid attribute was in the URL (because when you make a CSH call, the cshid attribute stayes in the URL on the target page), and if the cshid attribute was present, I used jquery to hide elements I didn't want shown to the end user, and I showed some other elements I DID want shown to the end user.

I haven't needed it for two years, but this is the jquery I wrote. Maybe it can be the start of a solution for you?

Code: Select all

$("document").ready(function () {
  function getParameterByName(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  // In this code, we want to check the URL to see if the cshid value is present.
  // If it is, we know this topic was called by a CSH call, and for this product
  // we want to show the topic without many of the associated elements on the page.

  var hideNav = getParameterByName("cshid"); // creates a variable basedon the presence of the cshid parameter in the URL
  if(hideNav){ // what to do if the parameter is found in the topic
    $("div.sideContent, div.nocontent, div#customSearch, nav.title-bar, div#customFooter, div.cshhide").hide(); // jquery hides these classes and divs
  } else { // what to do if the parameter is not found in the topic
    $("div.cshonly, div.csholny").hide(); // jquery hides classes intended only for CSH calls.
  }

[NorthEast]

For your landing page, you could add some extra CSS to hide the header bar.

Code: Select all

nav.title-bar.tab-bar {
    display: none;
}

Although you can build a target with two skins, and display a topic using an alternative skin (by appending ?skinName=YourSkin to the URL), the topic will always default to use the target's main skin - so it's not a permanent fix.

That option you found to select a skin for a TOC entry will not work for HTML5 - that option is apparently for HTML Help (CHM) only.

[doc_guy]

, the topic will always default to use the target's main skin - so it's not a permanent fix.

JQuery to the rescue again, I suppose. You could find a specific element on the page or in the URL and then append the skin parameter to the URL.