本教程仅供参考
本教程是如下教程的后续：
【初级教程-界面】--简单分栏用户界面（CUI配置）的制作 https://tieba.baidu.com/p/2093606833
-------
新手在熟悉以上地址的
那
个教程的前提下，再来参考本教程~---------
▶前面教程初步讲了在分栏界面下，各面板的布局，主要是面板栈道分离器的布局，熟悉基础的布局代码，给予各面板固定的相对位置和大小。
▶然后本教程，主要是简单的谈一下如何制作一个看上去不是“白板”的分栏界面，以及如何修改、DIY已有的经典配置。
▶照例以下楼配置来浅显地谈谈

预览图： 这是上个教程出现的配置，这次出现很合适~
普通模式：
点击切换按钮下的假mini模式：
细节功能：
预览完毕
下载地址：[有效] http://pan.baidu.com/share/link?shareid=421084&uk=1376055942
其实我是分享配置来的.....

留空，备用楼。

上面分享配置的布局图：
各面板间的布局代码就不再提了。
PS：因为面板布局不再提，所以下面就随便说了，这个节奏不错，玩的溜。

---------WSH面板移植---------
首先介绍下WSH面板吧，就是上面布局图的 'WSH面板sp',WSH面板的基本思路是：用JS代码编写一个配置需要的功能面板，代码简易程度决定于所需功能，少则几百行代码，多则几千行。WSH功能面板的编写，现在应该是foobar配置制作的最高阶模块，没有之一，常见的WSH功能面板有WSH播放列表、WSH控制按钮、WSH专辑封面面板、WSH进度条/音量条、WSH歌词面板等，基本foobar上原来的那些功能面板都可以用WSH来制作，但是，因为WSH难度大、复杂，现在完善的WSH成品功能面板不多，每个功能类型大概就只有一两个做好的模版。
此面板来源于插件：
foo_uie_wsh_panel_mod.dll，一般美化配置里都会有，只要不是很老的配置
这儿鉴于大家和我的计算机语言能力都一样不出众，所以我们只需要知道怎么移植做好的WSH功能面板。
以上图配置的WSH播放列表切换器为例：
其在布局图位置如下：
其WSH JS代码如下，1400行
开头为：
/ ==PREPROCESSOR==
// @name "WSH Tabbed Playlist Manager"
// @version "3.1.0 modded for black scheme"
// @author "Br3tt"
// @feature "dragdrop"// ==/PREPROCESSOR==
以上代码前有// 的是备注信息，// 后的代码是不会被读取的。这些只是介绍下该WSH面板的功能、名称、作者、版本，我们主要用来获取名称，WSH Tabbed Playlist Manager就是WSH的播放列表切换器啦。
在打算对一个完善的WSH面板进行移植时，首先要注意代码前面那几段，里面会提到该WSH面板载入时需要的配置文件，以及相关图形元素（一般是图片），详情如下2图：
---写在开头的需要载入的配置文件以及其路径
%fb2k_path%是指该foobar程序主目录，这类文件一般都是在主目录下的skins文件夹里

--写在比较靠
前位置的需要载入的图片
var path = fb.FoobarPath + "skins\\Mnlt2\\";是设定图片路径值，下面那些图片都在此路径下
照着路径打开就能看到那些要被载入的图片了，一般是界面上的那些按钮图片。
好了，知道这些后，基本可以用来移植了，移植前在自己的配置上新建布局一个WSH面板，并用
布局代码设定其相对位置，然后移植入那些歌WSH功能面板，如图：
这样培育床有了
然后把上面代码里所提到的需要载入的文件图片移植到你自己的配置目录下，简单地说就是把那个配置里的skins文件里的文件复制到你自己配置程序主目录的skins文件夹里，当然有些是用不到的，自己看情况删，这儿不多讲。
接着是去拿种子，回到先前的那WSH配置代码窗口，如下图操作：
如上图导出配置代码，保存；保存之后，再回到上面那个新建的WSH面板，点击配置
如上图导入代码之后，得到如下，移植成功。
同样下图的进度条、音量条、循环设置及星级标记都是WSH功能面板，很小巧实用
-------------WSH面板移植初步over-------------

--------------面板栈分离器脚本-------------
这儿简单介绍下在面板栈分离器里实现的功能，更多复杂的我不懂~
面板栈分离器除了"面板列表"的布局代码很重要之外，其"脚本"也是相当实用呢。
通过脚本代码设置，可以实现自定义图片按钮、自定义显示某些文字信息、在面板栈分离器上划线花框打颜色 以及更复杂的比如模拟面板切换（教程配置里右边那歌词、简介、视觉、乐库这切换行），或者是显示专辑封面（Zune下面那个就是），抑或本教程样品配置的切换界面大小功能等等
，总之，像WSH面板一样，
面板栈分离器脚本，简称PSS也可以实现很多功能。
如下图，这是我那个配置里的那个切换按钮所在的面板栈分离器里的脚本，实现了自定义按钮和切换界面大小以及实现在小界面下显示控制按钮。
介绍完毕，这儿鉴于我能力及其有限，只谈一些基本功能，复杂的轻轻带过吧。

