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 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 editor or text editor to create a CSS file. Give it a 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 your CSS file to the HTML layout.

    The CSS setting for uploading your CSS file is in the CSS, JS, logos and other assets section.

    CSS settings box with a single field. The field has an Upload button.

    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, and find the custom CSS file that you uploaded to your layout. It is called "layout-custom-style.css" if you have enabled the Persistent CSS file name option for your layout. 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.

  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 Branding your HTML Outputs 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.