Autor Wątek: Opis tworzenia styli dla listy kontaktów i statusu  (Przeczytany 19695 razy)

0 Użytkowników i 1 Gość przegląda ten wątek.

Offline WhiteSmurff

  • Młodzież
  • **
    • http://whitesmurffy.yoyo.pl
Opis tworzenia styli dla listy kontaktów i statusu
« dnia: Luty 24, 2009, 21:55:47 pm »
Edycja plików contactListTheme.xml (styl listy kontaktów) oraz statusSwitchTheme.xml (styl zmieniarki statusów) jest dość analogiczna i prosta.

Ogolnie 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

Jesli zmienne w plikach zakanczane sa 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 kontatow podawane
crBackStart - tło zmieniarki początkowe
crBackEnd - tło zmieniarki koncowe
crTextBorder - kolor obramowania ramki do której wpisujemy status
crAvaBorder - kolor obramowania avatara

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 poczatkowy np zaznaczenia kontaktu/belki grupy/ belki zmiany statusu itd
end - kolor koncowy np zaznaczenia kontaktu/belki grupy/ belki zmiany statusu itd
border - kolor obramowania tego elemenetu
text - kolor kontaktu
textOnline - kolor kontaktu online
textWaitAuth - kolor kontaktu oczekującego na autoryzację
textNoAuth - kolor kontaktu z odrzucona autoryzacją
description - kolor np opisu kontaktu

Przykład:
<color type="start" value="B3668B0F"/>

Przykład podsumowywują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 elemenetu dropDown ktory 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 :)

Dla ułatwienia:
1 - crBack
2 - dropDown
3 - expander
4 - main
5 - crBackStart i crBackEnd - to jest to tło pod ramką 4 ;)
6 - group
7 - contact



CZCIONKI:
Dodatkowo mamy możliwość ustawienia/wybrania kroju i wielkości czcionki oraz pogrubienia/pochylenia/przekreślenia/podkreślenia dla:
group grupy
contactMain - kontaktu
contactMainOnline - kontaktu online
contactMainWaitAuth - kontaktu oczekującego na autoryzację
contactMainNoAuth - kolor kontaktu z odrzucona autoryzacją
contactDesc - opisu kontaktu
contactDescOnline - opisu kontaktu będącego online

opcje:
face="krój_czcionki" - gdzie w krój_czionki wpisujemy swoją nazwę
bold="0" - pogrubienie: 0-wyłączone, 1-włączone
italic="0" - kursywa: 0-wyłączone, 1-włączone
strike="0" - przekreślenie: 0-wyłączone, 1-włączone
underline="0" - podkreślenie: 0-wyłączone, 1-włączone
size="7" - rozmiar w px

AVATARY:
avatarSize - wartosc w px rozmiaru avatara na liście kontaktów
crAvatarFrame - kolor obramowania avatara
« Ostatnia zmiana: Listopad 01, 2009, 18:01:24 pm wysłana przez WhiteSmurff »
Windows XP SP2 IE 7; 32bit <img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Razz" />

Offline bziur

  • Młodzież
  • **
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #1 dnia: Luty 24, 2009, 22:18:30 pm »
przypiąć! ... a może umieścić w wiki?

Offline alberht

  • WTW evangelist
  • Global Moderator
  • Młodzież
  • *
    • http://forum.k2t.eu/
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #2 dnia: Luty 24, 2009, 23:28:36 pm »
@WhiteSmurff:
masz konto na wiki? jutro widzę ten tekst na wiki, albo Ty i Kaw macie ode mnie porządne lanie jeżeli będziecie w gdańsku...;)
btw - przydałby się jakiś zlot... jeżeli chodzi o Trójmiasto to wszyscy są do mnie zaproszeni;)
Regards,
alberht
WTW evangelist

Offline gibi

  • Młodzież
  • **
  • Ghost of navigator
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #3 dnia: Luty 25, 2009, 06:02:07 am »
o to to to to :D takie tutki są motorem rozwoju :D każdy przeczyta zacznie sam coś kombinować, kombinować zaczyna coraz więcej ludzi i wszystko się ładnie rozwija, jak to na wiosnę :)

Silverlight

  • Gość
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #4 dnia: Luty 25, 2009, 09:13:33 am »
Cytuj
vertical - nie wiem do czego przyznaje ;D

vertical to typ gradientu. Można ustawić poziomy bądź pionowy, zmieniając wartość odpowiednio na 1 bądź 0.

Krótkie porównanie:

vertical="1" (gradient pionowy)



vertical="0" (gradient poziomy)


Offline WhiteSmurff

  • Młodzież
  • **
    • http://whitesmurffy.yoyo.pl
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #5 dnia: Luty 25, 2009, 13:13:11 pm »
dzieki silver :) zedytowalem ten vertical ;)

@alberth: na wiki to nie mam konta :P a dupe mozesz mi skopac :P a do Gdańska sie nie wybieram :P
Windows XP SP2 IE 7; 32bit <img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Razz" />

Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #6 dnia: Luty 25, 2009, 15:40:51 pm »

