Kustomoidut CSS-tyylit

Joskus LiquidBloxin työkalut eivät riitä projektin kaikkiin CSS-tyylien muokkaustarpeisiin. Jos osaat CSS-koodia, lisäät sivustolle omia kustomoituja tyylejä tämän ohjeen mukaisesti.

Tässä ohjeessa käytetyt ominaisuudet ovat saatavilla Pro, Business ja Enterprice -palvelutasoissa.

Tarvittavat taidot:

CSS-tyylien muokkaus, selaimen inspectorin käyttö

Tässä tapauksessa sivulla on hero banner -elementti, jossa on tekstisisältö yläosassa ja navigaatiosisältö alaosassa. Yksittäinen navigaation nappi menettää oletuksena keskityksen mobiililaitteilla. Seuraa näitä ohjeita keskittääksesi napin myös mobiilissa. Ensin blokkiin lisätään luokka, jonka avulla kohdistetaan sivuston head-osan koodiin lisättävät CSS-tyylit.

Vaihe 1 - lisää luokka kohdennusta varten

Klikkaa Advanced sisältöalueen asetuksissa.

Tai kohdista luokka leveän blokin asetusten kautta:

Ohje leveän blokin asetuksista

Anna luokalle nimi ja klikkaa OK.

Vaihe 2 - etsi oikea tyyli ylikirjoitettavaksi

Inspectoi sivu (käyttäen selaimen kehittäjän työkaluja) mobiilinäkymässä ja etsi luokat kohdistusta varten ja ylikirjoitettavat tyylit.

Tässä tapauksessa tyyli justify-content div-elementissä luokalla navi-parent näyttää linjaavan napin vasempaan reunaan. Justify-content tyylin arvo tulee muuttaa arvosta space-between arvoon center, jotta nappi näkyy keskitetysti.

Vaihe 3 - avaa sivuston head-osion koodieditori

Avaa Page Manager ja aktivoi oikea sivusto klikkaamalla sen nimeä vasemmalla.

Klikkaa </> Head -nappia.

Vaihe 4 - kirjoita CSS-tyylit

Aloita lisäämällä tyylien avaus- ja sulkutagit: <style></style>

Esimerkin luokkien kohdennuksen selitykset:

.mobile = kohdentuu vain mobiililaitteisiin

.my-centered-button = kustomoitu luokka, joka lisättiin manuaalisesti kohdentamisen helpottamiseksi

.navi-parent = inspectorin avulla löydetty luokka

CSS-tyylit selitettyinä:

justify-content: center !important;

center = napin keskittämiseksi

!important = rinnakkaisten tyylien ylikirjoittamiseksi.

CSS luokkien kohdentaminen LiquidBlox-sivustoilla

.desktop-view = BODY-luokka tyylin kohdistamiseen tietokoneen selaimiin
.mobile = BODY-luokka tyylin kohdistamiseen mobiililaitteiden selaimiin
.tablet = BODY-luokka tyylin kohdistamiseen tablet-laitteiden selaimiin

.website-view = DIV-luokka tyylin kohdentamiseen vain sivuston/julkaisun julkiseen versioon (ei editorin näkymään)
.editor = DIV-luokka tyylin kohdentamiseen vain editorissa auki olevaan näkymään (ei julkaistuun sivustoon/julkaisuun)

Kustomoidut CSS-tyylit

Joskus LiquidBloxin työkalut eivät riitä projektin kaikkiin CSS-tyylien muokkaustarpeisiin. Jos osaat CSS-koodia, lisäät sivustolle omia kustomoituja tyylejä tämän ohjeen mukaisesti.

Tässä ohjeessa käytetyt ominaisuudet ovat saatavilla Pro, Business ja Enterprice -palvelutasoissa.

Tarvittavat taidot:

CSS-tyylien muokkaus, selaimen inspectorin käyttö

Tässä tapauksessa sivulla on hero banner -elementti, jossa on tekstisisältö yläosassa ja navigaatiosisältö alaosassa. Yksittäinen navigaation nappi menettää oletuksena keskityksen mobiililaitteilla. Seuraa näitä ohjeita keskittääksesi napin myös mobiilissa. Ensin blokkiin lisätään luokka, jonka avulla kohdistetaan sivuston head-osan koodiin lisättävät CSS-tyylit.

Vaihe 1 - lisää luokka kohdennusta varten

Klikkaa Advanced sisältöalueen asetuksissa.

Tai kohdista luokka leveän blokin asetusten kautta:

Ohje leveän blokin asetuksista

Anna luokalle nimi ja klikkaa OK.

Vaihe 2 - etsi oikea tyyli ylikirjoitettavaksi

Inspectoi sivu (käyttäen selaimen kehittäjän työkaluja) mobiilinäkymässä ja etsi luokat kohdistusta varten ja ylikirjoitettavat tyylit.

