Podešavanje izgleda kursne liste

Pošalji komentar

Ocenite članak

 

Web servis Kursna lista se već u svom standardnom prikazu prilagođava dizajnu web sajta u koji je integrisan. Nasleđuje font, veličinu slova i izgled elemenata za unos teksta i padajućih lista.

Prikaz kursne liste možete dodatno podesiti ubacivanjem odgovarajućeg CSS koda na web stranicu, iza javascript koda kojim je pozvana kursna lista.

CSS id selektori i CSS klase



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 kursne liste
Veza CSS id selektora sa HTML elementima kursne liste


  • #magma_goodies_currency - div, kursna lista widget
  • .flag .size - div, prikaz zastave i određivanje veličine kursne liste
  • #magma_goodies_currency_calculator - div, valutni kalkulator


Primer



U nastavku teksta je CSS primer koji treba da postavi:

  • Postavi širinu widgeta na 150 piksela, sivi okvir širine 1 piksel sa zaobljenim uglovima radijusa 10 piksela
  • Svetlo žutu boju pozadine, dok će osenčene valute (svaki drugi red) imati 50% providnu narandžastu pozadinu
  • Širinu zastave na 50 piksela
  • Veličinu fonta na 75% od veličine slova na web sajtu.


1
<style type="text/css">
2
#magma_goodies_currency {
3
font-size: 0.75em;
4
width: 150px;
5
border: 1px solid gray;
6
border-radius: 10px;
7
background-color: lightyellow;
8
}
9
#magma_goodies_currency .currency_shadow {
10
background-color: rgba(255, 238, 130, 0.5);
11
}
12
#magma_goodies_currency .flag {
13
background-size: 50px auto;
14
height: 30px;
15
line-height: 30px;
16
padding-left: 60px;
17
}
18
</style>


Rezultat



Ovde je prikazana demonstracija kako CSS kod utiče na krajnji izgled kursne liste.