Skins (Technical)

From Jaangle Music Organizer Wiki

Revision as of 06:19, 10 April 2009 (edit) Miskairal (Talk | contribs) (→[TrackList]) ← Older edit		Revision as of 06:31, 10 April 2009 (edit) (undo) Miskairal (Talk | contribs) (→[PlayList]) Newer edit →
Line 252:		Line 252:
	Font_NormalBold=Tahoma;14;0;700;0;0		Font_NormalBold=Tahoma;14;0;700;0;0
-	'''[InfoControl]'''	+	===[InfoControl]===
-	Bk=#000000	+	[[Image:Skins_infocontrol.jpg]]
-	Text=#9999DD	+	Bk=#000000 <span style="color:mediumvioletred">Yellow area in above screenshot</span>
-	AltBk=#24243D	+	Text=#9999DD <span style="color:mediumvioletred">Red text in above screenshot</span>
-	AltText=#9696DC	+	AltBk=#24243D <span style="color:mediumvioletred">Pink area in above screenshot</span>
-	Outline=#808080	+	AltText=#9696DC <span style="color:mediumvioletred">Purple text in above screenshot</span>
		+
		+	Outline=#808080
	Font_Normal=Tahoma;12;0;400;0;0		Font_Normal=Tahoma;12;0;400;0;0

---

Revision as of 06:31, 10 April 2009

Contents 1 About 2 Font Size 3 Color Picking Helpers 4 How to create skins 5 Colors.ini - What it all means 5.1 [Global] 5.2 [Toolbar] 5.3 [ToolbarButtons] 5.4 [StatusBar] 5.5 [PlayerBar] 5.6 [Splitters] 5.7 [Panes] 5.8 [TreeCtrl] 5.9 [TrackListTitle] 5.10 [TrackList] 5.11 [PlayList] 5.12 [InfoControl]

About

Skins are actually a collection of colors (more than 50 in the last count) for Jaangle. You can select a different skin from Options/Skins. You can download new skins (if available) from the forum. Install them by extracting the files to the skins directory.

Font Size

Font size can be controlled with the skin however you can also change the size of the font in all the panes at the same time.

The T buttons at the top right of your screen allow you to change the size of the font by repeatedly clicking them.

makes the font smaller

resets the font to the default/original size

makes the font larger

Also you can use shortcut keys

Hold down the Ctrl key and then hit the + or - key on your numeric pad. Don't try to use the + or - key at the top of the standard keyboard as this won't work.

Color Picking Helpers

A great online color schemer is HTML Color Combination Chooser

There are also some handy, free, portable programmes that you might find helpful to choose your colours

• Color Cop
• ColorMania

How to create skins

Skinning support in Jaangle is a quite easy for people with a lot of fantasy :). The steps to create a new skin are:

1. Go to Jaangle program folder and open "Skins" directory. (Generally this will be found in C: ->Program Files ->Jaangle)
2. Copy the "ClassicII" directory (folder) and paste it inside the "Skins" directory. Rename the new folder as (Example) "MySkin" and open it
3. Open "Colors.ini" with Notepad.exe or Wordpad.exe
4. Change the [skindetails] and put in your own info. Be sure to give credit to any other skin you may have copied to create yours.
5. Change the colors you want. For example to change the color of the background of the status bar, find the "[StatusBar]" section and the "Bk" value. Set it to #FF0000 to make it red
6. Save colors.ini. Test your skin, by selecting it in the Options/Skins dialog.
7. Post your creation in the forum.

NB. Some ini files will have different information to others. The simpler files were created in the days of TeenSpirit (see the Colors.ini in the Default folder). The new Colors.ini file for jaangle contains more options including changing the fonts.

Colors.ini - What it all means

[SkinDetails]

Name=ClassicII Change the skin name

Author=Alex Change the Author

Version=0.6 Change the version number (Start with 0.1 if you are unsure)

[email protected] Change the email address to your own or leave it blank

Description=Improvement on the classic skin Change the description to reflect how your new skin looks eg. Blues and Yellows of the beach.

WebSite=http://www.jaangle.com/ Change the website to your own if you are offering this skin up there or provide the Jaangle website

AutoUpdateURL=

[Global]

BorderLine=#808080 (see Red lines in above image)

Int_MaxRelativeFont=8

Int_MinRelativeFont=6

Font_Normal=Tahoma;14;0;400;0;0 FaceName ; Height ; Width ; Weight ; Italic ; Underline

