5.2. Päänavigointi CSS - Aurinkoverkko

Navigointivalikon muotoilut

Seuraavaksi on vuorossa navigointivalikon muotoileminen CSS-muotoiluilla. CSS vaikuttaa valikossa myös toiminnallisuuteen sillä navigoinnin toiminta on usean tiedoston yhteistulos. Ei siis lainkaan yksinkertainen asia. Avaa siis Visual Studio Code -ohjelmassa muokattavaksi harjoitus.css-tiedosto, joka tulee sisältämään teemassa sivujen ja elementtien muotoiluja.

Klikkaa oheista kuvaa ladataksesi CSS-tiedosto pakattuna tiedostona omalle koneellesi, pura .zip-paketti, avaa css-tiedosto vaikka Muistio-ohjelmassa (PC) tai muussa tekstieditorissa ja kopioi tiedoston sisältö harjoitus.css-tiedostoon.

Tiedosto sisältää navigointivalikon CSS-muotoilut ja ”koodaus” on tarkoituksella ehkä hieman yli kommentoitu, jotta saat ehkä kuvaa mihin mikäkin muotoilu vaikuttaa navigointivalikossa. Käydään tunnilla läpi muotoilut ja selvitetään miten ne vaikuttavat menuvalikon ulkoasuun. Voidaan vaikka muuttaa joitain muotoiluja, jotta ymmärretään kuinka suuret mahdollisuudet on muotoilla valikkoa oman maun mukaiseksi.

Tyylittelyä CSS:llä

Harjoitellaan hieman selaimen kehittäjäntyökalun hyödyntämistä suunnittelussa. Jos et vielä ole tutustunut selaimen kehittäjäntyökaluun, voit tehdä sen erillisessä artikkelissa (5.4. Selain kehittäjän työkalu).

Muotoillaan hieman suuremmissa näyttölaitteissa ”tulostuvaa” navigointivalikkoa ja erityisesti sitä ympäröivää div-elementtiä. Avaa selaimen kehittäjän työkalu klikkaamalla hiiren oikealla painikkeella navigointivalikon päällä ja klikkaa avautuvasta valikosta ”Tarkista” (Chrome) tai ”Tarkastele” (Mozilla Firefox). iOS (Mac) -käyttöjärjestelmän Safari-selaimessa ei ole kehittäjäntyökalua, joten sinun on avattava sivu joko Google Chrome- tai Mozilla Firefox-selaimessa.

Etsitään lähdekoodista navigointia ympäröivä div-elementti jonka luokka on menu-primary-container ja klikataan se HTML-lähdekoodissa aktiiviseksi. Alapuolella olevassa CSS-muotoilut sisältävässä laatikossa voit nähdä tutun koodin, jossa on media-määritys 768px leveämmille näytöille. Nimenomaan tähän asetetaan CSS-muotoilut sillä se vaikuttaa vain mediamäärityksen mukaisiin näyttökokoihin. Seuraavana listassa on myös menu-primary-container ilman mediamääritystä ja se vaikuttaisi myös mobiilivalikkoon.

Tee valikkoon oheisen kuvanmukainen muotoilu, jossa käytetään taustaväriä, täytettä kaikkiin reunoihin, reunaviivaa sekä reunanpyöristystä. Kehittäjäntyökalu on erinomainen apu sivun elementtien muotoilujen testaamiseen. Käytännössä voit klikata olemassa olevan muotoilun puolipistemerkin (;) oikealla puolella ja määritystä seuraava kenttä aktivoituu ja voit kirjoittaa siihen haluamasi muotoilun nimen. Käytä sarkainpainiketta liikkumisessa seuraavaan kenttään. Harjoitellaan tätä tunnilla.

Kun olet tehnyt muotoilut:

Maalaa CSS-luokan sisällä olevat CSS-määritteet ja kopioi leikepöydälle +.
Avaa Visual Studio Code:ssa harjoitus.css -tiedosto ja lisää juuri tehdyt muutokset vastaavaan koodiin mitä juuri tarkasteltiin ja muutettiin. Jos katsot oheista kuvaa tarkemmin huomaat, että CSS-muotoilun oikeassa yläkulmassa on määrityksen sisältävän CSS-tiedoston nimen lisäksi myös rivinumero missä määritys sijaitsee CSS-tiedostossa. Voit myös klikata kehittäjäntyökalussa tiedoston nimeä ja se avautuu katseltavaksi työkalussa HTML-lähdekoodin tilalle.
Tallenna tiedosto ja esikatsele toimivatko muutokset sivulla.

Ennen muutosta:

@media (min-width: 768px) {


    .menu-primary-container {

    
        display: block;

    
    }


}

Muutokset lisätty:

@media (min-width: 768px) {

    
    .menu-primary-container {

        
        display: block;

        padding: 5px 10px;

        background-color: #dfdbd7;

        border: 3px ridge #b99775;

        border-radius: 30px;

    
    }


}

Sivuston logo

Ylätunnisteen vasemmassa yläkulmassa sijaitsee sivuston nimi. Jos sivustolle on asetettu logo se korvaa sivun nimitekstin. Logon asetustoimintoa ei ole vielä asetettu sivustolle, joten meidän täytyy ottaa se käyttöön functions.php-tiedostossa. Seuraavassa on koodi, joka ottaa käyttöön logon lisäämistoiminnon WordPressissä. Kopioi koodi ja liitä se functions.php tiedoston loppuun ennen PHP-päätöstagia.

Functions-tiedoston koodaus tarkoittaa käytännössä seuraavaa:

Logon lisäämistoiminnon funktio kokonaisuudessaan.
Lisätään logon paramentrejä PHP-taulukkoon (array) ja taulukolle muuttuja $default

Logokuvan korkeus (height) määritetään.
Logokuvan leveys (width) määritetään.
Voidaan asettaa toimintoon mahdollisuus rajata logokuvan korkeutta asettamalla flex-height arvoksi true. false asettaa staattiseksi arvoksi ’height’ kohdan koon.
Voidaan asettaa toimintoon mahdollisuus rajata logokuvan leveyttä asettamalla flex-width arvoksi true. false asettaa staattiseksi arvoksi ’width’ kohdan koon.
Oletuksena tekstit, joita tuodaan näkyville logon tilalle, jos ei asetettu. (POISTETAAN TARPEETTOMANA: header.php koodi mitätöi tämän asetuksen)

lisätään teeman toiminto ’custom logo’ ja oletusasetukset logolle ($default)
Kun selaaja klikkaa linkkiä tai saapuu url-osoitteeseesi palvelin lataa teeman, joka on asennettu. Tämä koodaus varmistaa, että tämä toiminto suoritetaan teeman alustamisen yhteydessä mahdollisimman aikaisin. Koodi liittyy WordPressin suoritusprosessiin.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.