Assets and Styling ================== Every planner needs images, stylesheets and possibly custom fonts. This page explains where to put those files, how to reference them from a template and the CSS patterns that make pages look correct in both the browser and the generated PDF. **Key topics** * Where to store CSS, images and fonts. * How asset paths work (relative to the planner directory). * Key CSS classes: ``@page``, ``.page``, ``.back``. * Page breaks. * Custom fonts with ``@font-face``. * Do and don't for asset management. Where assets live ----------------- All assets go in the ``assets/`` subfolder inside the planner directory:: planners/ +-- demo/ |-- demo.html |-- params.xml +-- assets/ |-- cover.png |-- demo.css +-- cormorant-garamond.woff2 This layout matters because paths inside your template are resolved relative to the planner directory (where the template lives). Since ``assets/`` sits right next to the template, the correct relative path from the template to any asset is ``{{ base }}/assets/``. Path rules ---------- .. list-table:: :header-rows: 1 :widths: 50 50 * - Do - Don't * - ``href="{{ base }}/assets/my.css"`` - ``href="/assets/my.css"`` (leading slash - breaks PDF) * - ``src="{{ base }}/assets/cover.png"`` - ``src="C:/repo/assets/cover.png"`` (absolute - breaks on other machines) * - ``href="#page1"`` - ``href="{{ base }}/#page1"`` (don't prefix internal links) Always prefix files paths with ``{{ base }}/``. Pyplanner sets this variable to the correct path prefix for the current output target so that the browser can find every file. .. warning:: Never use absolute paths or paths that start with ``/``. They will break when someone else clones the repository or when the PDF generator runs. Linking a stylesheet -------------------- Use a standard ```` tag inside ````: .. code-block:: html+jinja You can link multiple stylesheets. For example you might have one for layout and one for fonts: .. code-block:: html+jinja Adding images ------------- Background images use ````: .. code-block:: html+jinja

My Planner

Inline images (such as icons or decorations) use a regular ```` tag without the ``back`` class: .. code-block:: html+jinja

.. tip:: Use PNG for images with transparency and JPG for photos. Keep images at a reasonable resolution - 300 DPI at A4 size is roughly 2480 x 3508 pixels. For non-detailed backgrounds 120 DPI is enough (~1024 x 1536 on A4 page). Key CSS patterns ---------------- These are the essential CSS patterns every planner template needs. The Demo Planner already uses them in its ``