Elkészültünk az első Google Talk Chat felszínünkkel, ami a programban alapból található felszínek szemnek tetsző hiányosságait küszöböli ki.
A Google asztali csevegő programja jelenleg még mindig béta állapotban van és láthatólag a Google nem is nagyon fektet bele hatalmas energiákat, hogy ez az állapot megváltozzon. Öröm az ürömben, hogy a csevegő program User Interface elég jól szerkeszthető némi HTML tudással ezért könnyedén személyre szabhatunk számos dolgot a csevegő ablakokon például. MI is ezt tettük és így készülhetett el a Nice Bubbles Google Talk Skin első verziója, amely buborék jellegű társalgásúvá változtatja az amúgy elég egyszerű Gtalk megjelenítést.
Telepítés
A skin telepítéséhez a következőket kell tennünk:
1. lépés Másold a fájlokat ide (Windows 7) C:\Users\{USER}\AppData\Local\Google\Google Talk\themes\user
2. lépés Settings --> General --> Change Font --> Tahoma 8pt
3. lépés Settings --> Apperance --> Chat Theme --> Nice Bubble És már készen is van a csere.
Amennyiben egy kicsit jobban szeretne elmélyedni azoknak érkezzen most egy kis támpont. A lapvetően egy Google Talk felszín kivitelezéséhez három fájlt kell módosítani a legdfontosabb a main.css, amely természetesen azegész felszín kinézetét és színvilágát határozza meg. Itt a CSS programozásból már megszokott paraméterekkel doglozhatunk, azonban ügyelnünk kell arra, hogy mivel Windows-on fut a program természetesen a CSS3-as dolgokat nem ismeri tehát ha például lekerekíteni akarunk (ahogy mi is tettük) ahhoz bizony pontosan annyi blokk elemre vban szükség, ahány pixeles lekerekítést akarunk elkészíteni.
Forrás fájlok
A fájlokat, amiket módosítanunk kell a következő elérési úton találhatjuk. Természetesen ha a Nice Bubble helyett másik mappába másoljuk a felszínt akkor a program felszínválasztója annak a könyvtárnak a nevét fogja kiírni. C:\Users\{USER}\AppData\Local\Google\Google Talk\themes\user\chat\Nice Bubble\Contents\Resources
CSS változtatás
A mi általunk készített CSS így néz ki a fontosabb részek be is vannak kommentelve:
A CSS-en től két további fájl is van, amiket ha nem szeretnénk, hogy a kimenő és bejövő üzenetek különbözzenek, akkor egyként is kezelhetünk. Ezeket a Contents\Resources\Incoming és Contents\Resources\Outgoing mappában találhatjuk meg Content.html névvel. Nálunk így fest egy ilyen fájl:
< div class='icon'>< div style='height:1px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="%userIconPath%")'>< /div >< /div>
< div class='fl inmsg'>
< div class='t-i b1'>< /div>
< div class='t-i b2'>< /div>
< div class='t-i b3'>< /div>
< div class='t-i b4'>< /div>
< div class='t-i be5'>< /div>
< div class='chat in'>
< div class='msg 1st'>< span class='salutation'>%sender%:< /span> %message%< /div>
< div id='insert'>< /div>
< div class='clear'>< /div>
< /div>
< div class='b-i b5'>< /div>
< div class='b-i b6'>< /div>
< div class='b-i b7'>< /div>
< div class='b-i b8'>< /div>
< /div>
< div class='break'>< /div>
Látható, hogy az avatar egy balra floatolt elembe kerül jobbra pedig maga a buborék, amely mivel 5 pixeles lekerekítést kapott így a korábban említett probléma miatt felül és alul is 4 extra divet kellett beadni, amelyek különböző hosszúságúak így adják ki a sarkok kerekedését. A program a következő változókban adja vissza a tartalmat:
Kildő/fogadó neve: %sender% Üzenet: %message% Avatar: < div style = 'height:1px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="%userIconPath%")'>< /div>
Ezekből áll tehát egy üzenet, ezeknek kell szerepelniük, de hogy miként helyezzük el őket az már csak a mi fantáziánkra van bízva teljes egészében. Arra mindenképp ügyeljünk, hogy azért amennyire lehet a Google által használt classokat tartsuk meg az elemek körül és inkább hozzunk létre köréjük általunk definiált elemeket, így biztosan nem lesz problémánk.
Természetesen egyedi képeket is rakhatunk be és így szinte bármilyen kinézetet elő varázsolhatunk, a képekre relatív hivatkozásként kell linkelni. például: /images /20.gif. Azt mindenkép érdemes szem előtt tartani, hogy minél több képet használunk annál nagyobb lesz a program memória használata, tehát amit tudunk oldjunk meg CSS-ből.
Smile csere
Az üzenetben található Smile-kat is elvileg kicserélhetjük egyedi képekre, ehhez a következőt kell a Content.html-ben elhelyezni:
Ezt mi nem tudtuk letesztelni egyelőre, de számos külföldi forrás megerősítette, hogy működik ez a fajta karakter cserélés.
A skin-ünket a legegyszerűbb ha LIVE szerkesztjük, tehát a program működése közben, hiszen egy beszélgetés lecsukása után újra megnyitva ugyanazt a beszélgetést a Google Talk már az új felszínt fogja használni így folyamatosan ellenőrizhetjük a munkánkat.
Az általunk készített Nice Bubbles felszínt a cikk alján található linkről lehet leszedni. Amennyiben valakinek kérdése van tegye fel Facebookon a cikkhez tartozó poston vagy itt a kommentek között.
Cégünk által készített weblapokat eddig ennyien látták:
45 285 657
ebből a mai napon 27 781 látogató volt
Miért a TotalStudio?
Nálunk Ön az első Az Ön elképzelései és a mi kreativitásunk illetve szaktudásunk a garancia arra, hogy honlapja vagy grafikai megjelenése olyan legyen amilyenre mindig is vágyott.
Több éves tapasztalat Cégünk munkatársai több mint kilenc éve foglalkoznak webfejlesztéssel, informatikával és szerverüzemeltetéssel, ezen idő alatt mindenre felkészültünk!
Verhetetlen minőség Munkánkban nem ismerünk kompromisszumot! Mindig a legmagasabb minőségre törekszünk. A magunkkal szemben támasztott maximalizmus és a legújabb technológiák használata garantálja, ügyfeleink elégedettségét.
Gyorsaság és megbízhatóság Nálunk nem kell heteket várni, hiszen honlapja akár öt munkanapon belül is elkészülhet a szerződés aláírásától, de a gyorsaság soha nem megy a minőség rovására!
