Custom Skins and Layouts

From mAirListWiki

Jump to: navigation, search

You can almost completely customize the appearance of mAirList in various ways. You can change colours and fonts, rearrange screen elements, and much more. Theses changes are in two optional parts: skin and layout. You can use each type separately: you can have a custom skin, a custom layout, or both.

Do you need to change mAirList's colours to match your station branding? Do you want to make the player time displays bigger, or in a different font? How about a smaller progress bar? You can make those changes by creating and editing the skin.ini file.

Do you want a one-screen, simple two-player, one playlist, and file browser setup? Perhaps you would prefer a dual-screen layout with three players and a large playlist on screen one, and a large cartwall and browser on screen two? You can create those layouts—or any layout which fits your monitor—by creating and editing the layout.ini file.

You can even change the graphics on the buttons, by creating a set of .BMP files.

Contents

[edit]

Skin

Skin means the appearance of each of mAirList's screen elements, such as:

  • colours
  • fonts and font sizes
  • dimensions (height of a progress bar, width of Playlist columns, etc.)

You create a custom skin by adding a skin.ini file to the config sub-folder within your mAirList program folder. Here is a currentl skin.ini example: 

;[MainWindow]
;Color=#A5B6C9

[Browser]
BackgroundColor=#A5B6C9
;ButtonColorFrom=#FFFFFF
;ButtonColorTo=#FFFFFF
;ButtonHotColorFrom=#D20000
;ButtonHotColorTo=#FFFFFF
;ButtonSelectedColorFrom=#D20000
;ButtonSelectedColorTo=#000000
;ButtonSeparatorColor=#FFFFFF
;SplitterColorFrom=#FFFFFF
;SplitterColorTo=#FFFFFF
;DividerColorFrom=#FFFFFF
;DividerColorTo=#FFFFFF
;HeaderColorFrom=#FFFFFF
;HeaderColorTo=#FFFFFF
;FrameColor=#FFFFFF
;ToolPanelColorFrom=#FFFFFF
;ToolPanelColorTo=#FFFFFF
;ToolPanelHeaderColorFrom=#FFFFFF
;ToolPanelHeaderColorTo=#FFFFFF

[CartWall]
NameFontName=Arial
NameFontSize=8
NameFontStyle=1
NameFontColor=#000000
FadeNameFontColor=#000000
PlayingNameFontColor=#000000
StateFontName=Arial
StateFontSize=0
StateFontStyle=0
StateFontColor=#000000
FadeStateFontColor=#000000
PlayingStateFontColor=#000000
TimeFontName=Arial
TimeFontSize=12
TimeFontStyle=1
TimeFontColor=#000000
FadeTimeFontColor=#000000
PlayingTimeFontColor=#000000
TitleFontName=Arial
TitleFontSize=9
TitleFontStyle=0
TitleFontColor=#000000
FadeTitleFontColor=#000000
PlayingTitleFontColor=#000000
ArtistFontName=Arial
ArtistFontSize=9
ArtistFontStyle=0
ArtistFontColor=#000000
ButtonSize=24
ProgressBarHeight=14
ProgressBarMargin=12
BorderColor=#000000
EmptyColor=#A5B6C9
LoadedColor=#FFFFFF
PlayingColor=#FFD763
FadeColor=#FFCCFF
EOFColor=#00FFFF
PFLColor=#00FFFF
PausedColor=#00FFFF
ErrorColor=#C71585
FlashEOFColor=#D20000
NextColor=#FFFFFF
BorderColor=#000000
ProgressBarBorderColor=#FFFFFF
ProgressBarElapsedColor=#FFFFFF
ProgressBarRemainColor=#000000
ProgressBarRampColor=#000000
ProgressBarElapsedRampColor=#FFFF00
ProgressBarOutroColor=#A3000A
ProgressBarEmptyColor=#50575A
PFLButtonActiveColor=#FFFF00
PFLButtonColor=#C0C0C0
PlayButtonActiveColor=#FFFF00
PlayButtonColor=#C0C0C0
StopButtonActiveColor=#D20000
StopButtonColor=#C0C0C0

