Tässä artikkelissa käydään läpi tilausten PDF-dokumenttien muokkaaminen teemassa.

Prince XML:n avulla PDF-tiedostojen ulkoasu voidaan määritellä CSS-tyyleillä, joten tulosteiden suunnittelu on yhtä suoraviivaista kuin kaikkien muiden verkkokaupan sivujen.

Alla on esitelty usein MyCashflow-verkkokaupoissa käytettyjä Prince XML:n ominaisuuksia. Lisätietoja Prince XML:n ominaisuuksista löydät ohjelman omista ohjeista.

CSS-tyylit

Tulosteiden ulkoasu määritellään CSS-tyyleillä. Jos kirjoitat tyylit erilliseen tyylitiedostoon, johon viittaat <link>-elementillä, lisää viittauksen kohdeosoitteeseen jokin URL-parametri, jotta tiedostoon tehdyt muutokset päivittyvät aina tulosteen latauksen yhteydessä. Esimerkiksi:

<link rel="stylesheet" type="text/css" href="{ThemeUrl}/css/printables.css?version=123" />

Varmimmin saat muutokset päivittymään välittömästi, kun kirjoitat tyylit samaan tiedostoon sivupohjan kanssa.

Fontit

Voit käyttää tulosteissa haluamiasi fontteja sijoittamalla fontit teemakansioon, ja viittaamalla niihin @font-face-määrityksellä:

@font-face {
    font-family: "Fontin nimi";
    src: url("/files/TEEMAKANSIO/fonts/font.ttf");
}

Tulosteissa käytettävien fonttien tulee aina sijaita teemakansiossa. Et voi hakea niitä esim. suoraan Google Fonts -palvelusta.

Sivun tulostuskoon määrittäminen

Voit määrittää Prince XML:n avulla sivun tulostuskoon. Tämä on erityisen hyödyllistä normaalisti pienikokoisen osoitekortin suunnittelussa.

Sivun tulostuskoko määritellään CSS:n @page-valitsimella:

@page {
    size: A5 landscape;
    margin: 0; padding: 0;
}

SVG-grafiikan käyttäminen tulosteissa

SVG (scalable vector graphics) on kuvatiedostomuoto, jolla on monia etuja verrattuna yleisimmin käytettäviin kuviin (esim. JPG ja PNG). SVG-kuvat ovat tyypillisesti pienempiä tiedostokooltaan ja skaalautuvat niin, että ne näyttävät yhtä tarkoilta missä tahansa esityskoossa.

SVG-kuvia voidaan luoda esimerkiksi Adobe Illustratorilla ja Inkscapella.

MyCashflow'n tulosteissa voit käyttää vektorigrafiikkaa kahdella eri tavalla:

  • Viittaamalla SVG-muotoiseen kuvaan <img>-elementillä:
    <img src="{ThemeUrl}/i/grafiikka.svg"/>
  • Käyttämällä HTML5:n <svg>-elementtiä, jossa voit luoda grafiikkoja itse HTML-tiedoston sisällä:
    <svg>
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" />
    </svg>