Skinning Tutorial

[Flutschi]

RGC Skinning Tutorial



First of all, i can't answer your question, i just know what i am testing :)


All the pictures are in the Clientfolder, under "skins\default\"!
I do a pokerskin for this tutorial :)



Let's get started with the Welcoming Screen.



Welcome Screen


http://img98.imageshack.us/img98/1550/bg2mv.png

Folder: "connect\images"

Standart Pic
Size: 401 x 308 x 24 BBP
Format: PNG
Filename: bg.png

You can put any picture of yours into that folder, just put the format to PNG and the filename to bg and edit the size in the config.ini to the size of your picture.

Ok, lets take this picture here -> Background (http://img707.imageshack.us/img707/7747/14195620.png)
Rename it to BG.jpg and transform the format of the file to PNG (i did it with Infraview)

Change the config.ini to this (This is the size of our poker picture)

width = 390
height = 250

and do the same step for the "login" folder!

And then it should look like this


http://img515.imageshack.us/img515/5471/rgc.png



Now lets edit the Standart pictures like the "X" to close.



Standard pictures

Folder: "windowmanager\images"
Size: 21 x 21 x 21BBP
Format: PNG

There you have the standartsymbols, who you can edit as you wish.

http://img5.imageshack.us/img5/1728/buttonexithover.png
buttonExit_hover.png


http://img508.imageshack.us/img508/9817/buttonexitinactive.png
buttonExit_inactive.png


http://img46.imageshack.us/img46/5400/buttonexitpressedr.png
buttonExit_pressed.png


http://img202.imageshack.us/img202/1190/buttonmaximizedisabled.png
buttonMaximize_disabled.png


http://img52.imageshack.us/img52/2236/buttonmaximizehover.png
buttonMaximize_hover.png


http://img511.imageshack.us/img511/5840/buttonmaximizeinactive.png
buttonMaximize_inactive.png


http://img707.imageshack.us/img707/1695/buttonmaximizepressed.png
buttonMaximize_pressed.png


http://img525.imageshack.us/img525/2066/buttonminimizehover.png
buttonMinimize_hover.png


http://img51.imageshack.us/img51/7038/buttonminimizeinactive.png
buttonMinimize_inactive.png


http://img707.imageshack.us/img707/5319/buttonminimizepressed.png
buttonMinimize_pressed.png


http://img710.imageshack.us/img710/9587/buttonnormalhover.png
buttonNormal_hover.png


http://img218.imageshack.us/img218/9149/buttonnormalinactive.png
buttonNormal_inactive.png


http://img707.imageshack.us/img707/1550/buttonnormalpressed.png
buttonNormal_pressed.png


Thats all you can do for now, more is to come :)

I will edit this if more skinediting is possible!


Have Fun,
Flutschi

[Sir Rogers]

The 'dyanmic.ui' files are the static ui files for your skin.

You can add lines, boxes and fancy stuff there. To edit the .ui files please download the QT Creator:

http://qt.nokia.com/downloads

Windows
http://qt.nokia.com/downloads/qt-creator-binary-for-windows


Regards,
Sir Rogers

[Spasmolyt]

Why are the static ui files called dynamic? :D

[feroNULL]

My first try :D
http://i49.tinypic.com/15zqr1h.png

[Dextair]

I would like to create a theme for RGC with Qt and CSS but I can only change some panels but not the entire application. There aren't files "dynamic.ui" for the main window with tabs.

How can I change the theme of the main window then ?

[Flutschi]

You cant yet, but this will come in the next 2 weeks i think, rogers spoke about it.

in version 4.0 everything is skinnable

[Sarathos]

Sounds wicked. Can you edit color and so on with the QT thing? Normally i'd do it with Photoshop but QT sounds abit more flexible :p .

[LeGoLaSSS]

With the qtcreator you can open the dynamic.ui files to find out the id's for the items you want to style and resize and move them around a bit. Keep in mind that you must not rename the items cause it will broke the client. Then you style the specific items with css in default.css file.

[Dextair]

Yes legolas I know it, I made it, but for the moment it's not possible to change the skin of the main window.

[Sir Rogers]

I would like to create a theme for RGC with Qt and CSS but I can only change some panels but not the entire application. There aren't files "dynamic.ui" for the main window with tabs.

How can I change the theme of the main window then ?

Give me 1-2 weeks until I release 4.0, in 4.0 the main window is modifiable.


Regards,
Sir Rogers

[Dextair]

Ok cool thanks ! :)

[Sarathos]

Would it be possible to ever quickly change the theme? For example creating a "Themes" tab which you could select your custom themes.

And create a folder named Themes, then you can create a folder in the Themes folder with for example "MyMGN Theme" and it would show up in the themes tab, assuming you got all the files in there?


Would be cool.

[Sir Rogers]

Would it be possible to ever quickly change the theme? For example creating a "Themes" tab which you could select your custom themes.

And create a folder named Themes, then you can create a folder in the Themes folder with for example "MyMGN Theme" and it would show up in the themes tab, assuming you got all the files in there?


Would be cool.

That's how it works. It would help if you actually tried out RGC. :P


Regards,
Sir Rogers