Pystyt muokkamaan välilehtiformaatin välilhetipainikkeiden taustan ja fontin väriä, painikeen ulkoreunoja ja lisätä tekstin eteen yhden erilaisista ikoneista.

Laita Muokkaustila päälle ja siirry välilehdelle, jonka painikeen väriä haluat muokata. Valitse välilehden muokkaus klikkaamalla kolmea pistettä välilehden oikeassa reunassa ja valitse valikosta muokkaa asetuksia.

 

 

Välilehden asetuksissa on kohta Tab styles (välilehtien tyylit), jota klikkaamalla aukeaa muokkauspainikeet ja esikatselunäkymä. Huom! Section content background (osion sisällön tausta (väri)) muuttaa koko sivun sisällön taustaväriä.

 

Alla olevassa kuvassa on neliöty esikatselunäkymä, jossa esitetään miltä välilehti tulee näyttämään asetusten muuttamisen jälkeen. Vaikka esikatselussa on kuvattu useita välilehtiä, väriasetusten muuttaminen koskee vain tätä välilehteä ja sen lapsia.

Esikatselunäkymän yläpuolella on useita harmaita painikkeita, joista voit valita miminkä tai missä tilanteessa haluat välilehden asetuksia muuttaa. Niistä käyttökelpoisin on Set Default (aseta oletus). Set Defaultissa tehdyt muutokset koskevat myös välilehden alla olevia lapsivälilehtiä.

Klikattuasi Set Default tai muuta samalla rivillä olevista painikkeista, sinulle aukeaa Tab styles-ikkuna.

Ensimmäisestä kohdasta Select Icon pystyt lisäämään välilehden tekstin eteen yhden tarjolla olevista kuvakeista.

Kohdasta Background olevaa laatikkoa (color) klikkaamalla pääset valitsemaan välilehtipainikkeen taustavärin. Voi valita värin klikkaamalla väripaletista haluamastasi kohdasta tai kirjoitamalla haluamasi värin RGB-arvon tai heksakoodin väripaletin alapuolella olevaan tekstikenttään. Klikkaa värin valittuasi Ok.

 

Font-kohdassa voi muokata välilehtipainikeen fontin muotoilua. Ensimmäisestä laatikosta muutetaan fontin kokoa ja valitse toiseen px. Kolmannesta laatikosta voit valita fontin värin ja kaksi viimeistä laatikkoa ovat fontin muotoiluja varten, esim. Bold ja Italic.

 

Valitse lopuksi Set styles ja Tallenna muutokset.

 

 

HUOM! Muista kiinnittää huomiota värien saavutettavuuteen, eli että fontin ja taustan värikrontrasti on riittävä. Luotettavamman tuloksen saa käyttämällä erillisiä kontrastin tarkistusohjelmistoja, esim. contrastchecker.

Seuraavissa kappaleissa kerrotaan miten voit saada erilaisten värien RGB- tai heksadesimaaliarvon.

 

JYU brändivärien RGB- ja heksadesimaaliarvot

RGB-arvo tulee sanoista Red, Green ja Blue (punainen, vihreä ja sininen). Arvo kuvastaa kunkin värin osuutta valitsemastamme väristä. Esim. punainen on rgb(255,0,0), vihreä on rgb(0,255,0) ja sininen on rgb(0,0,255).

Heksadesimaali on #-merkillä alkava kuusinumeroinen arvo.

 

Tässä alla on kerrottu yliopiston brändivärien heksadesimaali- (HEX) ja RGB-arvot. Voit kopioida kumman tahansa arvoista välilehden Fontin väriksi tai Taustaväriksi. 

 

 RGB: rgb(0,41,87)
 HEX: #002957

 RGB: rgb(237,225,206)
 HEX: #ede1ce

 RGB: rgb(241,86,63)
 HEX: #f1563f

 RGB: rgb(194,154,91)
 HEX: #c29a5b

 RGB: rgb(199,201,200)
 HEX: #c7c9c8

 

Voit lukea lisää JYU brändiväreistä ja ohjeesta niiden käyttöön JYU graafinen ohjeisto (2024) -tiedostosta.

 

 

Miten löydät haluamasi värin RGB- tai heksadesimaaliarvon

Hae Googlella CSS colour picker. Google tarjoaa käyttöösi Colour picker-työkalun, jossa pystyt valisemaan haluamasi värin taulukosta ja työkalu kertoo sekä värin haksadesimaali että RGB-arvon.