WTW - Style

Z WTW :: Wiki

Informacje wstępne

Styl (okna) rozmowy ('chatTheme.html') - instalacja

W głównym oknie programu z menu 'WTW' należy wybrać 'Otwórz lokalizację profilu', następnie utworzyć tam folder 'userTheme', a w nim 'htmlChat', który jest odpowiedzialny za przechowywanie stylu okna rozmowy. Gotowe style okna rozmowy znajdziesz na forum Wygląd, style, i podobne.

Styl (okna) rozmowy ('chatTheme.html') - zmienne

Zmienne, które można w tym pliku wykorzystać:

  • %time% - Godzina (HH:MM:SS);
    • %time(format)% - format: cokolwiek co przejdzie przez funkcję strftime, z jedną małą różnicą: zamiast % używamy $;
  • %date% - Data (DD/MM/YYYY);
  • %datetime% - Godzina oraz, jeśli wiadomość pochodzi z innego dnia niż obecny, także data;
  • %text% - Tekst wiadomości;
  • %name% - Nazwa kontaktu (lub nasza);
  • %id% - ID kontaktu (bez ID sieci);
  • %path% - Ścieżka do folderu stylu;
  • %avatar% - Ścieżka do pliku avatara (prawidłowe tylko dla "rozmów");
  • %net% - identyfikator sieci kontaktu, prawidłowe tylko dla wypowiedzi odbieranych (oraz nagłówka i stopki);
  • %group% - grupa w której kontakt jest, prawidłowe tylko dla wypowiedzi odbieranych (oraz nagłówka i stopki);
  • %groupColor% - kolor grupy w której jest kontakt lub jeśli grupa nie ma swojego koloru "transparent";

Styl okna głównego ('contactListTheme.xml') oraz okna zmiany opisu ('statusSwitchTheme.xml')

Edycja plików contactListTheme.xml (styl listy kontaktów) oraz statusSwitchTheme.xml (styl zmieniarki statusów) jest dość analogiczna i prosta.


Ogólnie mamy 2 typy zmiennych kolorów tzn RGB (standardowe w formacie RRGGBB) oraz ARGB (w formacie AARRGGBB) gdzie:

  • AA - kanał alpha - przezroczystość dla FF (biały) 0% przeźroczystości (widzimy wszystko) dla 00 (czarny) 100% przeźroczystości (nie widzimy), oczywiście możliwe są mieszane barwy szarości typu np B3 ileś tam % przeźroczystości - działa tak samo jak maski np w photoshopie ;)
  • RR - kanał red - czerwony
  • GG - analogicznie zielony
  • BB - analogicznie niebieski


Jeśli zmienne w plikach zakańczane są przez START i END oznacza to ze dane tło jest gradientem tych 2 kolorów.


Zmienne w plikach - ogólne:

  • crBack - tło listy kontaktów podawane
  • crBackStart - tło zmieniarki początkowe
  • crBackEnd - tło zmieniarki końcowe
  • crTextBorder - kolor obramowania ramki do której wpisujemy status
  • crAvaBorder - kolor obramowania awatara
Przykład:
<color type="crBack" value="dbfaaa"/>


Szczegółowe "bloki" skinowane są w grupach i tak:

  • group - kolorystyka bloku grup
  • contact - kolorystyka zaznaczenia kontaktu
  • meta - kolorystyka zaznaczenia metakontaktu
  • dropDown - kolorystyka elementu gdzie jest nasza ikonka statusu
  • expander - kolorystyka elementu gdzie jest nasz nick + aktualny opis
  • main - kolorystyka rozwiniętej ramki ze zmianą statusu
Przykład:
<colorset type="dropDown"></colorset>


I teraz tak każdy z tych "bloków" ma kilka typów i zmiennych:

  • normal - standardowy wyswietlany
  • selected - zaznaczony
  • hover - po najechaniu myszka (wystepuje tylko w zmieniarce)
  • vertical - vertical="1" (gradient pionowy); vertical="0" (gradient poziomy) - dzieki silverlight
  • rounding - zaokraglanie belek - dla 0 prostokat, dla np 6 prostokat z zaokraglonymi rogami
  • pen - grubosc obramowania danego elementu
Przykład:
<group type="normal" vertical="1" rounding="6" pen="1.5">


Zmienne w typach

  • start - kolor początkowy np zaznaczenia kontaktu/belki grupy/ belki zmiany statusu itd
  • end - kolor końcowy np zaznaczenia kontaktu/belki grupy/ belki zmiany statusu itd
  • border - kolor obramowania tego elementu
  • text - kolor tekstu
  • description - kolor np opisu kontaktu
Przykład:
<color type="start" value="B3668B0F"/>

Przykład podsumowujący

<colorset type="dropDown">
		<group type="selected" vertical="1" rounding="6" pen="1.5">
			<color type="start" 		value="FF668B0F"/> <!-- ARGB -->
			<color type="end" 		value="FF506C0C"/>
			<color type="border" 		value="FF82B210"/>
			<color type="text" 		value="000000"/> <!-- RGB -->
		</group>
</colorset>
Ten fragment kodu dotyczy elementu 'dropDown', który ma typ 'selected'. Zmienne kolorystyczne będą zatem dotyczyły elementu gdzie jest nasza ikonka statusu w zmieniarce statusu tylko wtedy kiedy będzie ona zaznaczona/kliknięta :)