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.

Katso myös lista ja kuvaukset MyCashflow'n tilaustulosteista.

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>

Perinteisen oletusteeman PDF-tulosteiden käyttäminen omissa räätälöinneissä

Jos haluat käyttää perinteisen oletusteeman PDF-tulosteita omien räätälöintien pohjana, sinun on ladattava teema ja lisättävä tulosteen muokattu sivupohja ja sen tyylitiedosto oikeisiin paikkoihin omassa teemassa.

  1. Lataa MyCashflow'n vanha oletusteema (suora latauslinkki).
  2. Kopioi haluamasi tulosteen pohja teemasi juurikansioon ja tee siihen haluamasi muutokset.
    Löydät tulosteiden pohjat teeman juurikansiossa sijaitsevista tiedostoista:
    • dispatchnote.html
    • invoice.html
    • receipt.html
  3. Kopioi css/printables.css tiedosto omaan teemaasi.

    Luo tarvittaessa omaan teemaan kansio css/ ja sijoita sinne printables.css