Podešavanje izgleda

Pošalji komentar

Ocenite članak

 

Web servis Vremenska prognoza u svom standardnom prikazu izgleda ovako

Vremenska prognoza, web servis, screenshot
Vremenska prognoza, web servis, screenshot


Ukoliko želite, prikaz vremenske prognoze možete prilagoditi svom web sajtu ubacivanjem relativno jednostavnog CSS koda na web stranicu, iza javascript koda kojim pozivate vremensku prognozu.

CSS id selektori



Da biste pravilno formirali CSS kod, morate biti upoznati sa HTML strukturom našeg widgeta. Osnovni elementi su označeni id parametrom, a na sledećoj slici su prikazane veze CSS id selektora sa HTML elementima.

Veza CSS id selektora sa HTML elementima vremenske prognoze
Veza CSS id selektora sa HTML elementima vremenske prognoze


  • #magma_weather - div, vremenska prognoza
  • #magma_weather_details - div, sadrži naziv grada, grafički prikaz trenutnog vremena, temperaturu i podnaslov "Vremenska prognoza"
  • #magma_weather_city - p, naziv grada za koji su prikazani vremenski podaci
  • #magma_weather_img - img, grafički prikaz trenutnog vremena
  • #magma_weather_temp - p, trenutna temperatura
  • #magma_weather_forecast - podnaslov "Vremenska prognoza"
  • #magma_weather_today - td, prognoza za danas
  • #magma_weather_tomorrow - td, prognoza za sutra


CSS kod



U nastavku teksta je dat CSS primer koji treba da prilagodi izgled vremenske prognoze web sajtu na kome se ovaj widget prikazuje. U ovom primeru se podešavaju sledeći parametri:

  • Izgled i veličina fonta, da budu isti kao na ostatku web stranice
  • Dodat je okvir sive boje, širine 1 piksel i sa zaobljenim ivicama
  • Boja pozadine je bledo-žuta
  • Širina margina oko vremenske prognoze je podešena na 10 piksela.


1
<style type="text/css">
2
#magma_weather {
3
background: lightyellow;
4
margin: 10px auto !important;
5
max-width: 170px;
6
border: 1px solid gray;
7
border-radius: 10px;
8
font-family: inherit !important;
9
font-size: 1em !important
10
}
11
12
#magma_weather_temp {
13
font-size: 1.25em;
14
font-weight: bold
15
}
16
</style>


Rezultat



Ovde je prikazana demonstracija uživo, tj. kako gore navedeni CSS kod utiče na krajnji izgled widgeta Vremenska prognoza kada je prikazan na web sajtu.