Lohkosisältötyylien koodi ajetaan stylis-preprosessorin läpi, mutta muutoin se on tavallista CSS:ää. Koodille pätee nämä säännöt:
Esim. tekstisisältölohkon html-rakenne on (<div>[ wysiwygHtml ][ lapsiSisältöLohkot ]</div>), jolloin sen tyylien uloin koodi kohdistuu <div> -elementtiin, ja sisempiä elementtejä voi muotoilla vapaasti:
display: inline; // tämä viittaa div-elementtiin
> p { // tämä viittaa wysiwyg-html:n kaikkiin p-elementteihin
color: red;
}
.j-Image { // tämä viittaa kaikkiin "Kuva" -lapsisisältöihin
margin: 0;
}
Esim. kuvasisältöjen html-rakenne on (<figure><img>[ lapsiSisältöLohkot ]</figure>), jolloin sen tyylien uloin koodi kohdistuu <figure> -elementtiin, ja sisemmät blokit sen lapsiin:
margin: 0 0 1rem 1rem; // tämä viittaa figure-elementtiin
> img { // tämä viittaa img-elementteihin
border: 2px solid red;
}
.j-Text { // tämä viittaa "Teksti" -lapsisisältöihin
font-size: 1rem;
strong {
font-weight: 800;
}
}
Jos haluat käyttää sisemmissä blokeissa pseudo-selectoreja tai "tarkennuksia", tulee niiden eteen laittaa &- merkki:
button {
&:hover {
border-color: #eee;
}
}
/* tai (esim. osio-sisällöissä) */
&[style] {
background-size: cover;
}
Sarakkeet-sisältölohko käyttää css-grid -systeemiä, ja oletuksena jokaisen sarakkeen leveys on 1fr (grid-template-columns: minmax(0, 1fr) ...).
Jos haluat esim. sarakkeet, jossa ensimmäinen sarake on vaikkapa 100px leveä, ja toinen automaattisesti säätyvä, lisää sille sisältölohkolle uusi tyyli, ja kirjoita siihen:
grid-template-columns: 100px 1fr; // tai 100px auto
Admin käyttäjänä sisältöjen tyylit näytetään css-koodina, mutta ei-admin -käyttäjillä niiden tilalla näytetään widgettejä. Voit lisätä widgettejä lisäämällä koodirivin "// @exportAs(tyyppi)" css-muuttujan yläpuolelle, jossa tyyppi voi olla "color" tai "length", tai "// @exportAs(option:argumentit)", jossa argumentit voi olla esim. "start|center|end|initial". Widgetin nimi tulee css-muuttujan nimestä automaattisesti.
Sivujetti täydentää automaattisesti css-tyylien url-polut. Polut kuitenkin tulisi alkaa kirjaimilla public/uploads. esim.
background-image: url('public/uploads/kuva.jpg');
Copyright © Tenel Digital
Voimanlähteenä Sivujetti 😲