❶
自定义功能按钮
如下图本教程配置上的这个按钮，实现的是点击后关闭foobar
右键-分离器设置（在参数选项） 如下图
代码很基础：
$puts(skin_path,%ps_foobar2000_path%\skins\Mnlt2)
$imagebutton(5,5,15,15,$get(skin_path)\fullmode3x.png,$get(skin_path)\fullmode4x.png,COMMAND:文件/退出)
这是自定义按钮代码的基础模版，$puts(skin_path,%ps_foobar2000_path%\skins\Mnlt2)是载入图片路径，赋值于skin_path，为下面代码所调用，$imagebutton是图片按钮语法字符，5,5,是位置代码，设定的是载入显示的图片的具体相当位置，其具体意义是距离左侧边界5个单位、距离上端边界5个单位开始（类似于平面坐标XY,不过其正方向分别是右和下），15,15是给予其长15宽15的平面空间来显示图片；$get(skin_path)\fullmode3x.png,$get(skin_path)\fullmode4x.png,是调用图片路径的两张图片，分别用于鼠标没点的时显示的图片和鼠标移到上面时显示的图片，一般可以设为两张一样的图片；COMMAND:文件/退出 是定义的按钮功能，格式来源于参数选项里的快捷键，比如播放/下一首、视图/弹出主菜单，凡是在快捷键设置里能找到的操作，这儿都是可以设置的，大概吧。
❷
划线、画框
以本配置为例，按钮外部有边界划线，如图:
那3个功能按钮就不说了，右键-分离器设置
代码如下
$drawrect(0,0,%_width%,1,155-155-155,)
$drawrect(0,18,%_width%,1,155-155-155,)
$drawrect(0,37,%_width%,1,155-155-155,)
$drawrect(0,0,1,%_height%,155-155-155,)
$drawrect是画框语句，0,0,%_width%,1这4个数值也是指定了相对位置，分别是在xy的那个位置，画多宽多长的框（框是实心颜色填充的），当宽度设为1时（如第一行代码），那么那个框就变成一条横线了，同理长度设为1就变成一条竖线（如第四行代码）%_width%、%_height%是调用该面板栈分离器的宽和高（便于在面板栈分离器边界划线），155-155-155是RGB3原色代码，指定框或线的颜色。
❸
PSS模拟切换栏---这是个完善的模版，我们稍微改下大小，颜色什么的就可以了
下图两个就是
照例-右键分离器设置
我们就只需要修改如下这段代码：
//------------------Colors & Paddings--
$puts(text_color,120-120-120) //设定字体颜色
$puts(text_color_h,147-180-50) //设定鼠标移上去那栏的字体颜色
$puts(text_color_a,128-0-128) //设定鼠标移上去并选择后的那栏的字体颜色
$puts(stack_padding_left,20) //设定第一栏距离最左边的距离
$puts(tab_padding,50) //设定每栏的（标签）宽度
$puts(tab_height,24) //设定每栏的高度
$puts(grad_color1,147-180-50) //选中那栏的背景颜色1
$puts(grad_color2,147-180-50) //选中那栏的背景颜色2 这两种颜色是从上到下的颜色渐变
PS：运用此面板时每一栏都对应这一个要切换的功能面板，布置如下图：
各栏面板布局时也比其他面板布局较简单，如下图

