Customising layout of HTML5 output

FrankyT · Post by **FrankyT** » Wed Apr 04, 2012 4:07 am

My company is currently evaluating Flare.

We want to create a company template for HTML5 Help output, whose layout differs slightly from the default. Specifically, we want to add the name of each individual product to the right of the logo.

There does not seem to be an easy way of doing this. The basic layout of the header area seems to be hard-coded into Flare. Of course we can change the logo and we can tweak the appearance of the search box, but we can't add anything that isn't already there.

We do not want to go down the road of having a different logo image file for each product, incorporating both the logo and (to its right) the product name. We want to display the product name as text. In other words, we want to add a snippet of HTML to the header.

I'd be grateful if a MadCap person could confirm that we can't edit the HTML of the HTML5 output template - in other words, that we can only edit the parameters that are made available in the HTML5 skin. If there IS some workaround you could tell us about, it would save us a lot of trouble.

The only alternative seems to be to run a JavaScript routine when the page is loaded, adding the product name to the right of the logo. It's clunky but seems to be the only option. Unfortunately, I can't find a way of doing this, either. I can get some JavaScript to run when a custom button is clicked (by adding custom JavaScript to the Toolbar), but not automatically on page load.

We have been hoping to avoid post-processing of the output HTML files - this is one of the things we don't like about RoboHelp's output, and why we are looking to switch to Flare. However, it's disappointing that Flare seems to have many of the same limitations as RoboHelp - unless I am missing something?

Thanks for any advice or workarounds you can suggest.

jerblack · Post by **jerblack** » Wed Apr 04, 2012 4:34 am

I'm currently trying to solve the same problem, and I am evaluating upgrading to Flare 8 as well. All I want is to be able to display text in the header, though if I could make it to where that text was defined by conditional text or a variable or something that would great too.

I would love to see your clunky Javascript solution for appending text next to the logo. I haven't been able to get that far yet. By the way, you can get code to load when the page loads by adding something like the following:

Code: Select all

function init()  {
//your code//
}
window.onload=init;

FrankyT · Post by **FrankyT** » Wed Apr 04, 2012 9:49 am

Hey Jerblack - thanks, all I needed was that window.onload command.

(Funny - all the other suggestions on this forum, for similar problems, involved using an onload attribute in a <body> tag. The problem is that Flare seems to disable onload attributes in page <body>s: during compilation, it moves the JavaScript onload call to <head> and sticks it in a mysterious gOnloadFuncs.push function, where it is hermetically sealed from the world outside and is incapable of doing anything whatsoever.)

I digress... I have the whole thing working now, and it's surprisingly simple:

- Create an HTML5 skin (Project Organizer > Skins [right click] > Add Skin > DefaultHTML5 > [Change settings as desired] > Add).

- Double-click the new skin in the project Organizer Skins list. The Skin editor opens.

- Click Toolbar and insert your JavaScript in the box on the far right. Mine looks like this:

Code: Select all

function addHeading() {
    h1Headings = document.getElementsByTagName("h1");

        // New snippet for page heading.

    h1HelpTitle = document.createElement("H1");
    h1HelpTitle.setAttribute("style", "font-family : Verdana; font-weight : normal; color : #FFFFFF; margin-left : 140px; margin-top : 14px");
    h1HelpTitle.appendChild(document.createTextNode("NiceProject Help"));

        // Find the logo image, and insert the heading snippet after it.

    for (h = 0; h < h1Headings.length; h++) {
        h1Heading = h1Headings[h];
        if (h1Heading.getAttribute("class") == "logo") {
            sib = h1Heading.parentNode.nextSibling;            // Parent node is <a>, and its next sibling is a <div>.
            sib.parentNode.insertBefore(h1HelpTitle, sib);     // Insert the new snippet before the <div>
        }
    }
}

window.onload = addHeading;

There may be a neater way of doing this - I'm not a JavaScript expert. In particular, the acrobatics involving parents and siblings look more complicated than they need to be; I just used the first functions I found that did what I wanted. (Surely it would be more logical for insertBefore to be a method of the sibling rather than the parent? Hey ho.)

Note, anyway, that you insert the window.onload in the same place as the script - nice and convenient. Also note that this script has nothing to do with the Toolbar: this just happens to be the only place where Flare allows us to add our own project-wide JavaScript (as far as I can tell). Your window.onload command "tricks" Flare into allowing the script to run independently of toolbar activity.

I still have a couple of quibbles:

- Flare won't seem to let me generate a custom CSS style for the inserted text (I wanted to use a class attribute rather than the messy style attribute, but it seems you can only use Flare's built-in style classes; anything non-standard requires inline styles).

- Like you, I would like the JavaScript to be able to pick up the text to insert from elsewhere in the project, rather than needing it to be hard-coded in the JavaScript. A fudge that occurred to me is to insert the text, via a variable, in hidden text somewhere in the page, and get the JavaScript to search the page for this text when it loads. I'll post here if I get this working.

