Ulkoasun ominaisuuksien piilottaminen

Ajas Internet-ajanvarauksen ohjesivustosta
Versio hetkellä 28. heinäkuuta 2016 kello 09.01 – tehnyt Updater (keskustelu | muokkaukset) (→‎Esimerkit 1-3: Ennen ja jälkeen)
(ero) ← Vanhempi versio | Nykyinen versio (ero) | Uudempi versio → (ero)
Siirry navigaatioon Siirry hakuun

Näiden ohjeiden avulla voit piilottaa ajanvarausnäkymästä sellaisia ikkunoita, joita et tarvitse. Voit piilottaa esimerkiksi kirjautumisikkunan, toimipisteen valinnan, palvelunvalinnan tai työntekijän valinnan.

Internet-ajanvaraus asiakasnäkymän 5.0 teeman muokkaus

Esimerkki 1: Yrityksen nimen piilottaminen

1.) Ensimmäiseksi sinun tulee luoda tietokoneellesi css-tiedosto. Voit luoda sen käyttämällä esimerkiksi muistio-sovellusta (Notepad-sovellus), joka löytyy kaikista Windows-koneista. Uuden muistion luot helpoiten, kun klikkaat tietokoneesi työpöytää hiiren vasemmalla painikkeella, valitse "uusi" ja "uusi tekstitiedosto" Seuraavaksi avaa luomasi tyhjä kansio.

Yrityksen nimen saat piilotettua, kun kirjoitat muistioon seuraavan tekstin:

#otsikkoteksti .yritys_nimi {
	display: none;
}

2.) Seuraavaksi tallenna tiedosto tietokoneellesi ja vaihda tiedoston nimen .txt -pääte .css -päätteeksi. Älä käytä ä ja ö kirjaimia tai erikoismerkkejä tiedoston nimessä.

3.) Kun olet tallentanut tiedoston .css muodossa, avaa ajanvarauksen hallinta ja siirry kohtaan asetukset ja sen alta ulkoasu -välilehti.
4.) Klikkaa "Valitse tiedosto" ja hae tallentamasi css-tiedosto.
5.) Tiedoston nimi näkyy nyt Valitse tiedosto -painikkeen vieressä.
6.) Valitse seuraavaksi "Siirrä tiedosto".
7.) Onnistuneen siirron jälkeen ruutuun ilmestyy teksti "Tiedosto siirretty onnistuneesti".
8.) Sulje asetukset ja avaa uudelleen asetukset ja ulkoasu. oma.css -linkki on nyt näkyvissä ulkoasu -välilehdellä.
9.) Kun klikkaat linkkiä, näet css-koodin, jonka olet siirtänyt palvelimelle. Avaa tämän jälkeen Internet-ajanvarauksen asiakasnäkymä, ja päivitä sivu tarvittaessa (Ctrl + F5). Yrityksen nimi on nyt poistunut.

Css muutokset1d.jpg

Css muutokset2a.jpg

Css muutokset3a.jpg

Esimerkki 2: Sijainti hakukentän piilottaminen

Jos haluat tehdä lisää muutoksia jo tekemääsi css-tiedostoon ja ladata sen uudelleen, uusi tiedosto korvaa aina vanhan oman tiedostosi. Jos siis haluat, että esimerkissä 1 esitelty muutos pysyy voimassa, käytä aloittamaasi css-tiedostoa, ja lisää siihen uusia rivejä.
Sijainti hakukenttä voidaan piilottaa seuraavalla koodilla:

#otsikkoteksti .sijainti {
	display: none;
}


Esimerkki 3: Oman yrityslogon käyttäminen asiakasnäkymässä

Oman yrityksen logo voidaan muuttaa näkymässä olevan oletuslogon tilalle seuraavasti:
1.) Piilotetaan näkymässä oleva oletuslogo seuraavalla koodilla

#yrityksen_logo {
	display: none;
}
#otsikkoteksti .h_center_container span {
	display: none;
}


2.) Lisätään oman yrityksen logo
Oman teeman lisäys -toiminnon avulla palvelimelle voidaan siirtää css-tiedostoja. Omaa logoa ei siirretä kuvatiedostona, vaan se liiteään taustakuvaksi käyttäen esimerkiksi omilla webbisivuilla olevaa logoa ja sen url-osoitetta. Url-osoite löytyy helposti siten, että:

  • Klikataan webbisivulla olevan logon kuvan päällä hiiren oikealla korvalla.
  • Valitaan "Avaa kuva uudessa välilehdessä". Kopioidaan koodia varten näkyvissä oleva url-osoite kokonaisuudessaan.


