Google Website Translator

torstai 10. kesäkuuta 2021

Blogin tuunausta - ulkoasun värit


Tänä päivänä kadun sitä, että aikanaan valitsin blogiini värillisen bannerin ja sen mukaan vaihtelevat värit ja taustat myös kaikkialle muualle blogiin. Jos olisin alun alkaen valinnut väreiksi vain mustan ja valkoisen, elämä olisi paljon helpompaa noin blogin päivityksen kannalta. Alkuperäisessä Bloggerissa sai blogin teemasta vaihdella erikseen kaikkien osien värejä. Nykyisin ei enää onnistu helpon kautta kuten bannerin ja takimmaisen taustakuvan vaihto, kaikki muut värivaihdot täytyy tehdä HTML-muutoksin. Olen kuitenkin käynyt läpi joitakin yritelmiä, joiden pohjalta vaihtaessani blogini väritystä vuodenaikojen mukaan saan vaihdettua myös tekstin taustavärin, sivuluettelojen värityksen, linkkien värit ja päiväyksen värin. Välitän omia kokeiluni myös teille.
 

Oma kuvabanneri

Bannerini olen aikanaan tehnyt kuvankäsittelyohjelmalla koossa 1160 x 400 px. Vaihdan bannerikuvan valitsemalla Bloggerista Ulkoasu -> Otsikko -> Muokkaa -> Kuva -> Otsikon ja kuvauksen tilalle ja sen jälkeen valitsemalla tietokoneelle tallentamani bannerin. 

Picture banner

Ulompi taustakuva

Blogin ulommaisen tausta eli sen taustan, joka näkyy tekstialueen ulkopuolella, voi jättää tyhjäksi tai valita sille jonkin Bloggerin tarjoaman värin. Jos sinne kuitenkin halua kuvan, se tapahtuu tallentamalla ensin tietokoneelle haluttu kuva mahdollisimman suuressa koossa, mutta kuitenkin korkeintaan 3 Mg tiedostona. Valitse sen jälkeen Teema -> Mukauta (kuva1) ja sen jälkeen kohdasta Tausta -> Valitse tai Vaihda kuva (kuva2). Sitten valitset vain kuvan tietokoneeltasi tarjottujen valmiiden kuvien sijasta. Muista myös tallentaa tekemäsi muutokset (kuva3)

Kuva1
Kuva2













Kuva3

Väriä käyttävissä blogeissa näillä kahdella säädöllä pääsi alkuun. Alkuperäisessä Bloggerissa en tyytynyt tähän, vaan vaihdoin vuodenajan mukaan myös muuta blogin väritystä eli linkkejä ja tekstikentän taustoja. Vain itse blogin sisältöteksti pysyi minulla mustana/tumman harmaana. Alkuperäisessä Bloggerissa kaiken tämän vaihtaminen sujui myös Teeman kautta, muttei enää muutoksien jälkeen. Joten jouduin sukeltamaan sivujen HTML-koodien muuttamiseen. Kaikki värit vaihdetaan käyttäen värien heksadesimaalikoodeja, joten valitessa haluttavaa väriä on syytä perehtyä niihin. Tästä saat jotain osviittaa värien heksadesimaalikoodeista, mutta parhaaksi tavaksi valita aivan haluamansa värin koodi olen huomannut kuvankäsittelyohjelman käytön värin valintaa. Kun löydät sen avulla tavoittelemasi värin, löydät samalla myös koodin.

Tekstialueen taustaväri 

Kaikkien värimuutosten alkuun päästään valitsemalla Bloggerista jälleen Teema -> Mukauta -> Muokkaa HTML-koodia. Kaikki tästä eteenpäin tapahtuvat koodien muokkaukset tapahtuvat siellä.

Blogger changing textbackround color

 
Kun olet HTML-koodissasi, siirrä hiiren osoitin johonkin koodin sisälle ja valitse Ctrl+F. Sivun ylälaitaan ilmestyy laatikko, jossa lukee Search. Siirry laatikkoon, kirjoita sana Group ja paina Enter. Saat näkyviin eri muuttujaryhmiä. Onneksi värien muuttamisvaiheessa ei ole tarvetta useisiin yksityiskohtaisiin muutoksiin, vaan muuttamalla tiettyjä muuttujia ryhmissä saadaan aikaan kaikkia aiemmin ja tulevaisuudessa tehtäviä sivuja koskevia muutoksia. Tästä löytyy hienoja selityksiä HTML:n ja CSS:n muuttamisesta, mutten puutu siihen vaan kerron, miten itse muutan sivuni.
 
