Skip to main content

HTML Styling Workflow

To customize and style HTML outputs, use a CSS stylesheet. There are also some general settings in the HTML layout that affect the output as a whole.

We recommend that you follow these steps to style your HTML:

  1. Create your content in Paligo topics and add it to a publication. Some parts of the content can be styled by using attributes, for example, you can set image sizes. But you will apply most of the styling in the HTML layout and in a CSS stylesheet.

  2. Create an HTML5 (or plain HTML) layout or edit an existing one.

  3. Use the layout settings to choose your publishing settings. These are "overall" settings that apply to the content as a whole. You do not set styles such as headings, font sizes, font colors etc., in the layout. For HTML, you define those in a CSS stylesheet that you can then upload to your layout.

  4. Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

  5. Give your CSS a simple rule to start with, so that the file is not empty. The rule does not have to contain any styling yet, for example, you could add:

    body {
}

  6. Upload Customized CSS.

    Note

    You can also use JavaScript to customize your published output. You can upload your custom javascript to the HTML layout too.

  7. Select Save.

  8. Publish any publication that contains a sample of the content that you want to style. When you publish, use the HTML layout that you edited in steps 2-7.

  9. When your content is published, unzip the zip file that is downloaded in your browser.

  10. Open the Index.html file to display your HTML output.

  11. In the unzipped files, go to the out/en/css folder to find the custom CSS file uploaded to your layout. If the Persistent CSS file name option is enabled for your layout, the file is called "layout-custom-style.css", otherwise, it has a random number ID as its name.

    Note

    en is the folder for English content. For other languages, there is a different language code, see ISO Language Codes.

  12. Open the CSS file in a text or code editor and add rules in the CSS. Then refresh your browser to see the effects on your help output.

    Tip

    Use the browser tools to inspect elements and test style changes directly in the browser, before you add styles to your CSS file. For tips on using the browser tools, see Style with CSS.

  13. When you are happy with your styling, upload your customized CSS file to your layout again. Paligo will apply your new styles the next time you publish.

Tip

For tips on styling a HTML5 help center, see HTML5 Help Center Styling.