Using a custom CSS stylesheet to format HTML output
Adding a custom CSS file for formatting your ePublisher output is easy. First, copy the file into your project's Files folder. Then, in the ePublisher Pro Style Designer, choose Page Styles. Select either the Default style (you may need to add it), or the custom page style to which the new CSS document should apply. On the Options tab, click the button in the Value field of the "Custom document css file" setting, and choose your file from the list. Then, regenerate output to apply the changes.
But, what if you have more than one custom CSS file? What if you are integrating your output into a website with modular style documents?
You can hard-code the location of a custom CSS document (or many) into the page template for each topic page. This should work fine, as long as the CSS file remains in the same place and you wish to apply it to each page in your output.
You'll need to perform an override on a file called Page.asp, which serves as the page template for your topic pages. It is located by default in the ePUblisher Pro installation directory here: ePublisher Pro/Formats/Dynamic HTML/Pages/Page.asp
For information on the override procedure, please see our online TechNote article here: http://webworks.com/technotes/articles/ePublisherPro/EX_ePub_Project_Format_Overrides.36.1.aspx
Once you have copied the file into the proper location within your project folder, open it with a text editor, such as NotePad. To apply the new custom CSS stylesheet after the pre-existing style definitions, find this line near the top of the document:
<link wwpage:condition="document-css" rel="StyleSheet" href="css/document.css" wwpage:attribute-href="document-css" type="text/css" media="all" />
Below that, add this line: <link rel="StyleSheet" href="css/custom.css" type="text/css" media="all" />
where "custom.css" represents the chosen file name of your custom CSS document. Repeat the process for all additional external CSS files. If you prefer to reference a CSS file in another location, replace the entire href value with the URL or path to that file. Otherwise, save and close Page.asp.
Next, open the "Files" folder within your project directory. Create a new folder named 'css'. Copy your custom CSS file(s) into that css folder. Finally, regenerate your output to apply the changes.
If you don't get the desired results, or if you have any other questions concerning this issue, please submit a support case. If you wish to apply the new CSS files only to certain Page Styles, you'll need additional overrides to implement conditional statements in Page.asp. Such custom overrides are not covered by technical support.