Height is actually what we call font size. Width is the horizontal size. If width is 0 then it is the default value of the font. Weight is the "boldness" of the font. 100 is the thin, 400 is the normal value, 700 is the bold etc... Italic / Underline take the value of 0(Disabled) or 1(Enabled).

[Toolbar]

Bk=#0A0A0A (see red area in above image)

Text=#FA9632

Int_Height=26

Font_Normal=Tahoma;14;0;400;0;0

[ToolbarButtons]

Bk=#0A0A0A yellow area in above image

Text=#BBBBEE red text in above image

OverBk=#0A0A0A black area in above image - color of button background on hover

OverText=#FA9632 green area in above image - color of button text on hover

DownBk=#0A0A0A This is the button background color on click

DownText=#FA9632 This is the button text color on click

[StatusBar]

Bk=#0A0A0A yellow area in above image at bottom of Jaangle window

Text=#FA9632 red text in above image at bottom of Jaangle window

Int_Height=18

Font_Normal=Tahoma;12;0;400;0;0

[PlayerBar]

Bk=#0A0A0A

Text=#FA9632 red text in above image near bottom of Jaangle window

Slider1=#C8C8DC green area in above image near bottom of Jaangle window

Slider2=#80808C yellow area in above image near bottom of Jaangle window. It forms the centre of the player bar's right hand sides and the top of the equalizer bars.

Int_Height=52

Font_Normal=Tahoma;26;0;400;0;0

Font_NormalBold=Tahoma;26;0;700;0;0 Song Title

Font_Time=Tahoma;26;0;400;0;0 Time played

Font_Length=Tahoma;14;0;400;0;0 Length of Track

[Splitters]

Bk=#ECE9D8 Seen in red in above image

OverBk=#FFFFFF Hover color for above

DisabledBk=#FFFFFF

Int_Size=6

[Panes]

Bk=#000000 Yellow area in above image

Text=#FA9632 Red text in above image (Play and Enqueue)

CaptionBk=#141428 Pink area seen in above image

CaptionText=#FA9632 White text seen in above image

CaptionOutline=#000000 Green area seen in above image

Int_Height=20

Font_Normal=Tahoma;12;0;400;0;0

[TreeCtrl]

Bk=#ACACC4 White area in above image

Text=#0000FF Black text in above image

SelBk=#1E1EFF Yellow area in above image

SelText=#FFFFFF Red text in above image

SubBk=#FFFFFF Pink area in above image

SubText=#000000 Purple text in above image

Font_Normal=Tahoma;14;0;400;0;0

Font_NormalBold=Tahoma;14;0;700;0;0

Font_Big=Tahoma;18;0;400;0;0

Font_BigBold=Tahoma;18;0;700;0;0

[TrackListTitle]

[]Image:Skins_tracklisttitle.jpg]]

Bk=#000000 Yellow area in above screenshot

Text=#8C8CE6 Red Text in above screenshot

Int_Height=28

Int_EditHeight=20

Font_Normal=Tahoma;14;0;400;0;0

Font_NormalBold=Tahoma;14;0;700;0;0

Font_Edit=Tahoma;14;0;400;0;0

[TrackList]

Bk=#F0F0FF Yellow area in above screenshot

Text=#000000 Red Text in above screenshot

AltBk=#CDCDDC Green area in above screenshot

AltText=#000000 Dark green Text in above screenshot

SelBk=#0F0FDC Pink area in above screenshot (selected track)

SelText=#FFFFFF Purple Text in above screenshot

Font_Normal=Tahoma;14;0;400;0;0

[PlayList]

Bk=#000000 Yellow area in above screenshot

Text=#6464FA Red text in above screenshot

SelBk=#9696C8 Pink area in above screenshot

SelText=#323264 Purple text in above screenshot

DisabledText=#808080

CurText=#F0D20A Green text in above screenshot

SelCurText=#F0D20A

Int_Height=18

Font_Normal=Tahoma;14;0;400;0;0

Font_NormalBold=Tahoma;14;0;700;0;0

[InfoControl]

Bk=#000000 Yellow area in above screenshot

Text=#9999DD Red text in above screenshot

AltBk=#24243D Pink area in above screenshot

AltText=#9696DC Purple text in above screenshot

Outline=#808080

Font_Normal=Tahoma;12;0;400;0;0

Font_Edit=Tahoma;14;0;400;0;0

[MiniPlayer]

Bk=#000000

Text=#FFFFFF

Int_Height=25

Font_Normal=Tahoma;14;0;400;0;0

Font_NormalBold=Tahoma;14;0;700;0;0