5.5. Sivuston muotoilua harjoitus-css
Googlen Chrome- että Firefox-selaimessa on olemassa hyödyllinen työkalu sivuston kehittäjälle. Työkalu tarkastelee sivun html-koodia ja elementtiin liittyvää CSS-koodia. Työkalussa voi myös asettaa uusia tai muokata olemassa olevia CSS-määrittelyjä. Muutokset eivät tallennu mihinkään, vaan kun sivu ladataan uudelleen painamalla F5-painiketta tai selaimen Refresh-painiketta sivu latautuu uudelleen palvelimelta tai selaimen välimuistista ja asetetut muutokset menetetään.
Voit siis avata verkkosivulta kehittäjän työkalut klikkaamalla selaimessa jonkin sivulla olevan elementin päällä hiiren kakkospainiketta . Valitse avautuvasta valikosta Tarkista(Inspect) Chrome-selaimessa. Jos käytät Firefoxia voit avata kehittäjän työkalut valinnasta Inspect Element.
Google Chromen hallintapaneeli
Tarkastellaan hieman tarkemmin Googlen kehittäjätyökalua, jonka käyttöliittymä koostuu kuvien mukaisista paneeleista.
Hallintapaneelissa muotoilemisessa tarvittavat osat ovat seuraavat:
- Sivun lähdekoodi eli html-koodaus
- CSS-muotoilut, jos näkyvissä Styles-välilehti.
- Konsolipaneelia en ole tarvinnut muotoilutarkoituksessa, joten sen voi sulkea.
- Sivunäkymän hallintapaneeli, jossa yllä vasemmalla valittavissa näyttölaitteen asetus ja sen oikealla puolella näkymän resoluutio pikseleinä. Eriväriset viivat alempana ovat sivulla käytössä olevia mediamäärittelyjä.
CSS-muotoilujen paneeli
Kun viet hiiren CSS-hallintapaneelin päälle, jonkin määrityksen päälle voit nähdä kuinka jokaisen määritteen eteen ilmestyy täppä. Jos klikkaat täpän pois, kyseinen määäritys poistuu käytöstä sivun esikatselussa selaimen vasemmalla puolella.
Voit myös lisätä uuden määritteen klikkaamalla jonkin määriterivin lopussa puolipisteen jälkeen. Määritteen arvon muuttaminen tapahtuu klikkaamalla arvon päällä, jolloin arvo muuttuu harmaataustaiseksi. Nyt voit asettaa määritykselle uuden arvon.
Harjoitus
Tehdään pieni harjoitus aiheesta. Klikkaa allaolevan elementin päällä hiiren oikealla painikkeella ja avaa kehittäjän työkalu edellisen ohjeen mukaisesti.
- Muuta ”ON HAUSKAA” tekstin väri vihreäksi asettamalla tekstin color-määrityksen arvoksi Green
- Muuta taustan vihreän laatikon taustaväri (background-color) keltaiseksi asettamalla arvon määritteelksi yellow
- Poista tekstin ”SIVUJEN RAKENTELU” alleviivaus (text-decoration) asettamalla arvoksi none.
- Muuta edellisen tekstin asetus SUURAAKKOSISTA muotoon ”Sivujen Rakentelu” asettamalla CSS-määrittelylle text-transform arvo Capitalize.
CSS/HTML ja WordPress
WordPress on sisällönhallintajärjestelmä jossa sivuston html-dokumentit (sivut ja artikkelit) kasaantuvat PHP:n avulla MySQL-tietokannasta, joten sivujen HTML-koodia ei itsessään voida muokata juurikaan. Sisällön elementtejä voidaan kuitenkin muokata kohdistamalla CSS-muotoiluja sivun elementteihin. Muotoilut voidaan tehdä sivu, sivusto tai elementtikohtaisesti.
Käytännössä sivujen muotoilut toteutetaan WordPress-sivulla joko lisäosalla tai WordPressin omissa Custom CSS-editoreissa. Asetetut CSS-koodit yliajavat teeman omat muotoilut, jos oma CSS-tiedosto on asetettu sivun head-osassa ennen teeman omaa CSS-tiedostoa.
Oman CSS:n lisäämismetodit WordPressissä
- Teemaeditori: Ohjauspaneeli/Ulkoasu/Teemaeditori
- Muokkain: Ohjauspaneeli/Ulkoasu/Mukauta Muokkaimessa kohta Oma CSS, johon voidaan lisätä CSS-koodausta.
- Lisäosa: Simple Custom CSS and JS – Lisäosalla luodaan oma CSS-tiedosto sivuston juureen tai asetetaan oma CSS-muotoilu jokaisen sivun head-osaan.
- Lisäosa: Simple Custom CSS Plugin – Lisäosalla voidaan lisätä CSS-muotoiluja sivustolle.
- Editorit: Editoreilla kuten WP Bakery Page Builder ja Visual Composer sivurakentaja voidaan lisätä sivustolle sekä sivuston että sivun laajuisia CSS-muotoiluja. Elementor tai WordPressin peruseditorit (Classic ja Gutenberg) eivät salli oman CSS-muotoilun lisäämistä sivulle. Elementorissa omaa CSS-muotoilua voi tosin lisätä editorin maksullisella Premium-versiolla.
Koodieditorit
Omia elementtejä voidaan rakentaa omalla koneella ja siirtää ne sen jälkeen WordPress-sivulle. Koodi kopioidaan koodieditorista oman editorin elementtiin, jolla voidaan lisätä raakaa HTML-koodia sivulle. WP Bakery Page Builder ja Visual Composer sisältävät mahdollisuuden tallentaa luotu HTML-elementti omaksi elementiksi, jota voidaan käyttää myös jatkossa sivustolla.
Käteviä koodieditoreita ovat mm. Notepad++, Atom ja Sublime text. Editorien tehokkuus on niiden koodin visuaalisuutta lisäävät ominaisuudet. HTML-merkkaus ja koodaus esitetään värillisillä fonteilla ja itse sisältötekstit ovat tavallisella valkoisella. Koodit voidaan myös sisentää, joka selkeyttää merkkausta.
Työn kulku WordPress-sivun muotoilussa
Kun sivun jotain elementtiä halutaan muotoilla, käytetään sopivan tagin löytämiseen selaimen kehittäjäntyökalua. Klikataan halutun elementin päällä hiiren kakkospainikkeella ja valitaan Tarkista, joka avaa kehittäjäntyökalun. Työkalun CSS-muotoiluista pyritään hakemaan sopiva ja kokeillaan sopivat muotoilut kehittäjäntyökalussa. Kun sopiva muotoilu löytyy kopioidaan koodi omaan CSS-muotoiluun WordPress-sivulla ja poistetaan muotoilut, joita ei muutettu alkuperäisessä koodissa ja tallennetaan tiedosto.