VDJPedia



 Skin Browser

Back to Skin SDK

Skin SDK: The <browser> element


Availability: v8.0 onwards

The browser element sets the space that will be used to draw VirtualDJ's Browser (Folders list, Songs List, Sideview, Info). Custom Browsers is also possible using <split> panels. Browsers can be nested in panels and have visibility=""

Only position is required, all other elements are optional.

Parameters:

  • toolbar="yes|no" : Whether or not to display the toolbar on the left of the browser
  • sideview="yes|no" : Whether or not to display the sideview
  • folders="yes|no" : Whether or not to display the folder list
  • infos="yes|no" : Whether or not to display the info panel
  • effects="yes|no" : Whether or not to display the effects section
  • searchbar="yes|no" : Whether or not to display the search toolbar above the file list (b2817 or later)
  • lineheight="" : Define the percentage of the height between 2 browser lines (default 1). E.g. lineheight="2.0" will provide double height than the default

Children:

  • <colors background=""> set the background. transparent can be used to create a transparent background. Note that in this case, it is strongly advised to set skin breakline and breakline2 in order to prevent issues when stretching the browser. Colors then has children of it's own:
    • <separators line="#7E7E7E"/>
    • <toolbars background="#393939" text="#FFFFFF" iconbackground="#1E1E1E" border="#6D6D6D" />
    • <lists background="#202020" stripes="#2A2A2A" over="#252525" overstripes="#2F2F2F" selected="#555555" focus="#7A7A7A" text="#FFFFFF" overtext="#FFFFFF" selectedtext="#FFFFFF" focustext="#FFFFFF" automix="#4080C4" livefeedback="#FFC4C4" download="#FF4040" scan="#FF4040" button="#3D3D3D" buttonactive="#838383" insert="#FF0000" />
    • <grids background="#2A2A2A" over="#2F2F2F" selected="#555555" focus="#7A7A7A" text="#FFFFFF" overtext="#FFFFFF" selectedtext="#FFFFFF" focustext="#FFFFFF" stripes="#202020" overstripes="#2E2E2E" selectedstripes="#2E2E2E" focusstripes="#2E2E2E" label="#7F7F7F" />
    • <columns background="#454545" text="#FFFFFF" />
    • <scrollbars background="#454545" button="#FFFFFF" />
    • <info background="#393939" stripes="#303030" text="#FFFFFF" label="#A0A0A0" artist="#D5D5D5" title="#FFFFFF" />
    • <search background="#1F1F1F" border="#7A7A7A" selected="#717171" text="#FFFFFF" cursor="#FFFFFF" />
    • <prelisten background="#1F1F1F" border="#7A7A7A" selected="#136024" cursor="#18A639" button="#CBCBCB" buttonbackground="#5C5C5C" buttonselected="#18A639" />
  • <font/>
  • <fontsearch/>
  • <fontheader/>
  • <fontgridtitle/>
  • <pluginzone/>


Example 1:
<browser>
<pos x="13" y="547" width="1898" height="525" />
</browser>


Example 2:
<browser toolbar="yes" sideview="yes" folders="yes" infos="yes" effects="yes" searchbar="yes">
<pos x="13" y="547" width="1898" height="525" />
<colors background="#202020">
<separators line="#7E7E7E"/>
<toolbars background="#393939" text="#FFFFFF" iconbackground="#1E1E1E" border="#6D6D6D" />
<lists background="#202020" stripes="#2A2A2A" over="#252525" overstripes="#2F2F2F" selected="#555555" focus="#7A7A7A" text="#FFFFFF" overtext="#FFFFFF" selectedtext="#FFFFFF" focustext="#FFFFFF" automix="#4080C4" livefeedback="#FFC4C4" download="#FF4040" scan="#FF4040" button="#3D3D3D" buttonactive="#838383" insert="#FF0000" />
<grids background="#2A2A2A" over="#2F2F2F" selected="#555555" focus="#7A7A7A" text="#FFFFFF" overtext="#FFFFFF" selectedtext="#FFFFFF" focustext="#FFFFFF" stripes="#202020" overstripes="#2E2E2E" selectedstripes="#2E2E2E" focusstripes="#2E2E2E" label="#7F7F7F" />
<columns background="#454545" text="#FFFFFF" />
<scrollbars background="#454545" button="#FFFFFF" />
<info background="#393939" stripes="#303030" text="#FFFFFF" label="#A0A0A0" artist="#D5D5D5" title="#FFFFFF" />
<search background="#1F1F1F" border="#7A7A7A" selected="#717171" text="#FFFFFF" cursor="#FFFFFF" />
<prelisten background="#1F1F1F" border="#7A7A7A" selected="#136024" cursor="#18A639" button="#CBCBCB" buttonbackground="#5C5C5C" buttonselected="#18A639" />
</colors>
<fontsearch size="20"/>
<font size="20" />
<fontheader size="20" />
<fontgridtitle size="20" />
</browser>



Custom Browser
To create your own custom Browser, see Custom Browser



Back to Skin SDK