[Playlist]
ToolbarFontSize=12
ToolbarFontStyle=1
ToolbarFontName=MS Sans Serif
NameFontName=Arial
NameFontSize=8
NameFontStyle=1
NameFontColor=#000000
FadeNameFontColor=#000000
PlayingNameFontColor=#000000
StateFontName=Arial
StateFontSize=0
StateFontStyle=0
StateFontColor=#000000
FadeStateFontColor=#000000
PlayingStateFontColor=#000000
TimeFontName=Arial
TimeFontSize=12
TimeFontStyle=1
TimeFontColor=#000000
FadeTimeFontColor=#000000
PlayingTimeFontColor=#000000
TitleFontName=Arial
TitleFontSize=9
TitleFontStyle=0
TitleFontColor=#000000
FadeTitleFontColor=#000000
PlayingTitleFontColor=#000000
ProgressBarHeight=20
ProgressBarBorderColor=#EBEBEB
ProgressBarElapsedColor=#B2B4BF
ProgressBarRemainColor=#FFFFFF
ProgressBarRampColor=#FD0100
ProgressBarElapsedRampColor=#33100A
ProgressBarOutroColor=#FF0101
BackgroundColor=#DDDDDD
BorderColor=#000000
;SelectedBorderColor=#FFFFFF
;EOFRowColor=#FFF7BD
;ErrorRowColor=#A3100A
;LoadedRowColor=#00A000
;PFLRowColor=#F8D47E
;PlayingRowColor=#D20000
;RowColor=#000000
;FontColor=#FFFFFF
;PlayingFontColor=#000000
;FadeColor=#FFCCFF
;BorderWidth=5
EOFColor=#CE1C29
IconSize=25
ColWidths=45,95,*,60,55,40,45,0
ColumnOrder=1,8,2,3,4,5,6,7
;Order: Icon,Time,Title,Duration,Ramp,End,Link,Artist
HistoryPlayerNameFontName=MS Sans Serif
HistoryPlayerNameFontSize=11
HistoryPlayerNameFontStyle=0
HistoryBacktimingFontName=MS Sans Serif
HistoryBacktimingFontSize=11
HistoryBacktimingFontStyle=0
HistoryFontName=MS Sans Serif
HistoryFontSize=11
HistoryFontStyle=0
HistoryCommentFontName=MS Sans Serif
HistoryCommentFontSize=9
HistoryCommentFontStyle=0
BreakRowColor=#FF6666
CommandRowColor=#CFF8FF
ContainerRowColor=#FFCC99
DummyRowColor=#FFCCFF
StreamRowColor=#00FFFF
FocusedSelectionColor=#000000
FontName=MS Sans Serif
FontSize=11
FontStyle=0
CommentFontName=MS Sans Serif
CommentFontSize=9
CommentFontStyle=0
BreakFontStyle=1
CommandFontStyle=1
ContainerFontStyle=1
DummyFontStyle=1
StreamFontStyle=1

[Player]
NameFontName=Tahoma
NameFontSize=0
NameFontStyle=1
NameFontColor=#FFFFFF
FadeNameFontColor=#000000
PlayingNameFontColor=#000000
StateFontName=Tahoma
StateFontSize=0
StateFontStyle=0
StateFontColor=#FFFFFF
FadeStateFontColor=#000000
PlayingStateFontColor=#000000
TimeFontName=Tahoma
TimeFontSize=0
TimeFontStyle=1
TimeFontColor=#FFFFFF
FadeTimeFontColor=#000000
PlayingTimeFontColor=#000000
TitleFontName=MS Sans Serif
TitleFontSize=12
TitleFontStyle=1
TitleFontColor=#FFFFFF
FadeTitleFontColor=#000000
PlayingTitleFontColor=#000000
ArtistFontName=Arial
ArtistFontSize=9
ArtistFontStyle=0
ArtistFontColor=#000000
ProgressBarHeight=14
ProgressBarBorderColor=#FFFFFF
ProgressBarElapsedColor=#50575A
ProgressBarRemainColor=#FFFF00
ProgressBarRampColor=#FD0100
ProgressBarElapsedRampColor=#33100A
ProgressBarOutroColor=#FF0101
ProgressBarMargin=12
ButtonSize=32
EmptyColor=#A5B6C9
LoadedColor=#000000
PlayingColor=#FFD763
FadeColor=#FFCCFF
EOFColor=#FFD763
PFLColor=#FFD763
PausedColor=#FFFFCC
ErrorColor=#C71585
FlashEOFColor=#D20000
NextColor=#000000
BorderColor=#000000
PFLButtonActiveColor=#FFFF00
PFLButtonColor=#C0C0C0
PlayButtonActiveColor=#FFFF00
PlayButtonColor=#C0C0C0
StopButtonActiveColor=#D20000
StopButtonColor=#C0C0C0
PlayingTitleFontColor=#000000
PlayingStateFontColor=#000000
PlayingTimeFontColor=#000000
PlayingNameFontColor=#000000
RampPrefix=INTRO:

