Dostosowywanie wyglądu widżetu

Wygląd widgetu możesz zmienić przy pomocy stylów CSS. Aby to ułatwić, niektórym elementom widgetu nadano następujace klasy:

Klasa Opis
PogodaNetWidget_Title Tytuł np. "Pogoda we Wrocławiu".
PogodaNetWidget_Day Data prognozy np. "Dziś", "Sobota".
PogodaNetWidget_TempHigh Temperatura maksymalna.
PogodaNetWidget_TempLow Temperatura minimalna.
PogodaNetWidget_TempSep Separator (|) pomiędzy temperaturą maksymalną i minimalną.
PogodaNetWidget_Desc Opis warunków pogodowych np. "przeważnie pochmurno".
PogodaNetWidget_Link Link do serwisu Pogoda.net w stopce widżetu.

Możemy więc zmienić kolor tytułu na czerwony używając następującej reguły:

    .PogodaNetWidget_Title {
      color: red !important;
    }
    

Do pozostałych elementów można się odwoływać wykorzystując fakt, że cały widżet znajduje się w elemencie <div> o identyfikatorze PogodaNetWidget. Na przykład aby zwiększyć wolną przesztrzeń (margines) wokół ikon do 10 pikseli, możemy zdefiniować następującą regułę:

    #PogodaNetWidget img {
      margin: 10px !important;
    }
    

Obramowanie w kolorze ciemnozielonym uzyskamy w następujący sposób:

    #PogodaNetWidget {
      border-color: #003300 !important;
    }
    

Pamiętaj aby w deklaracjach stylów używać reguły ważności !important. W ten sposób masz pewność, że przesłonią one standardowe ustawienia widgetu.

Na koniec jeden przykład jak można, stosując tylko style CSS, dostosować wygląd widgetu do wyglądu witryny:

Przykład pochodzi z serwisu Teleman.pl.

Jeżeli masz popularny serwis WWW i potrzebujesz pomocy w dostosowaniu widgetu - napisz.