Formatting toggles with CSS |
  
|
Formatting toggles with CSS |
|
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.
Help & Manual exports CSS classes to the main tags of all three toggle types. The classes are applied to the <a> link tags for the expanding section and expanding inline text toggles and to the <img> image tag for the expanding image toggles. You must use the classes directly as properties of the tags that you want to apply them to, otherwise they won't work properly. This means that 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.
|
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.
|
See also:
