This article will help you include a new stylesheet in a project, allowing you to customize the look of your documentation. There are two ways you can add a new stylesheet to your documentation.
Adding a New Stylesheet to your project
You can add a new stylesheet to your project which is useful to keep project specific changes in. You can do this by:
- Clicking the New Stylesheet ribbon button on the Project ribbon tab
- You can then edit this (or an existing custom stylesheet) by double-clicking on it in the Project Explorer (under the Other Files folder) or right-clicking the stylesheet and selecting Edit.
- In the stylesheet editor click the Add a new Style Rule toolbar button or manually enter the CSS in the editor with the Source view selected
- The custom style can then be edited in the visual designer by selecting it in the tree then switch to the Visual view, or manually edited in the Source view
Adding a New Stylesheet to a Custom Template
You can add a stylesheet to a custom template - which is useful for company branding changes that are used in multiple projects. You can do this by:
- Opening an existing custom template for editing, or create a new custom template (more information on creating custom templates can be found in the online help under Customization).
- In the Template editor, select the Other Files page menu item
- Right-click the packages folder and select Open in Windows Explorer context menu option. From there, you need to create a new folder named "Custom" and then a new folder in that directory named "CSS".
- In this folder, you need to create your new custom stylesheet - you can do this in Notepad by saving a new CSS file named custom.css in this directory.
- Back in Document! X and HelpStudio, Right-click on the packages folder and select the Add Existing Other File context menu option - from there, navigate into the "templates/packages/Custom/CSS" directory and then select the stylesheet you created in step 4. Your custom template should be added like this:
Keeping custom styles separate from the standard stylesheets ensures that the custom template can continue to get bug fixes and updates automatically without conflicting with edits made to the standard files.
- You then need to add a reference to this stylesheet in this template by navigating to Page Types on the left-hand menu of the custom template editor, select the top level page type (e.g. for the Browser Output, Master.base.html) and click edit - you will need to make a reference to the custom stylesheet file you have added to your template by adding this to the <head> of the page type, above the DXMetadata item for Stylesheets. :
<link rel="stylesheet" type="text/css" href="template/packages/custom/css/custom.css">
- You will need to repeat these steps for all topics templates that reference a custom template added to the Templates Other Files and for each custom stylesheet you have added - including custom Booklet Topics Templates. Document! X users will need to add this reference to any documentation template they are using - such as to a custom .NET Assembly template.
- In some templates (such as the Booklet Topics Template), you will need to add this reference to all the page types as they are all on the top level.
- You can then open the stylesheet by right-clicking the newly added stylesheet and selecting Edit.
- In the newly added stylesheet In the stylesheet editor click the Add a new Style Rule toolbar button or manually enter the CSS in the editor with the Source view selected.
- The custom stylesheet can then be edited in the visual designer by selecting it in the tree then switch to the Visual view, or manually edited in the Source view.
For more information on creating a custom template, please visit this Knowledge-base article: https://innovasys.zendesk.com/hc/en-gb/articles/360000765543-Creating-A-Custom-Template