rozumiem ze [+] w grupach jest zawsze bialy?
brak ogonków? alt mi wypadł

Offline zhvir

Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #7 dnia: Luty 25, 2009, 15:57:13 pm »
+ w grupach i w meta to ikonki .png
można je podmienić na własne
Chciałbym być zawsze niewinny i prawdziwy, chciałbym być zawsze pełen wiary i nadziei...

Offline Kaworu

  • Ryszard
  • Szlachta
  • *
  • Twój Koszmar Senny
    • k2t.eu
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #8 dnia: Luty 25, 2009, 16:00:06 pm »
Dorzuciłem tekst do wiki, trzeba tylko przeformatować ;p

@WhiteSmurff, jakbyś chciał konto na wiki to zawołaj na jakimś kanale komunikacji niepublicznym; ;p

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #9 dnia: Luty 26, 2009, 19:25:49 pm »
troszkę z innej beczki
jak zrobić przezroczystość w oknie rozmowy - tło wypowiedzi
o ile jest to możliwe, pewnie się da obrazkami, ale sam kolor ?

Offline zhvir

Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #10 dnia: Luty 26, 2009, 19:44:12 pm »
ja proszę o przeformułowanie i doprecyzowanie pytania
Chciałbym być zawsze niewinny i prawdziwy, chciałbym być zawsze pełen wiary i nadziei...

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #11 dnia: Luty 26, 2009, 19:53:38 pm »
daje kolor tła background-color: #074562; pola chat-full-send i chcę nadać mu przezroczystość

Offline zhvir

Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #12 dnia: Luty 26, 2009, 20:49:12 pm »
selektor { filter: Alpha(Opacity=nieprzezroczystość, FinishOpacity=koniec, Style=styl, StartX=xp, StartY=yp, FinishX=xk, FinishY=yk) }

gdzie selektor oznacza "specyficzny" znacznik

Natomiast inne wyrazy oznaczają:

nieprzezroczystość
    Poziom nieprzezroczystości (0 - przezroczysty; 100 - nieprzezroczysty - domyślnie)
koniec
    (opcjonalnie) przezroczystość końcowa (0 - przezroczysty, 100 - nieprzezroczysty)
styl
    Charakterystyczny kształt przezroczystości:

        * 0 - jednolity (domyślnie)
        * 1 - liniowy
        * 2 - promieniowy
        * 3 - prostokątny

xp, yp
    Współrzędna pozioma i pionowa początku obszaru przezroczystości
xk, yk
    Współrzędna pozioma i pionowa końca przezroczystości
Chciałbym być zawsze niewinny i prawdziwy, chciałbym być zawsze pełen wiary i nadziei...

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #13 dnia: Luty 27, 2009, 09:40:18 am »
czyli kod:
#chat-full-recv {
padding: 3px;
border-bottom: 1px dashed #AAAAAA;
background-color: #EEEEEE;
filter: Alpha(Opacity=80);
}
jest poprawny, nie ma co prawda przezroczystości w oknie rozmowy, bo pewnie brak jej obsługi?

Offline Kaworu

  • Ryszard
  • Szlachta
  • *
  • Twój Koszmar Senny
    • k2t.eu
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #14 dnia: Luty 27, 2009, 09:43:38 am »
Cytat: "sznoorek"
bo pewnie brak jej obsługi?
Zaytaj o to swojego IE. ;P

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #15 dnia: Luty 27, 2009, 10:59:54 am »
mógłbym kogoś poprosić o sprawdzenie tego, czy chodzi poprawnie?

Offline Vimes

  • Global Moderator
  • Starszyzna
  • *
  • Nie tak zaraz ten ambaras
    • http://sirsamvimes.deviantart.com/
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #16 dnia: Luty 27, 2009, 12:08:55 pm »
Jakie masz IE ?
« Ostatnia zmiana: Luty 23, 2010, 19:55:05 pm wysłana przez zhvir »
Zanim napiszesz poszukaj PEBKAC!
Tutaj  piszę o fotografii
Kiedy myślisz ze natknąłeś się na dno dna i niżej już nic nie ma zawsze zjawia się koleś z łopatą

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #17 dnia: Luty 27, 2009, 12:27:31 pm »
testowałem w domu i w pracy ie7.0.5...

Offline zhvir

Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #18 dnia: Luty 27, 2009, 15:51:15 pm »
a co chcesz widzieć pod przezroczystością?
Chciałbym być zawsze niewinny i prawdziwy, chciałbym być zawsze pełen wiary i nadziei...

Offline sznoorek

  • Narybek
  • *
    • Klub Niewidomych RAZEM
Re: Opis tworzenia styli dla listy kontaktów i statusu
« Odpowiedź #19 dnia: Luty 27, 2009, 20:29:19 pm »
obrazek tła body

na dołączonym załączniku jest to wykonane za pomocą obrazków, a ja chce za pomocą półprzezroczystego koloru