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:
/* háttér */
BODY{background:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorStr='#ffffff',endColorStr='#eeeeee');margin:4px}
DIV#content{font:12px}
DIV#insert{display:none}
/* lekerekítés és buborék csücsök */
DIV.b1{height:1px;font-size:1px;overflow:hidden;border-top:1px solid #bbbbbb;background:#ffffff;margin:0 5px 0 0}
DIV.b2{height:1px;font-size:1px;overflow:hidden;border-left:2px solid #bbbbbb;border-right:2px solid #bbbbbb;background:#ffffff;margin:0 3px 0 1px}
DIV.b3{height:1px;font-size:1px;overflow:hidden;border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;background:#ffffff;margin:0 2px}
DIV.b4{height:2px;font-size:1px;overflow:hidden;border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;background:#ffffff;margin:0 1px 0 3px}
DIV.be5{height:2px;font-size:1px;overflow:hidden;border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;background:#ffffff;margin:0 1px 0 4px}
DIV.b5{height:2px;font-size:1px;overflow:hidden;border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;margin:0 1px 0 6px}
DIV.b6{height:1px;font-size:1px;overflow:hidden;border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;margin:0 2px 0 7px}
DIV.b7{height:1px;font-size:1px;overflow:hidden;border-left:2px solid #bbbbbb;border-right:2px solid #bbbbbb;margin:0 3px 0 8px}
DIV.b8{height:1px;font-size:1px;overflow:hidden;border-bottom:1px solid #bbbbbb;margin:0 5px 5px 10px}
/* chat mező*/
DIV.chat{border-left:1px solid #bbbbbb;border-right:1px solid #bbbbbb;margin-left:5px;color:#323232;padding:2px 10px 8px}
/* chat mező üzenet*/
DIV.chat DIV.msg{margin:0}
/* chat mező következő üzenet*/
DIV.chat DIV.Nth{margin:2px 0 0}
/* chat mező üzenetküldő neve*/
DIV.chat SPAN.salutation{font-weight:700;display:inline;margin:0 2px 0 0}
/* avatar*/
DIV.out .icon{float:right;margin:0px 5px 0 0}
DIV.in .icon{float:left;margin:0px 5px 0 0}
.icon{float:left;margin-right:5px;background:#ffffff;border:1px solid #bbbbbb;padding:2px; }
/* floatolás törlése */
DIV.clear{clear:both;height:1px;overflow:hidden}
/* üzenet vége egy buborék lezárása */
DIV.break{height:1px;overflow:hidden;margin:3px 0 0}
/* floatolás */
.fl{float:left}
/* értesítési üzenetek */
DIV.system1st,DIV.systemNth{border-bottom:1px dotted #bbbbbb;color:#bbbbbb;font:8pt;margin-bottom:6px;padding:0px 0px 4px 0px}
/* be és kimenő üzenetek (külön is választhatóak)*/
DIV.out,DIV.in{text-align:left;background:#ffffff;height:1px;font:8pt Lucida Sans}
DIV.t-o,DIV.t-i{background-color:#ffffff}
DIV.b-o,DIV.b-i{background-color:#eeeeee}
HTML változtatás
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:
< div class='msg Nth'>%message%< /div>< /div>
< div id='insert'>< /div>
< img src="images/smile.gif" width="1" height="1" style="display:none;" onload="
var smiley = document.getElementById('message').parentNode.innerHTML;
smiley = smiley.replace(/onload/g, 'onclick'); smiley = smiley.replace(/id=message/g, 'id=smiley');
smiley= smiley.replace(/>:-?\)< img src=images/1.gif style=display:inline;><'); smiley= smiley.replace(/>:\(< img src=images/2.gif style=display:inline;><'); smiley= smiley.replace(/>;\)< img src=images/3.gif style=display:inline;><'); smiley= smiley.replace(/>:-?a{0}D< img src=images/4.gif style=display:inline;><'); smiley= smiley.replace(/>\;\;\)< img src=images/5.gif style=display:inline;><'); smiley= smiley.replace(/>:-?\/< img src=images/7.gif style=display:inline;><'); smiley= smiley.replace(/>X-\(< img src=images/14.gif style=display:inline;><'); smiley= smiley.replace(/>B-\)< img src=images/16.gif style=display:inline;><'); smiley= smiley.replace(/>:\(\(< img src=images/20.gif style=display:inline;><'); smiley= smiley.replace(/>:\)\)< img src=images/21.gif style=display:inline;><'); document.getElementById('message').parentNode.innerHTML=smiley; ">
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.
