Muutamia virityksiä ulkoasuun

Olen viimeiset pari vuotta ylläpitänyt sivujani WordPress-ympäristössä käyttäen Themeframe -ohjelmistolla itse laatimiani teemoja, jotka määrittävät sivuston ulkoasun. Tässä suhteessa nämä sivut ovat minulle myös oivallinen väline erilaisten uusien ulkoasujen ja teknisten seikkojen kokeilua varten. Aivan viime aikoina olen tehnyt sivuilleni joukon uudistuksia, joissa on käytetty uusimpia CSS (Cascading Style Sheet) -tyylisivujen mahdollisuuksia ja joukkoa lisäosia (engl. plugin). Osa näistä uudistuksista on onnistunut varsin helposti, osaa olen joutunut virittelemään ja kokeilemaan jopa useita päiviä:

1. Otsikkokuvat linkeillä. Sivuilla on varsinaisen sisältöalueen yläpuolella otsikkopalkki, jossa tätä kirjoitettaessa käytän kumpaakin kieltä (suomi/englanti) varten kahta kuvaa, jotka vuorottelevat ja tarjoavat myös suoran linkin sivuille “Kuvat” ja “Matkailua”. Ajatus tässä on, että käyttäjä pääsee sivujen varsinaisiin sisältöihin mahdollisimman helposti. Tämä toiminnallisuus on mahdollinen käyttäen lisäosan (plugin) MeteorSlides tarjoamaa vimpainta ja toisen lisäosan Dynamic Widgets ominaisuuksia erilaisten vimpainten linkittämiseksi mihin tahansa sisältöihin. Nämä liukuefektillä vuorottelevat kuvat ovat koko muun sivuston tapaan “responsiivisia” eli skaalautuvat käytetyn selainikkunan tai laitteen koon mukaan.

2. Klikattava, hiirtä siirtäen vaihtuva logo. Sivustoni logo (tiirikainen.fi) on klikattavissa entiseen tapaan ja vie suoraan etusivulle. Viimeisin uudistukseni on tässä logossa käyttämäni fontti, jota ei yleensä ole tarjolla selaimilla käytettäväksi – eikä varsinkaan samassa tekstissä useammalla värillä. Tämä logo on toteutettu käyttäen kolmea kuvaa CSS-tekniikalla siten, päällimmäinen kuva on täysin läpinäkyvä ja taustakuva vaihtuu hiiren mennessä logon päälle alleviivattua tekstiä sisältäväksi. Yleensä kuvien vaihto toiseksi tai vaikkapa vain värillisestä mustavalkoiseksi hiiren mennessä kuvan päälle ei CSS-tyylien erilaisesta tukitasosta riippuen onnistu kaikilla selaimilla, mutta tässä sovellettu tekniikka on ainakin omissa kokeissani toiminut ongelmitta kaikkien selainten uusimmilla versioilla (Chrome, Firefox, Internet Explorer, Opera ja Safari). Jos joku näiden sivujen lukija on kiinnostunut, lisätietoja löytyy ThemeFrame Members Forumista tai pistämällä minulle viestin. Tällaiset efektit eivät toimi kosketusnäyttöisillä laitteilla kuten tableteilla tai älypuhelimilla!

3. Megamenu- ja responsiiviset valikot. Olen korvannut sivujen valikot JQuery-perusteisella mega-valikolla, johon on lisättävissä myös kuvia. Tällainen on mahdollista käyttäen WordPressin maksullista lisäosaa (plugin) UberMenu. Muutin tätä osaa juuri siten, että “Matkailua” -osion varsin mittava valikko mahtuisi suurimmalle osalle laitteita. Pienessä katselukoossa UberMenun tekemä valikko korvautuu toisen lisäosan, Responsive Select, tuottamalla valikkopainikkeella, josta painaen aukeaa rullattava valikkopalkki. Molempia lisäosia käyttäen uskon sivujen olevan paremmin käytettävissä erilaisilla laitteila tai selaimien koolla.

Kirjoita kommentti

Voit käyttää näitä HTML-tägejä:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Kommenttisi tulee näkyviin, kun admin on hyväksynyt yhden kommenttisi.

  

  

  

Time limit is exhausted. Please reload CAPTCHA.