[ProgressBar]
ProgressBarBorderColor=#000000
ProgressBarElapsedColor=#00FF00
ProgressBarRemainColor=#000000
ProgressBarRampColor=#000000
ProgressBarElapsedRampColor=#FFFF00
ProgressBarOutroColor=#A3000A
ProgressBarEmptyColor=#000000
ProgressBarColor=#000000
ProgressBarMargin=10
BorderColor=#000000
EmptyColor=#000000

[Toolbar]
ShowSeparator0=on
ShowNew=on
ShowOpen=on
ShowSave=on
ShowSeparator1=on
ShowInsert=on
ShowProperties=on
ShowDelete=off
ShowSeparator2=on
ShowEvents=off
ShowActions=on
ShowCartwall=on
ShowSeparator3=on
ShowAbout=on

[ScreenObject0]			; OnOff Switch
OnAirFontName=Digital
OffAirFontName=Digital
OnAirFontSize=20
OffAirFontSize=20
OnAirFontStyle=1
OffAirFontStyle=1
OnAirFontStyle=1
OnAirFontColor=#FF0000
OffAirFontColor=#FFFFFF
OnAirBackgroundColor=#000000
OffAirBackgroundColor=#000000
OnAirCaption=ON AIR
OffAirCaption=OFF AIR
;BorderColor=#FFFFFF

[ScreenObject1]			; Today's Date
FontName=Digital
FontSize=20
FontStyle=1
FontColor=#00FFFF
Color=#000000

[ScreenObject2]			; Current Time
FontName=Digital
FontSize=20
FontStyle=1
FontColor=#00FF00
Color=#000000

[ScreenObject3]			; Hour CountDown
FontName=Digital
FontSize=20
FontStyle=1
FontColor=#FFCC99
Color=#000000

[ScreenObject4]			; Ramp Countdown
FontName=Digital
FontSize=20
FontStyle=1
FontColor=#FFFF00
Color=#000000

[ScreenObject5]			; Time Remaining
FontName=Digital
FontSize=20
FontStyle=1
FontColor=#00FF00
Color=#000000

[ScreenObject6]			; Date Label
FontName=Tahoma
FontSize=8
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject7]			; Time Label
FontName=Tahoma
FontSize=8
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject8]			; Hour CountDown Label
FontName=Tahoma
FontSize=8
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject9]			; Ramp Label
FontName=Tahoma
FontSize=8
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject10]		; Time Remaining Label
FontName=Tahoma
FontSize=8
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject11]		; A Label
FontName=Arial
FontSize=20
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject12]		; B Label
FontName=Arial
FontSize=20
FontStyle=1
FontColor=#FFFFFF
Color=#000000

[ScreenObject13]		; C Label
FontName=Arial
FontSize=20
FontStyle=1
FontColor=#FFFFFF
Color=#000000
[edit]

[Playlist] and [Player] Sections

Uae these two sections to define default or 'global' settings for all Playlists and Players: you will save yourself a great deal of duplication of effort. You can still over-ride these defaults for individual Playlists and Players by specifying different settings in individual [Playlistn] and [Playerx_y] sections.

We strongly suggest that you store at least your font, font size and style, progress bar, and colour settings in [Playlist] and [Player]. You will minimize and perhaps even eliminate the need to add individual [Playlistn] and [Playerx_y] sections to your skin.ini file.

[edit]

Hiding Playlist Toolbars

To 'hide' a Playlist's Toolbar (Auto/Assist, etc.), add the line ToolbarFontSize=0 to the [Playlistn] section. To hide the Toolbar in all Playlists, add the line to the 'global' [Playlist] section instead.

[edit]

Layout

Layout means the size and position of each mAirList screen element. Obviously (?) the maximum area available depends on how many monitors you have, and your current screen resolution (set in Display Properties, Settings or in Windows Control Panel). For example, if you use 1024×768 resolution, the maximum value for Width is 1023 and the maximum value for Height is 767 (see below).

