Brändäys: logo, värit ja oma CSS

Pro- ja Unlimited-tapahtumissa puhujan sivu ja puhujille lähtevät sähköpostit näyttävät tapahtumaltasi. Deckhandoff näkyy vain pienenä rivinä sivun alareunassa. Asetukset ovat hallinnan Brändäys-sivulla. Voit tehdä ne ja katsoa esikatselua myös Basic-tapahtumassa, mutta puhujille ne näkyvät vasta, kun tapahtuma on Pro.

Nopeasti alkuun

1. Avaa hallinnasta Brändäys.
2. Lataa logo (PNG, JPEG tai WebP, enintään 512 kt). Vaalea tai läpinäkyvä logo toimii tummalla yläosalla.
3. Valitse yläosan väri ja korostusväri. Tekstin väri valitaan automaattisesti niin, että se erottuu.
4. Halutessasi lataa taustakuva yläosaan (vähintään 1600 px leveä). Sen päälle tulee tumma kerros, jotta teksti erottuu.
5. Kirjoita lähettäjän nimi ja vastausosoite puhujien sähköposteille ja valitse Tallenna.
6. Tarkista tulos esikatselusta. Esikatselu käyttää keksittyjä tietoja, joten se ei näy puhujille eikä merkitse ketään käyneeksi.

Sähköpostit

• Lähettäjän nimi näkyy puhujan postilaatikossa, esim. ”Esimerkkifestivaali”. Tyhjänä käytetään tapahtuman nimeä.
• Viestit lähtevät edelleen osoitteesta asiakaspalvelu@deckhandoff.fi, jotta ne eivät päädy roskapostiin. Kun puhuja vastaa, vastaus menee vastausosoitteeseen.
• Viestin alussa on logosi, ja painike on korostusvärilläsi.

Oma CSS

Omalla CSS:llä voit hienosäätää puhujan sivua. Se lisätään sivulle värien ja taustakuvan jälkeen, joten se voi ohittaa ne. CSS koskee vain puhujan sivua, ei sähköposteja, hallintaa eikä ohjeita.

Muuttujat

Helpoin tapa vaihtaa värejä on muuttujat. Värikentät asettavat samat muuttujat.

• --brand-800 yläosan väri, --brand-900 sen tummempi sävy, --brand-700 vaaleampi sävy
• --brand-yellow korostusväri (painikkeet ja valinnat), --brand-yellow-600 sen tummempi sävy, --brand-on-accent teksti korostusvärin päällä
• --brand-on-dark ja --brand-on-dark-muted teksti yläosassa
• --bg sivun tausta, --surface korttien tausta, --fg teksti, --muted toissijainen teksti, --line reunat, --accent linkit

:root {
  --brand-800: #2b0a3d;       /* yläosan väri */
  --brand-900: #1a0626;       /* yläosan tumma reuna */
  --brand-yellow: #ff5a36;    /* painikkeet ja korostukset */
  --brand-on-accent: #ffffff; /* teksti painikkeissa */
}

Luokat

• .app-band yläosa kokonaisuudessaan (sama elementti on myös [data-brand="pro"])
• .app-brand .event-logo logo, .app-pill kielivalinta
• .app-hero h1 session nimi, .app-eyebrow pieni otsikko sen yllä, .app-chips li päivä, aika ja nimi
• .card sisältökortit, .card > h2 korttien otsikot
• .btn painikkeet, .btn.primary pääpainike (Lataa)
• .drop tiedostojen pudotusalue, .steps toimitusketju, .badge tilamerkki
• .footer sivun alaosa, .powered-by Deckhandoff-rivi

Esimerkkejä

.btn { border-radius: 999px; }
.card { border-radius: 4px; box-shadow: none; }

/* Käytä fonttia, joka on puhujien koneissa valmiina. */
.app-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}

.app-band { background: var(--brand-800); }
.app-band::before { display: none; }

.app-brand .event-logo { height: 52px; max-width: 18rem; }

/* Tumma teksti vaalealla yläosalla */
:root {
  --brand-800: #f4efe6;
  --brand-900: #e8dfcf;
  --brand-on-dark: #1b1d21;
  --brand-on-dark-muted: #4a4f58;
}
.app-hero h1 { color: #1b1d21; }
.app-band::before { display: none; }

.drop {
  border-style: solid;
  border-color: var(--brand-yellow);
  background: color-mix(in srgb, var(--brand-yellow) 8%, var(--surface));
}
.drop-icon { background: var(--brand-yellow); color: var(--brand-on-accent); }

Rajoitukset

• Turvallisuussyistä CSS ei voi ladata mitään ulkopuolelta: @import, ulkoiset kuvat (url(https://…)) ja verkkofontit (@font-face) ohitetaan. Omat kuvasi voit käyttää Logo- ja Taustakuva-kentillä.
• Verkkofontteja ei tueta. Käytä fontteja, jotka ovat koneissa valmiina, esim. Georgia, "Helvetica Neue", Arial tai system-ui.
• CSS:n enimmäispituus on 20 000 merkkiä. Tallennus kertoo, jos jotain ohitettiin.
• Luokkien nimet voivat tarkentua myöhemmin. Muuttujat pysyvät samoina, joten käytä niitä, kun voit.

Kokeile muutokset aina esikatselussa ennen kuin kutsut lähtevät. Jos jokin näyttää oudolta, tyhjennä oma CSS ja tallenna, niin sivu palaa värien ja logon mukaiseksi.