❹显示文本信息
如图配置中显示的文件格式和码率，（左侧的是两个图片功能按钮，上面讲过）
代码如下：
$drawtextex(%bitrate% k
bp
s,30,57,$sub(%_width%,110),20,255-255-255,end_ellipsis)
$drawtextex(%codec% ,30,77,$sub(%_width%,110),20,255-255-255,end_ellipsis)
$drawtextex是书写文本语句，%codec%为文本内容，用前后各1百分号表示，里面是特定字符bitrate是比特率，codec是文件格式，其他有artist、album、title、filename（文件名）、length（歌曲长度）、rating（星标等级）都可以用（当然直接显示特定文本也是行的，不用%xx%,比如：$drawtextex(我去年买了个表.....略 ），30,57,$sub(%_width%,110)分别是距离左侧距离、距离上端距离、给予该文本显示的长度，20是给予该文本显示的高度，255-255-255三原色，end_ellipsis就照抄吧。
❺
显示专辑封面---这个就当个基础模版吧
示例如下：封面右侧那个是显示文本信息，%artist%和%title%，上面也讲过了。
其脚本代码如下：
$puts(skin_path,%ps_foobar2000_path%\skins\Metro) //不用讲了吧，可别照抄路径哦，你电脑上可不一定有...
$drawrect(0,49,62,62,0-0-0-0,255-255-255,) //画外框，上面讲到过了，画的外框大小是62，比封面图片的60大2，原因你应该知道..
$font(,10,) //定义字体大小和字体名称，如$font(微软那个雅黑,10,)
$imageabs(1,49,62,62,skins\Metro\abc.jpg,nokeepaspect) //没有专辑图片时，显示特定的图片，
前面4个数字就是图片位置和给与他显示的大小（长宽），下面的都一样，应该说本教程的都一样。
$ifequal(%ps_track_state%,0, //照抄吧
$imageabs(1,49,60,60,%path%,artreader nokeepaspect) //读取音频文件所在目录下的图片
$imageabs(1,49,60,60,D:\软件\Foobar2000\lastfm\artist\%artist%,artreader nokeepaspect) //读取特定路径下以艺术家artist命名的图片，下面行同理
$imageabs(1,49,60,60,D:\软件\Foobar2000\lastfm\album\%albumt%,artreader nokeepaspect)
,
)
这逗号和括号必须要有并注意要在英文模式下打出来（代码里所有逗号括号都是如此）
--------下面提供下基础的模版供大家修改： 封面大小为60，可以改大点，修改62和60
$puts(skin_path,%ps_foobar2000_path%\skins\Mnlt2)
$drawrect(0,0,62,62,0-0-0-0,255-255-255,)
$imageabs(0,0,60,60,skins\xxxx\abc.jpg,nokeepaspect)
$font(,10,)
$ifequal(%ps_track_state%,0,
$imageabs(0,0,60,60,%path%,artreader nokeepaspect)
$imageabs(0,0,60,60,D:\软件\Foobar2000\lastfm\artist\%artist%,artreader nokeepaspect) ,)
$imageabs(0,0,60,60,D:\软件\Foobar2000\lastfm\album\%albumt%,artreader nokeepaspect)
,
)
注意最后的几个标点和括号，第三行那个路径和那张没有专辑封面时显示的特定图片。
上面代码效果图如下：

----------Elplaylist播放列表------
其实这个我更不懂 要TJ了 大概浅显地交流下吧

$ifequal(%rating%,5, //判断歌曲星级是否为5
$imageabs($sub(%el_width%,195),6,,,$get(skin_path)\heart.png,), //是5，显示实心图，$imageabs是专门的显示图片语法，前面忘了讲了，$sub(%el_width%,195),6,,这些字段的意思是显示图片的位置代码，就是从哪里开始（$sub(%el_width%,195)--从距离最右边195单位开始，%el_width%为固定字段定义指音轨列表的总长），长度为多少（6），$get(skin_path)前面讲过了。
$imageabs($sub(%el_width%,195),6,,,$get(skin_path)\heart_empty.png,) //不是，显示空心图
)
------
分组标题 代码如下，省略了后面那部分，那部分我讲不来，太复杂了..
分组标题就是下面这种
上图右键设置-分组标题
代码比较多，讲简单的
//------------BG------------绘制分组标题外框
$if(%el_selected%,$gradientrect(0,0,%el_width%,%el_height%,90-90-90,90-90-90,),
$drawrect(0,0,%el_width%,%el_height%,240-240-240,)) //大概意思就是先判断是否音轨被选中，是，则画一个%el_width%,%el_height%长宽的框
//--------album art-------------
以下
这段参考前面那个专辑面板
$imageabs(0,0,%el_height%,%el_height%,%el_foobar2000_path%\skins\Mnlt2\disc.png,nokeepaspect,,)
$imageabs(-1,-1,$add(%el_height%,1),$add(%el_height%,1),%path%,artreader nokeepaspect,,)
//-----------title color-----------
这段是定义分组标题行上的专辑名，艺术家文本的颜色
$puts(title_color,$if(%el_selected%,%selected_text_color%,%text_color%))
$puts(title_color_alt,$if(%el_selected%,%selected_text_color%,%text_color_alt%))
接下来的那些代码不讲了，一没有代表性，二很复杂，三我不懂也没看过（自动过滤...
）

Elplaylist瞎讲完了，有点乱，其实我们不一定要自己重新做一个Elplaylist配置，我们可以修改优秀的Elplaylist配置，移植Elplaylist和移植WSH面板差不多，导出导入什么的，也要注意需要载入的图片什么的。