Because of differences in screen resolution (or number of monitors!) between PCs, the same layout—when used on different PCs—may look very small, or it may be much larger than the monitor, making parts of the layout 'invisible' because they are 'off the screen.' If you are loading other people's layout.ini samples, or you are designing a layout for more than one PC, this is an important point to bear in mind.

You create a custom layout by adding a layout.ini file to your mAirList program folder. If you do so, you must specify the size and position of every screen element (this includes the main Toolbar!) in pixels, using Left, Top, Width and Height entries in each section. The top left pixel on the screen is Left=0, Top=0.

The section names in layout.ini are the same as those in skin.ini, with the addition of [Toolbar]:

  • [Toolbar] (this is the main Toolbar, not a Playlist Toolbar!)
  • [Playlist0] (first playlist) [Playlist1] (second playlist), …
  • [Player0_0] (first player of the first playlist), [Player0_1] (second player of the first playlist), …
  • [Cartwall]
  • [Browser]
  • [Clock]
  • [Date]
  • [LEDClock]
  • [Logo]

Unlike the skin.ini file, there are no 'global' [Playlist] or [Player] sections in layout.ini; you must have a separate section for every Playlist and Player in your layout, as shown in the list above.

If you forget to include a screen element in your layout.ini file, you should expect that element to appear in a strange place on the screen, or behind other elements, or not to be displayed at all. Remember: you need to specify every element in layout.ini.

Here's a layout tip if you want to display an (embedded) Cartwall and the Browser in the same place to save screen space: use the same Width, Height, Top, and Left values for [Cartwall] and [Browser]; and in Configuration Options, Cartwall, Display Options, select Show Cartwall tool button in embedded mode. You can then use the Cartwall button in the main Toolbar to toggle the Cartwall on and off.

[edit]

Custom Player Button Graphics

The graphics on the buttons in the Cartwall, Players, and Playlist Toolbar use a default set of bitmap files compiled into mAirList.

To use your own custom graphics on the buttons:

  1. Create the button designs in a graphics 'paint' program which can save .PNG files with a transparent colour, using magenta (#FF00FF) as the transparent colour.
    The pixel size of the files should be a little smaller than the mAirList button size, and square. For example, if your ButtonSize is 28, 24×24 pixels works well.
    Create designs for these nine buttons:
    • Close
    • Fadeout
    • Hook
    • Loop
    • Next (Playlist Toolbar button)
    • Pause
    • PFL
    • Start
    • Stop
  2. Name the files using the form: button_close.png, button_fadeout.png, …, button_hook.png, …, and so on up to button_stop.png.
  3. If it does not already exist, create a new folder in your mAirList program folder named images, and copy all nine .PNG files to this folder.

When you next start mAirList and mAirListTag, your custom graphics will be displayed on the buttons. Remember that the …ButtonColor and …ButtonActiveColor settings in your skin.ini file will be the actual background colours used when your custom buttons are displayed on the Player, Cartwall, or Playlist Toolbar.

[edit]

Custom Playlist Icons

You can change the icons displayed beside items in a Playlist, and in the Link column of a Playlist. Note that you don't have replace all the icons: only as many as you need or want to.

To use custom icons, first create transparent .PNG files named as listed below. mAirList will resize your icons to fit, but ideally you should make the pixel size of each file reasonably close to the Playlist row height, and square (for example, 32×32 or 64×64 pixels).

The icon replaced by each .PNG file is shown below:

  • icon_break.png (BREAK Item icon)
  • icon_command.png (COMMAND Item icon)
  • icon_comment.png (icon shown if Item contains a Comment)
  • icon_container.png (Container item icon)
  • icon_error.png (ERROR Item icon)
  • icon_file.png (audio file Item icon)
  • icon_linked.png (icon in Link column, if Item is Linked)
  • icon_regionContainer.png (regional Container Item icon)
  • icon_regionStream.png (regional stream Item icon)
  • icon_stream.png (stream Item icon)
  • icon_unknownItem.png ('unknown' Item icon)

If it does not already exist, create a new folder in your mAirList program folder named images, and copy your icon_….PNG files to this folder.

[edit]

Examples

You can see examples of skins and layouts in the Skin and Layout Gallery.

Retrieved from "http://wiki.mairlist.com/index.php/Custom_Skins_and_Layouts"
Personal tools