Olimme muuttamassa tekstinkenttien taustaväriä eli kaikkea muuta taustaa paitsi taustakuvan osuutta.
Valitaan ryhmä Group description="Backgrounds" .  Ryhmästä pitäisi löytyä kolme värimuuttujaa:
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#f2fbf2"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#f2fbf2"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#f2fbf2"/>
Muuttaessamme tekstikentän tausta väriä puhumme todennäköisesti värimuuttujasta muuttujalle Main Backround, mutta valittuani taustalle (Outer Backround) jo valmiiksi kuvan samoin kuin bannerin Otsikkoon (Header Backround) menin helpolla ja vaihdoin kaikki värimuuttujat (type = "color" value ="". Koska valitsin vihreätä, lopputulokseni näytti tältä:
 
Kuten huomaatte, olen vaihtanut kaikki 3 värivalintaa. Lopputulos näkyy ruudullanne eli tekstikenttieni tausta on hennon vaalean vihreä (kesällä, muulloin se vaihtelee vaaleanpunaisen, -sinisen ja beesin väreissä). Kun olet tehnyt haluamasi heksadesimaalimuutokset, tallenna ne painamalla oikeassa yläkulmassa olevaa tallennuspainiketta.

Koska et näe tekemiäsi muutoksia suoraan, avaa selaimessa uuteen välilehteen blogisi. Siinä muutokset näkyvät heti avattaessa tai viimeistään "virkistyksen" jälkeen. Jos et ole tyytyväinen lopputulokseen, toista prosessi alusta uusilla väreillä ja tarkasta jälleen lopputulos.

 Linkkien värinvaihto

Seuraava vaihe on kaikkien postauksen ja koko blogin linkkien värin vaihto. Tämä muuten koskee myös postausten otsikkoja, sivupalkin linkkejä ja tekstikentän alla olevia kommentti ym. linkkejä. Ainoat linkit, johon tämä muutos ei vaikuta, ovat sivuluettelon linkit bannerin/otsikon alla.
 
Etsi seuraavaksi ryhämä Group description="Links". Ryhmästä löytyy 3 muuttujaa:
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#008000"/><Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#80dd66"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
Muuttuja "Link Color" säätelee linkin alkuperäistä väriä. Muuttuja "Visited Color" on väri, jollaiseksi linkki muuttuu, kun sitä on klikattu. Muuttujalla "Hover Color" voit määritellä, millaiseksi linkin väri muuttuu, kun hiiren vie linkin päälle.
Vaihda kaikista kolmesta muuttujasta arvot "value = " haluamaksesi värin heksadesimaalikoodiksi alla olevan mallin mukaan. 
Blogger changing link colors


Muista ehdottomasti tallennus ja tarkasta lopputulos erillisenä avaamastasi blogisivustasi "virkistyksen" jälkeen.
 

Sivuluettelon värinvaihto

Tässä vaiheessa muuttamatta ovat linkeistä vielä heti bannerin alle sijoittuva sivuluettelo, jos blogissasi on useampi kuin 1 sivu. Tätä kohtaa pääset manipuloimaan ryhmästä Group description="Tabs Text". Sieltä löydät muuttujia sivuluettelon tekstistä ja niiden koosta ym., mutta värien valinnassa meitä kiinnostavat muuttujat:
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#008000"/> 
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#80dd66"/>
Jälleen kerran törmäämme muuttujiin "Text color", jossa määrätään linkin alkuperäinen väri ja "Selected Color", joka määrittää värin linkin klikkauksen jälkeen. Sivuille voi muodostaa vaikka sateenkaaren värit, mutta kehottaisin näiden linkkien värien valinnassa noudattamaan samoja värejä kuin linkkien valinnassa muuallakin. Tässä minun valintani, voit verrata sitä linkkien värien valintaa aiemmin ohjeessa:
Blogger changins side list colors

Sivuluettelolla on myös oma taustavärinsä, jota sitäkin pääsee muuttamaa kohdasta Group description="Tabs Background".  Voit valita väriksi yleisen tekstikentän taustavärin tai muuttaa hieman väriarvoja korostamaan sivulistaa erilleen muusta taustasta.
 

Muista aina muutosten jälkeen tallennus ja tuloksen tarkastus.
 

Päiväystekstin värinvaihto  
Olisin voinut tyytyä tähän, mutta jokaisen postauksen alussa näkyy myös sen julkaisupäivä. Koska kikkailin väreillä, muutin vielä postauksen julkaisupäiväyksen tekstin värin teemaani sopivaksi. Sitä varten etsi ryhmä Group description="Date Header".  Tässä ryhmässä muutin päiväystekstin värin haluamakseni ja sen taustavärin samaksi, kuin tekstikentän taustaväri.

Blogger changing date color

Tallenna ja tarkasta muutokset.

Tässä joitakin kohtia, joita voi muunnella Bloggerin HTML-koodista. Sieltä löytyy muitakin ryhmiä, joiden erillismuutoksia voi kokeilla. Muista kuitenkin, ettei mikään tekemäsi muutos tule voimaan, enne kuin olet tallentanut sen. Muista aina, mitä muuttelit ja tarkasta muutos tallennuksen jälkeen. Jos et ole tyytyväinen, sinun pitää itse muistaa, mitä kohtaa muuttelit ja miten, jotta voit korjata epätyydyttävät muutokset.

Kristiina

Ei kommentteja:

Lähetä kommentti

Mielipiteesi on aina tervetullut :)