Tässä tapauksessa tyyli justify-content div-elementissä luokalla navi-parent näyttää linjaavan napin vasempaan reunaan. Justify-content tyylin arvo tulee muuttaa arvosta space-between arvoon center, jotta nappi näkyy keskitetysti.

Vaihe 3 - avaa sivuston head-osion koodieditori

Avaa Page Manager ja aktivoi oikea sivusto klikkaamalla sen nimeä vasemmalla.

Klikkaa </> Head -nappia.

Vaihe 4 - kirjoita CSS-tyylit

Aloita lisäämällä tyylien avaus- ja sulkutagit: <style></style>

Esimerkin luokkien kohdennuksen selitykset:

.mobile = kohdentuu vain mobiililaitteisiin

.my-centered-button = kustomoitu luokka, joka lisättiin manuaalisesti kohdentamisen helpottamiseksi

.navi-parent = inspectorin avulla löydetty luokka

CSS-tyylit selitettyinä:

justify-content: center !important;

center = napin keskittämiseksi

!important = rinnakkaisten tyylien ylikirjoittamiseksi.

CSS luokkien kohdentaminen LiquidBlox-sivustoilla

.desktop-view = BODY-luokka tyylin kohdistamiseen tietokoneen selaimiin
.mobile = BODY-luokka tyylin kohdistamiseen mobiililaitteiden selaimiin
.tablet = BODY-luokka tyylin kohdistamiseen tablet-laitteiden selaimiin

.website-view = DIV-luokka tyylin kohdentamiseen vain sivuston/julkaisun julkiseen versioon (ei editorin näkymään)
.editor = DIV-luokka tyylin kohdentamiseen vain editorissa auki olevaan näkymään (ei julkaistuun sivustoon/julkaisuun)

Kustomoidut CSS-tyylit

Joskus LiquidBloxin työkalut eivät riitä projektin kaikkiin CSS-tyylien muokkaustarpeisiin. Jos osaat CSS-koodia, lisäät sivustolle omia kustomoituja tyylejä tämän ohjeen mukaisesti.

Tässä ohjeessa käytetyt ominaisuudet ovat saatavilla Pro, Business ja Enterprice -palvelutasoissa.

Tarvittavat taidot:

CSS-tyylien muokkaus, selaimen inspectorin käyttö

Tässä tapauksessa sivulla on hero banner -elementti, jossa on tekstisisältö yläosassa ja navigaatiosisältö alaosassa. Yksittäinen navigaation nappi menettää oletuksena keskityksen mobiililaitteilla. Seuraa näitä ohjeita keskittääksesi napin myös mobiilissa. Ensin blokkiin lisätään luokka, jonka avulla kohdistetaan sivuston head-osan koodiin lisättävät CSS-tyylit.

Vaihe 1 - lisää luokka kohdennusta varten

Klikkaa Advanced sisältöalueen asetuksissa.

Tai kohdista luokka leveän blokin asetusten kautta:

Ohje leveän blokin asetuksista

Anna luokalle nimi ja klikkaa OK.

Vaihe 2 - etsi oikea tyyli ylikirjoitettavaksi

Inspectoi sivu (käyttäen selaimen kehittäjän työkaluja) mobiilinäkymässä ja etsi luokat kohdistusta varten ja ylikirjoitettavat tyylit.

Tässä tapauksessa tyyli justify-content div-elementissä luokalla navi-parent näyttää linjaavan napin vasempaan reunaan. Justify-content tyylin arvo tulee muuttaa arvosta space-between arvoon center, jotta nappi näkyy keskitetysti.

Vaihe 3 - avaa sivuston head-osion koodieditori

Avaa Page Manager ja aktivoi oikea sivusto klikkaamalla sen nimeä vasemmalla.

Klikkaa </> Head -nappia.

Vaihe 4 - kirjoita CSS-tyylit

Aloita lisäämällä tyylien avaus- ja sulkutagit: <style></style>

Esimerkin luokkien kohdennuksen selitykset:

.mobile = kohdentuu vain mobiililaitteisiin

.my-centered-button = kustomoitu luokka, joka lisättiin manuaalisesti kohdentamisen helpottamiseksi

.navi-parent = inspectorin avulla löydetty luokka

CSS-tyylit selitettyinä:

justify-content: center !important;

center = napin keskittämiseksi

!important = rinnakkaisten tyylien ylikirjoittamiseksi.

CSS luokkien kohdentaminen LiquidBlox-sivustoilla

.desktop-view = BODY-luokka tyylin kohdistamiseen tietokoneen selaimiin
.mobile = BODY-luokka tyylin kohdistamiseen mobiililaitteiden selaimiin
.tablet = BODY-luokka tyylin kohdistamiseen tablet-laitteiden selaimiin

.website-view = DIV-luokka tyylin kohdentamiseen vain sivuston/julkaisun julkiseen versioon (ei editorin näkymään)
.editor = DIV-luokka tyylin kohdentamiseen vain editorissa auki olevaan näkymään (ei julkaistuun sivustoon/julkaisuun)