Url osoite.png

Vaihdetaan oman logon url-osoite seuraavan koodin () suluissa olevan url-osoitteen tilalle:

.h_center_container {
    background-image: url(http://nettivaraus.com/images/d/d1/Oma_logo.png);
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
}
#otsikkoteksti {
    margin-bottom: 0px;
}


Esimerkit 1-3: Ennen ja jälkeen

Ennen muutoksia
Otsikkotekstit ennen.png

Muutosten jälkeen
Otsikkotekstit jalkeen.png


Internet-ajanvaraus asiakasnäkymän 4.2 teeman muokkaus

Esimerkki 1: Kirjautumisikkunan piilottaminen

1.) Ensimmäiseksi sinun tulee luoda tietokoneellesi css-tiedosto. Voit luoda sen käyttämällä esimerkiksi muistio-sovellusta (Notepad-sovellus) , joka löytyy kaikista Windows-koneista. Uuden muistion luot helpoiten, kun klikkaat tietokoneesi työpöytää hiiren vasemmalla painikkeella, valitse "uusi" ja "uusi tekstitiedosto" Seuraavaksi avaa luomasi tyhjä kansio.

Kirjautumisikkunan saat piilotettua, kun kirjoitat muistioon seuraavan tekstin:


Ulkoasunmuokkaaminen1.png

2.) Seuraavaksi tallenna tiedosto tietokoneellesi ja vaihda tiedoston nimen .txt -pääte .css -päätteeksi. Älä käytä ä ja ö kirjaimia tai erikoismerkkejä tiedoston nimessä.

3.) Kun olet tallentanut tiedoston .css muodossa, avaa ajanvarauksen hallinta. 4.) Valitse ensin asetukset ja sitten ulkoasu. Tarkista, että olet valinnut haluamasi toimipisteen. 5.) Valitse seuraavaksi "Valittu teema ja oma teema".6.) Valitse "Selaa" ja etsi tallentamasi tiedosto. 7.) Valitse seuraavaksi "Siirrä tiedosto". 8.) Onnistuneen siirron jälkeen ruutuun ilmestyy teksti "Tiedosto siirretty onnistuneesti". 9.) Paina "Tallenna". 10.) Kun avaat ajanvarausnäkymän, kirjautumisikkunan ei pitäisi enää näkyä ajanvarauksessa.

Ulkoasunmuokkaus2.png

Ajanvarauksen näkymä ennen ja jälkeen muokkauksen:

Ulkoasunmuokkaus3.png

Toimipisteen valinta -ikkunan piilottaminen

Toimi kuten esimerkissä 1, mutta kirjoita tyhjään tiedostoon seuraava teksti:
Ulkoasunmuokkaus4.png

Mikäli haluat piilottaa toimipisteen valinta -ikkunan lisäksi toimipisteen nimen myös varauslomakkeelta, kirjoita tyhjään tiedostoon seuraava teksti: Ulkoasunmuokkaus5.png

Työntekijän valinta -ikkunan piilottaminen

Toimi kuten esimerkissä 1, mutta kirjoita tyhjään tiedostoon seuraava teksti:
Ulkoasunmuokkaus6.png

Mikäli haluat piilottaa työntekijän valinta -ikkunan lisäksi työntekijän nimen myös varauslomakkeelta, kirjoita tyhjään tiedostoon seuraava teksti: Ulkoasunmuokkaus7.png

Palvelun valinta -ikkunan piilottaminen

Toimi kuten esimerkissä 1, mutta kirjoita tyhjään tiedostoon seuraava teksti:
Ulkoasunmuokkaus8.png


Usean ominaisuuden piilottaminen

Mikäli haluat piilottaa useamman kuin yhden ominaisuuden, kirjoita tiedostoon allekkain kaikkien niiden ominaisuuksien koodit, jotka haluat piilottaa. Jos haluat piilottaa esimerkiksi kirjautumisikkunan, toimipisteen valinta ikkunan ja työntekijän valinta -ikkunan, kirjoita muistioon seuraava teksti:
Ulkoasunmuokkaus9.png