Johkussa on valmiina 15 eri väriteemaa joita voi vapaasti käyttää Johku-kaupassa.
➡️Kauppapaikan väriteema ja ulkoasu
Tämän lisäksi Johkussa voit luoda oman väriteeman muokkaamalla vaalea- tai tummapohjaisen teeman värejä ja fontteja.
Käytännössä valitset ensin vaalea- tai tummapohjaisen väriteema-perustyylin, ja sitten lähdet muokkaamaan siihen haluamiasi värejä ja fontteja.
- Kukin väriteemaan muutettava osa eli muuttuja listataan omana rivinään
- Värit ovat itse koodimuodossa syötettäviä tai värikartasta/valintatoiminnon pipetillä valittavia värikoodeja
- Tekstityyppien osalta valittavissa on laadukkaita vaihtoehtoja Google Fonts -kirjastosta
Luo oma väriteema
- Mene Johku App:ssa Kauppapaikka-osioon (maapallokuvake valikossa)
- Klikkaa Asetukset ja sieltä Teema-välilehti
- Valitse Kauppapaikan väriteema -alasvetovalikosta Käytä muokattuja asetuksia
Vaaleataustainen väriteema
Jos haluat teemasi olevan vaaleataustainen, voit suoraan edetä tekemään muokkauksia muuttujiin. Vaaleataustainen teema on oletus, ja sen mukaiset värit ja fontit automaattisesti esillä muuttujissa.
Esillä ovat teeman päämuuttujat. Tee niihin haluamasi muutokset:
- Valitse värikoodien tilalle haluamasi värit joko syöttäen suoraan värikoodi tai valitsemalla värikartasta tai värivalintatoiminnon pipetillä haluamasi väri
- Selaimen värivalitsin-työkalun esikatseluruutu näyttää mustaa väriä silloin, jos kentässä on muuta kuin tavallinen värikoodi, kuten viittaus toiseen tyylimääritykseen
- Pipetillä voit valita värin mistä tahansa selaimessa
- Jos haluat muokatun värin toisen värin pohjalta, klikkaa pipetillä ko. väriä (esim. muuttujan värivalintaa) ja muokkaa sitä värikartassa esim. vaaleammaksi
- Valitse fonttien alasvetovalikosta haluamasi fontti
- Muuttujarivin päädyssä olevalla kellokuvakkeella voit palauttaa ko. muuttujan oletusarvon
- Teeman muut muuttujat toimivat automaattisesti päämuuttujien pohjalta (esim. tietty vaalennus pääväristä)
- Kannattaa ensin tallentaa ja käydä katsomassa kauppapaikalla teeman toiminta, jotta näet, onko tarvetta muokata muita muuttujia vai ei
- Jos haluat muokata/määrittää muita muuttujia itse, klikkaa päämuuttujien listan alareunasta Näytä kaikki muuttujat jotta saat muut muuttujat esille
- Muokkaa haluamaksesi muiden muuttujien arvoja. Voit muokata prosenttilukemia suoraan muuttujaan tai valita täysin oman värin klikkaamalla värikuvaketta
- var-alkuinen arvo on viittaus toiseen tyylimääritykseen
- color-mix -alkuinen arvo yhdistää toista tyylissä määriteltyä väriä esim. mustaan, jotta saadaan tummempi sävy automaattisesti
- Nämäkin kentät voi vaihtaa myös itse valitsemaksesi väriksi
- Tallenna ja käy testaamassa teeman toiminta kauppapaikallasi
- Jos haluat lisämuutoksia, palaa Teema-välilehdelle muokkaamaan teeman asetuksia
Tummataustainen väriteema
Jos haluat tummataustaisen teeman, aloita muokkaus valitsemalla perustyyliksi Tumma. Näin saat tummapohjaisen tyylin oletusvärit joita voit alkaa muokata.
- Valitse Palauta perustyypi -kohdassa vaihtoehto Tumma
- Klikkaa Aseta
Muokkaa muuttujia kuten vaaleataustaisen väriteeman ohjeessa.
- Muokkaa teeman perusvärejä - ja fontteja
- Tallenna ja käy testaamassa teeman toiminta kauppapaikallasi
- Klikkaa Näytä kaikki muuttujat -kohtaa jos haluat muokata muita muuttujia
Muuttujien tallentuminen ja valmiiseen väriteemaan palaaminen
Voit milloin tahansa palata käyttämään Johkun valmista väriteemaa valitsemalla Kauppapaikan väriteema -valikosta Käytä valmista väriteemaa. Muokattujen asetusten muuttujat säilyvät tallessa, mikäli haluatkin palata käyttämään omaa väriteemaasi.
Voit muokata vain värejä ja fontteja
Voit muokata vain väriteeman värejä ja fontteja - elementtien ja tekstien asettelua tai kokoja ei voi muokata. Johkun elementtien ja tekstien koko skaalautuu responsiivisesti eri näyttökokoihin.