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' -ikkuna. Kopioi ja liitä koodi alimmaiseksi kenttään.
Voit muokata kyselyä esimerkiksi seuraavilla koodinpätkillä:
Estä sanojen katkeaminen useamman rivin vaihtoehdoissa valintaelementeissä
div.element.eoption .option .value-container label.label
{
word-break: keep-all;
}
Keskitä kaikkien elementtien otsikot
.element h1, .element h3
{
text-align: center;
}
Lisää hover-efekti tyytyväisyys elementtiin
Kun hiiren osoitin viedään hymiön päälle niin sen väri muuttuu hieman tummemmaksi jo ennen klikkaamista.
.element.satisfaction .option {
opacity: 0.8;
}
.element.satisfaction .option:hover {
opacity: 1;
}
Mahdollista kyselyn täyttö ruudunlukulaitteilla ja -ohjelmilla
Korvaa kaikki mukautettu CSS alla olevalla koodilla.
.field.radio, .field.checkbox
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
background-color: transparent;
}
.field.radio input, .field.checkbox input
{
visibility: visible;
}
Muokkaa yksi valinta -elementin valintanapin kokoa
Voit muokata yksi valinta -elementin valintanapin kokoa alla olevalla koodilla. Vaihda vain width ja height -arvoja sekä sovita border-radius arvo vastaamaan muuttunutta kokoa.
.field.radio
{
width: 24px;
height: 24px;
border-radius: 12px;
}
.field.radio label:after
{
width: 16px;
height: 16px;
}
Muokkaa asteikon ja taulukon sarakkeen väriä
.tr.statement .tr.options .td:nth-child(3)
{
background-color: red;
}
Kaarisulkeiden sisällä oleva luku määrittää sarakkeen jonka väriä säädetään. Jos haluat muokata vain yhden asteikko- tai taulukkoelementin sarakkeen väriä, käytä alla olevaa koodia.
div[elementname="p0e0"] .tr.statement .tr.options .td:nth-child(2)
{
background-color: red;
}
Koodissa "p0e0" viittaa elementin sijaintiin lomakkeella. "p" viittaa sivunumeroon ja "e" elementin järjestysnumeroon kyseisellä sivulla. Molemmissa laskeminen aloitetaan nollasta.
Muokkaa sarakkeen leveyttä taulukko- ja asteikkoelementeissä
div.element.escale[elementname="p0e0"] .td.block
{
width: 20%;
}
Koodissa "p0e0" viittaa elementin sijaintiin lomakkeella. "p" viittaa sivunumeroon ja "e" elementin järjestysnumeroon kyseisellä sivulla. Molemmissa laskeminen aloitetaan nollasta. Muuttamalla prosenttiarvoa saat muutettua sarakkeen leveyttä.
Voit muokata kaikkia kyselyn taulukko- ja asteikkoelementtien sarakkeiden leveyttä seuraavalla koodilla:
div.element.escale .td.block
{
width: 20%;
}
Säädä elementtien välistä etäisyyttä pystysuunnassa
.element { margin-bottom: 100px; }
Säädä kuvavalintaelementin kuvien kokoa
.element.eimageselection .options
{
width: 70%;
margin: auto;
}
Poista navigointipainikkeet lomakkeesta
div.controls button[name=_returnsubmit]
{
display: none;
}
Erilaisia navigaatiopainikkeita:
_save = Tallenna ja jatka myöhemmin (sähköpostikutsut)
_submit = Lähetä vastaukset
_next = Seuraava
_prev = Edellinen
_returnsubmit = Palaa kyselyyn muokkaamaan vastauksia (sähköpostikutsut)