Formatting toggles with CSS

Products
Support
Company
Free Trial
News
Contact
Buy Now

Zoom Window Out
Larger Text | Smaller Text
Hide Page Header
Show Expanding Text
Printable Version
Save Permalink URL

Navigation: Basic Working Procedures > Toggles: Expanding Text and Images

When your help is exported to HTML-based formats the <a> link tags for the text toggles and the <img> tag for the image toggles are exported with CSS classes, which makes it possible to change the appearance and behavior of your toggle links by adding CSS style definitions for these classes to the HTML template for your topic pages.

Following the instructions in this topic requires some experience with writing HTML manually and using CSS styles. If you feel stumped by this we recommend that you get an experienced friend or colleague to help you.

See the Using HTML Templates and About HTML Templates chapters more information on using and editing HTML templates.

The CSS class names for the toggle link types

Help+Manual exports CSS classes to the tags used of all three toggle types. The classes are applied three different components of the expanding section drop-down toggles. The expanding inline text toggles and expanding image toggles only have one component each with a class.

You must use the classes directly as properties of the tags that you want to apply them to, otherwise they won't work properly. For example, you must use the syntax img.image-toggle {} for defining styles for your image toggles and a.inline-toggle {} and a.dropdown-toggle {} for defining styles for your text toggle links.

Toggle Type	Class Name	Notes
Expanding section toggles link:	dropdown-toggle	This is the class of the <a> tag of the link that the user clicks on to activate the toggle: <a class="dropdown-toggle" href="javascript:HMToggle('toggle','TOGGLE0186A1','TOGGLE0186A1_ICON')">...
Expanding section toggles body:	dropdown-toggle-body	This is the class of a DIV element that encloses the actual table containing the toggle. This element also contains the ID of the toggle. <div id="TOGGLE0186A1" class="dropdown-toggle-body" ><table...
Expanding section toggles icon:	dropdown-toggle-icon	Class of the <img> tag for the toggle icon, if one is used. It also contains the toggle ID with the suffix _ICON. <img id="TOGGLE0186A1_ICON" class="dropdown-toggle-icon"...
Expanding inline text toggles:	inline-toggle	Class of the <a> tag that the user clicks on to activate the toggle: <a class="inline-toggle" href="javascript:HMToggle('toggle','TOGGLE0186A1')">
Expanding image toggles:	image-toggle	Class of the <img> tag containing the preview image. It is enclosed in an <a> tag without a class or ID that makes the image clickable: <a href="demoimage.png"><img id="TOGGLE0186A1" class="image-toggle" src="demoimage_zoom50.png"/></a>

Example of style CSS class definitions for toggles

The following example shows you how to format your toggle links and images with a CSS style definition using the class names listed above. The style definitions are shown inserted in the standard HTML template for topic pages. The toggle styles are shown in blue, the other style definitions are for the other hyperlink types in the help.

Sample CSS Definitions for Toggles

<%DOCTYPE%>

<html>

<head>

a { color: #0000FF; text-decoration: none }

a:visited {color: #0000FF }

a:hover {color: #E4641C; text-decoration: underline }

a.weblink {color: #0000FF; text-decoration: underline }

a.weblink:visited {color: #0000FF}

a.weblink:hover {color: #E4641C }

a.popuplink {color: #FF0000; text-decoration: none}

a.popuplink:visited {color: #FF0000}

a.popuplink:hover {color: #FF0000; text-decoration: underline}

a.filelink {color: #04BC14; text-decoration: none}

a.filelink:visited {color: #04BC14}

a.filelink:hover {color: #04BC14; text-decoration: underline}

a.dropdown-toggle {color: Navy; text-decoration: none; font-weight: bold; font-family: "Times New Roman", Times, serif; }

a.drop-down-toggle:visited {color: Navy; }

a.drop-down-toggle:hover {text-decoration: underline}

a.inline-toggle {color: Green; text-decoration: none; font-weight: bold; font-family: "Times New Roman", Times, serif; }

a.inline-toggle:visited {color: Green; }

a.inline-toggle:hover {text-decoration: underline}

img.image-toggle { border: border-width: 2px; border-color: red; border-style: solid;}

</style>

</head>

....

Please enable JavaScript to view this site.

Sample CSS Definitions for Toggles