Additional Theme Customizations

NetHelp themes are designed to be fully customized. You can change virtually any aspect of a theme and add whatever effects and widgets you can think of. Many customizations can be done with the Theme Designer (see Using the NetHelp Theme Designer), but others can be done by manually editing files within the theme.

Before starting a customization, create a new theme. See Customizing NetHelp Themes.

Manual customization is restricted to the following files (Tabs and Accordion themes only):

  • layout.html to change the theme layout.
  • user.css to change styles in the theme.
  • user.js to add new scripts to the theme.
  • settings*.xml This file should only be modified in an advanced scenario where you add new aspects to the theme and you want those aspects to be customizable by other users in the Theme Designer.

Other files in the theme should not be edited because Doc-To-Help will overwrite them during an upgrade. All changes should be restricted to the four files above.

Note Customized themes (which include the files above) are stored by default on your computer in C:\Users\[username]\Documents\My Doc-To-Help Projects\Doc-To-Help\Themes\NetHelp 2.0\Themes\[name of theme]. Make sure to edit the files stored in the folder for your custom theme and not one of the default themes.

Example  

Let's say you create a custom NetHelp theme named "Test." This is where it will be located. Manually edit the files in this folder.

Following are examples for changing the theme stylesheet.

Example — Changing the Header Font

Change in user.css:

Copy 
#c1headerText
{
    margin: 0;
    font-family: Georgia, Times, "Times New Roman";
    font-family: Tahoma, Arial, sans-serif;
    font-style: italic;
}

Example — Changing the Header Alignment

Add to user.css:

Copy 
#c1headerPanel
{
    width: 100%;
}

Change in user.css:

Copy 
#c1headerText
{
    margin: 0;
    font-family: Georgia, Times, "Times New Roman";
    font-style: italic;
    text-align: right;
    margin-right: 10px;
}

Example — Changing the Font of the Left Panel Tabs

Add to user.css:

Copy 
#c1sideTabsHeader li
{
    font-weight: bold;
    font-style: italic;
}

Example — Changing the Contents Panel Font

Add to user.css:

Copy 
#c1toc li
{
    font-family: Monotype Corsiva;
}

Example — Changing the Index Panel Font

Add to user.css:

Copy 
#c1index li
{
    font-family: Monotype Corsiva;
}

Example — Changing the Search Panel Font

Add to user.css:

Copy 
#c1search li
{
    font-family: Monotype Corsiva;
}

Example — Changing the Highlighting Color of Search Hits

Add to user.css:

Copy 
.search-highlight
{
    background-color: Lime;
}

Example — Changing the Breadcrumbs Font

Change in user.css:

Copy 
#c1breadcrumbs
{
    font-size: .9em;
    font-family: Courier New;
}

Example — Removing the Line Under the Breadcrumbs

Change in user.css:

Copy 
#c1breadcrumbs
{
    border: none;
}

Example — Changing the Link Font

Change in user.css:

Copy 
#c1topicPanel a[href],
#c1topicPanel a[data-ref],
.topic-popup a[href],
.topic-popup a[data-ref],
.aklinks-menu a 
{
    color: #1B75BB;
    text-decoration: none;
    font-style: italic;
}

Following are examples of manual customization (Tabs and Accordion themes only).

Example — Showing Some Text to the Right of the Header

Change in layout.html:

Copy 
<table id="c1headerPanel" border="0" cellpadding="0" cellspacing="0">
    <tr id="c1headerPanelRow0">
        <td id="c1headerLogoCell">
            <img id="c1headerLogo" src="images/d2h_logo_placeholder.png" alt="Logo" class="logo" />
        </td>
        <td id="c1headerTextCell">
            <h1 id="c1headerText"></h1>
        </td>
        <td id="headerRightCell">
            <em>Powered by Doc-To-Help</em>
        </td>
    </tr>
</table>

Add to user.css:

Copy 
#c1headerPanel 
{
    width: 100%;
}
#headerRightCell 
{
    text-align: right;
    padding-right: 10px;
}

Example — Adding a Footer

Add a <div> element to layout.html:

Copy 
<div id="c1page" class="abs fill-h fill-v crop">
    <div id="c1header" class="abs fill-h crop ui-widget ui-state-hover">
    ....
    </div>
    <div id="c1main" class="abs fill-h">
    ....
    </div>
    <div id="mainFooter" class="crop ui-widget ui-state-hover">
        Footer text
    </div>
</div>

Add to user.css:

Copy 
#mainFooter 
{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
}
#c1main 
{
    bottom: 32px;
}

Example — Adding a Header and Footer to the Topic Panel

Add two <div> elements to HTML in layout.html:

Copy 
<div id="c1topicPanelInner" class="abs fill-h fill-v scroll">
    <div id="topicHeader" class="ui-widget-content">
        Topic header text
    </div>
    <div id="c1topicBar">
        <div id="c1breadcrumbs" style="display:none;"></div>
        <div id="c1collapsiblePanel" style="display:none;">
            <span id="c1expandAll"><span class="icon"></span><a class="label">Expand All</a></span>
            <span id="c1collapseAll"><span class="icon"></span><a class="label">Collapse All</a></span>
        </div>
    </div>
    <div id="c1topic"></div>
    <div id="topicFooter" class="ui-widget-content">
        Topic footer text
    </div>
</div>

Add to user.css:

Copy 
#topicHeader {
    margin: 5px 20px;
    border-width: 0 0 1px 0;
}
#topicFooter {
    margin: 25px 20px 5px 20px;
    border-width: 1px 0 0 0;
}

Example — Adding Nonscrolling Header and Footer Into the Topic Panel

Add two <div> elements to HTML in layout.html:

Copy 
<div id="c1topicPanel" class="content-topic abs fill-h ui-corner-all topiconly-container" style="display:none;" data-c1-role="topic">
    <div id="topicHeader" class="ui-widget-content">Header text</div>
    <div id="c1topicPanelInner" class="abs fill-h fill-v scroll">
        <div id="c1topicBar">
            <div id="c1breadcrumbs" style="display:none;"></div>
            <div id="c1collapsiblePanel" style="display:none;">
                <button id="c1expandAll" class="flat ui-widget-content">
                    <span id="c1expandAllIcon" class="icon"></span>
                    <span id="c1expandAllLabel" class="label">Expand All</span>
                </button>
                <button id="c1collapseAll" class="flat ui-widget-content">
                    <span id="c1collapseAllIcon" class="icon"></span>
                    <span id="c1collapseAllLabel" class="label">Collapse All</span>
                </button>
            </div>
        </div>
        <div id="c1topic">
        </div>
    </div>
    <div id="topicFooter" class="ui-widget-content">Footer text</div>
</div>

Add to user.css:

Copy 
#topicHeader 
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2em;
    border-width: 0 0 1px 0;
}
#topicFooter 
{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    border-width: 1px 0 0 0;
}
#c1topicPanelInner 
{
    top: 2.2em;
    bottom: 2.2em;
}