Jos haluat muokata kyselyn ulkoasua CSS-koodien avulla, täältä löydät siihen pari vinkkiä. Klikkaa Ulkoasu-näkymässä </>-symbolia ja vasemmalle avautuu 'Mukautettu CSS' -tekstikenttä. Kopioi ja liitä koodi alimmaiseksi kenttään.
Voit muokata kyselyä esimerkiksi seuraavilla koodinpätkillä:
Vaihda rivin leveyttä Asteikko- ja Taulukko-kysymyksissä
.element .table.scale .td.block { width: 40%; }
Jos haluat kysymyksen kapeammaksi, voit vaihtaa width-arvoa 50% ja 90% välillä.
Jos haluat muokata vain tiettyä kysymystä, käytä alla olevaa koodia.
.element[elementname="p0e0"] .table.scale .td.block { width: 40%; }
p0e0 on kysymyselementin "fyysinen" paikka lomakkeella. Ylläolevassa esimerkissä ensimmäisen sivun ensimmäinen kysymys. Arvojen p sekä e laskeminen aloitetaan nollasta, sisällytä kuva- ja tekstielementit laskuun. Lisätietoa täältä.
Muokkaa kysymyselementtien korkeuseroa edelliseen kysymykseen
.element { margin-bottom: 100px; }
Keskitä kaikkien kysymyselementtien otsikkotekstit
.element h1, .element h3
{
text-align: center;
}
Vaihda Kuvavalinta-kysymyksen kuvien kokoa
.element .imageselection.options .option > .image:not(.empty) { padding-top: 50%; background-size: contain !important; }
Muuta sarakkeen väriä Asteikko- ja Taulukko-kysymyksissä
.tr.statement .tr.options .td:nth-child(3)
{
background-color: red;
}
Vaihda numeroa (3) vaihtaaksesi värin eri sarakkeeseen. Jos haluat määrittää värin vain tiettyyn kysymykseen, käytä alla olevaa koodia.
div[elementname="p0e0"] .tr.statement .tr.options .td:nth-child(2)
{
background-color: red;
}
p0e0 on kysymyselementin "fyysinen" paikka lomakkeella. Ylläolevassa esimerkissä ensimmäisen sivun ensimmäinen kysymys. Arvojen p sekä e laskeminen aloitetaan nollasta, sisällytä kuva- ja tekstielementit laskuun. Lisätietoa täältä.
Muuta Yksi valinta-kysymyksen valintanapin kokoa
Vaihda width- ja height-arvot haluamaksesi ja varmista että border-radius täsmää uuteen kokoon.
.element .options .field.radio {
width: 24px;
height: 24px;
border-radius: 100%;
}
.element .options .field.radio label:after {
width: 16px;
height: 16px;
}
Piilota navigaatio-painikkeita kyselystä
CSS koodiesimerkki:
.page-container .controls button[class~="returnsubmit"]
{
display: none;
}
Korvaa returnsubmit ylläolevasta esimerkistä haluamallasi arvolla:
save = Tällä napilla vastaaja voi tallentaa ja jatkaa vastaamistaan myöhemmin kun kutsut on lähetetty sähköpostikutsuina Surveypalista.
submit = Viimeisellä sivulla oleva "Lähetä vastaukset" -nappi
next = Nappi jolla liikutaan kyselyssä eteenpäin
prev = Nappi jolla liikutaan kyselyssä taaksepäin
returnsubmit = Jos kysely on lähetetty Surveypalista sähköpostikutsuina, tällä napilla vastaaja voi Kiitos-sivulta palata muokkaamaan vastaustaan
Kavenna Numeroasteikko-kysymyksen leveyttä
@media (min-width: 768px) {
.element.eimagescale .options, .element.eimagescale div .extremes
{
width: 70%; margin: auto;
}}
Vaihda prosenttiarvoa muuttaaksesi kysymyksen leveyttä.
Ylläoleva CSS-koodi vaikuttaa kyselyn kaikkiin kysymyksiin, jos haluat muokata vain tiettyä kysymystä käytä tätä koodia:
@media (min-width: 768px) {
.element[data-elementname="p0e0"].eimagescale .options, .element[data-elementname="p0e0"].eimagescale div .extremes
{
width: 70%; margin: auto;
}}
p0e0 on kysymyselementin "fyysinen" paikka lomakkeella. Ylläolevassa esimerkissä ensimmäisen sivun ensimmäinen kysymys. Arvojen p sekä e laskeminen aloitetaan nollasta, sisällytä kuva- ja tekstielementit laskuun. Lisätietoa täältä.