jerblack · Post by **jerblack** » Wed Apr 04, 2012 7:22 pm

I was not able to figure out how to use variables to accomplish this, but I was still able to fix it for my project. I took your code, changed the style formatting a bit (I'm not using a logo, just text) and instead of setting specific text for the title, I have it written to set the title to the page title using document.title. This is what the code looks like now.

Code: Select all

function addTrainingTitle() {
h1Headings = document.getElementsByTagName("h1");
// New snippet for page heading.
h1HelpTitle = document.createElement("H1");
h1HelpTitle.setAttribute("style", "font-family : 'Segoe UI light'; font-weight : normal; font-size: 16pt; color : #f7f7f7; margin-left : 15px; margin-top : 6px;");
// this is where I use document.title to set the page title
h1HelpTitle.appendChild(document.createTextNode(document.title));
// Find the logo image, and insert the heading snippet after it.
for (h = 0; h < h1Headings.length; h++) {
h1Heading = h1Headings[h];
if (h1Heading.getAttribute("class") == "logo") {
sib = h1Heading.parentNode.nextSibling;            // Parent node is <a>, and its next sibling is a <div>.
sib.parentNode.insertBefore(h1HelpTitle, sib);     // Insert the new snippet before the <div>
}
}
}
window.onload = addTrainingTitle;

I am working on building a template for my group that can be re-used across word-based import projects, so I have a Word template and a Flare template for them to use. I am trying to make the template as simple to use as possible, and the above code means that I only have to tell them to change the caption in the skin to change the page title instead of worrying about variables. In the skin template, I have the caption set to "CS3 Training Template (Change this in Caption field in Skin)".

Thanks for all the help! This turned out great!

FrankyT · Post by **FrankyT** » Thu Apr 05, 2012 2:35 am

jerblack wrote:I was not able to figure out how to use variables to accomplish this, but I was still able to fix it for my project. I took your code, changed the style formatting a bit (I'm not using a logo, just text) and instead of setting specific text for the title, I have it written to set the title to the page title using document.title.

The same thing occurred to me at 11 o'clock last night

I'd spent so much energy trying to get the thing working that I'd missed the obvious solution

I am working on building a template for my group that can be re-used across word-based import projects, so I have a Word template and a Flare template for them to use. I am trying to make the template as simple to use as possible, and the above code means that I only have to tell them to change the caption in the skin to change the page title instead of worrying about variables. In the skin template, I have the caption set to "CS3 Training Template (Change this in Caption field in Skin)".

Yes - our legacy RoboHelp projects have two separate settings, one for the window title and one for the heading; but the strings are actually identical, so why do we need two settings? Answer: we don't.

Thanks for all the help! This turned out great!

Yes, thanks likewise. I had a few reservations about Flare at first, but it seems that with a bit of lateral thinking you can get it to do what you want. The other writers in my team were a bit wary of getting involved with JavaScript, but hopefully I can reassure them that they won't need to touch it!

Kreg · Post by **Kreg** » Thu Apr 12, 2012 6:45 am

My question is considerably more basic.... How can I position a logo so that its left border aligns with the left of the page. It appears that the default placement indents the logo something like 20 pixels from the left. This looks especially awkward in our layout...

FrankyT · Post by **FrankyT** » Thu Apr 12, 2012 7:14 am

Kreg wrote:My question is considerably more basic.... How can I position a logo so that its left border aligns with the left of the page. It appears that the default placement indents the logo something like 20 pixels from the left. This looks especially awkward in our layout...

Try this in the Toolbar JavaScript box:

Code: Select all

function moveLogo() {
    h1Headings = document.getElementsByTagName("h1");
    for (h = 0; h < h1Headings.length; h++) {
        h1Heading = h1Headings[h];
        if (h1Heading.getAttribute("class") == "logo") {
            h1Heading.setAttribute("style", "margin-left : 0px");
        }
    }
}

window.onload = moveLogo;

It's edited from my previous example and works for me in FF, IE and Chrome. Still a lot of effort just to position a logo though...

FrankyT · Post by **FrankyT** » Fri Apr 13, 2012 4:40 am

A postscript to this thread...

One of my original problems was how to make a script run automatically on page load. As Jerblack pointed out, you do this in HTML5 like this:

Code: Select all

function init() {
    ... stuff ...
}

window.onload=init;

Note that, although this works for HTML5 output, it doesn't work for WebHelp output - I assume because it somehow conflicts with MadCap's own JavaScript.

In WebHelp, you need to implement a straight function call:

Code: Select all

function init() {
    ... stuff ...
}

init();

This doesn't work in HTML5, so you need to make sure you are using the appropriate call syntax for your output format.

MadCap Software Forums

Customising layout of HTML5 output

Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output

Re: Customising layout of HTML5 output