5.1 HTML Customizations

Generated documentation using new HTML style can be customized using the files <html_doc>/css/custom.css and <html_doc>/js/custom.js. The files will be automatically copied in the output folder, if specified in the preference file using custom-css-file or custom-js-file tags.

The new HTML style is based on Bootstrap and jQuery frameworks and customizations can be done using jQuery API and by changing Bootstrap's default styles.

Custom CSS

The custom Cascading Style Sheet is included last and can overwrite any style defined above.

Example: changing the color of collapsible panels holding the element names.

.panel-default > .panel-heading {
background-color: Chocolate;
color: Cornsilk;
}

Formating the comments to wrap and fill the window instead of adding scroll bars can be achieved with the following CSS code:

pre.comment {
white-space: pre-wrap;
word-break: keep-all;
}

Custom JavaScript

The custom.js JavaScript file is included at the end of the HTML and it can completely change the content of the page.

Adding a custom "CONFIDENTIAL" warning to TOC and every page header can be done using jQuery.

$('body').prepend('<div class="alert alert-warning text-center" role="alert">CONFIDENTIAL</div>');

Customizing the TOC page and the content pages separately can be achieved by testing the window name:

if (window.name === "content")
$('body').prepend('<div class="alert alert-warning text-center" role="alert">This is the content frame</div>');

if (window.name === "toc")
$('body').prepend('<div class="alert alert-warning text-center" role="alert">This is the toc frame</div>');

A similar approach can be used to customize individual pages based on the file name:

if (window.location.pathname.split('/').pop() === "summary-overview.html")
$('body').prepend('<div class="alert alert-warning text-center" role="alert">This is the the summary page</div>');

Customizing the "Generated from" links that point to the relative path of the file used to generate that page can be achieved by maching all the links with the href starting with ../sv and replacing the href prefix with the new prefix http://some/external/location/sv :

if (window.name === "content") {
$('hr')
.next('a[href^="../sv"]')
.attr('href', function() {
return this.href.replace(/^file:.*\/sv/, 'http://some/external/location/sv')
})
.attr('target', function() {
this.target = "_blank";
});
}