# Style Templates

## Style Templates

Use this section when you need to control how an S-Docs template looks.

In S-Docs, styling is usually done directly in the **Template Editor**. You can style the document body with HTML and CSS, adjust page-level rendering in template settings, and use generated CSS blocks for features like related lists and PDF-Upload fields.

### How styling works in the Template Editor

Most styling work falls into one of these layers:

1. **Document structure**
   * Build layout with basic tables.
   * This gives you the most predictable output.
2. **CSS in the template body**
   * Add reusable rules in a `<style>` block.
   * Use inline styles for one-off formatting.
3. **Generated styling blocks**
   * Related lists inserted from the editor include CSS classes you can edit.
   * PDF-Upload fields include style controls for positioned text on the uploaded PDF.
4. **Dynamic styling with merge fields**
   * Use merge fields inside CSS when formatting should change by record.
5. **Template settings**
   * Use the editor tabs for page size, margins, preview behavior, and character rendering.

### Recommended approach

Start simple and build from the outside in:

{% stepper %}
{% step %}

### Build the layout first

Use basic tables for the main document structure.

This is the safest approach for PDF-style output.
{% endstep %}

{% step %}

### Add reusable CSS rules

Place shared rules in a `<style>` block near the top of the template.

Use this for fonts, spacing patterns, borders, and repeated classes.
{% endstep %}

{% step %}

### Add targeted inline styling

Use inline styles for single elements that need one-off formatting.

Keep these limited so the template stays easy to maintain.
{% endstep %}

{% step %}

### Add dynamic styling only when needed

Use merge fields inside CSS for values like colors, widths, or display states.

This is useful when formatting depends on Salesforce data.
{% endstep %}

{% step %}

### Finish with template-level settings

Use Page Settings and Document Options for page dimensions, margins, preview setup, and Unicode support.
{% endstep %}
{% endstepper %}

### Best practices

Keep these rules in mind when styling S-Docs templates:

* Use table-based layout, even for headers and footers.
* Avoid web-style layouts that depend on modern browser behavior.
* Prefer percent-based column widths over fixed pixels.
* Avoid margins when table spacing will do the job better.
* Minimize tags with built-in browser styling.
* Test preview output early with realistic record data.

{% hint style="info" %}
If a design needs exact visual placement on top of an existing form, use a PDF-Upload template. If you need more flexible layout control, use a standard template and style it in the body.
{% endhint %}

### Start with these guides

* [S-Docs Template Development Best Practices](/sdocs/template-architecture/template-authoring/s-docs-template-development-best-practices.md) for layout and CSS conventions.
* [Related List Tables and CSS](/sdocs/template-architecture/template-authoring/related-list-tables-and-css.md) for styling generated related list tables.
* [CSS Styling with Merge Fields](/sdocs/template-architecture/template-authoring/css-styling-with-merge-fields.md) for data-driven styling.
* [How to Add a Background Image or Watermark](/sdocs/template-architecture/template-authoring/how-to-add-a-background-image-or-watermark.md) for page background styling.
* [Template Formatting and Design](/sdocs/template-architecture/template-settings/header-and-footer-tabs.md) for page sizes, Unicode support, and preview setup.

### Common styling tasks

#### Change fonts, spacing, borders, or alignment

Do this in the template body with table markup, CSS classes, and inline styles.

#### Style a related list table

Insert the related list in the editor, then edit the generated CSS classes for the table, columns, and alternating rows.

#### Make styling depend on Salesforce data

Use merge fields inside a style attribute or CSS rule.

Example uses:

* Background color from a field
* Conditional text color
* Dynamic width for a progress-style bar

#### Add a background image or watermark

Use a background style rule on the page body.

#### Fix international character rendering

Use **Document Options** to enable Unicode support and adjust enforcement when needed.

### When to use which method

* Use **body CSS** for most visual formatting.
* Use **related list CSS** when the editor generates the table for you.
* Use **merge fields in CSS** when styling must change per record.
* Use **template settings** for page behavior and rendering controls.
* Use **PDF-Upload field styling** when placing fields on a fixed PDF design.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.sdocs.com/sdocs/template-architecture/template-authoring.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.