Yup, the best way to learn this stuff is as you have done to use Confluence skin as a base, then edit that in small steps. JezzX which has coded Confluence is a very skilled skinner so you can also be sure that his code is pretty clean and in line with "best practice" and optimized.
But Don't change to much stuff at the same time, this will most likely get you more confused. Focus on one simple task and do that properly and learn it well - also the reason and logic behind it.
Bit by bit you will start to grasp the big picture of things. I bellive this is the way all of us at some time has learned the skinning engine.
When you edit confluence skin some good advices:
1.
Dont permanently delete org code lines in the xml, comment them out first. This way you can always revert to org states. At the same time you keep good example code intact to learn from.
2.
Always comment in the xml files the stuff you create/add. This way you can keep track of the changes you have made.
3.
A good and free xml editor is Notepad++ / this editor gives you xml markup and also checks your code for missing/wrong coding.
4.
It's very easy to forget some brackets/coding stuff in xml files. So if something doesent work, try and load the XML file in a browser - The browser will tell you if any lines in the xml has wrong syntaxes.
5.
Learn how to not HARDCODE stuff in your code. This goes for colors, font type, sizes etc. You can reference all of this to xml template files that contain different color/font configs. So if you decide that you need a bigger font some places you can just change this from one xml and all the other code reads from that location. If not you will end up editing many xml lines and files to change stuff like that.
6.
Reuse code ! If you find yourself reusing some code trough many xml files or in the same xml file - you can create one "master" code in a template. Then you can just reference to that location troughout your coding. Again you just have to edit the referenced codelines to change them all.
LEARN HOW TO USE Includes.xml :
Code:
The other special (and arguably the most important skinning file of all) is includes.xml.
This is, as its title suggests, a place from which you can define the default look, size,
and positioning of controls, to save you replicating many of the control's attributes
throughout the window .xml files. For instance, you can setup the size, and textures
used for a button control, thus allowing you to leave those details out in the rest of
the skin files, unless ofcourse you want to override the default look or size etc.
in a particular window.
Code:
[b]<includes>[/b]
[b]<include[/b] [color=#000066]name[/color]=[color=#ff0000]"whitetext"[/color][b]>[/b]
[b]<textcolor>[/b]ffffffff[b]</textcolor>[/b]
[b]</include>[/b]
[b]<include[/b] [color=#000066]file[/color]=[color=#ff0000]"listdefaults.xml"[/color] [b]/>[/b]
[b]<default[/b] [color=#000066]type[/color]=[color=#ff0000]"button"[/color][b]>[/b]
[b]<include>[/b]whitetext[b]</include>[/b]
[b]</default>[/b]
[b]<constant[/b] [color=#000066]name[/color]=[color=#ff0000]"leftedge"[/color][b]>[/b]50[b]</constant>[/b]
[b]</includes>[/b]
So to sum it up: Learn how to code "smart" before you do to much code.