很久之前在steam上折腾了一段时间的steam皮肤，最后自定义了半天，还是发现不如直接用别人的来的舒服。直接在搜索引擎上搜索关键词，结果发现我辛辛苦苦要做的皮肤别人已经做好了，比如我现在正在使用的这款ATRI的皮肤，就正好符合我的目标：

       但是使用没多久，我就发现设置页面里有几个菜单，排版错位了（其实就是UI/元素错位），比如这样：

当时我心说我草，大佬你这做的皮肤.....再一看大佬发这皮肤的时间，啊，几个月前了，这steam每天都更新那么几回，估计这个发生变动也在所难免，那就将就一下吧。又过去了几个月，我又点开了Steam设置，这下强迫症发作了，我开始搜教程，看看这steam皮肤到底是怎么从头做出来的。在看了一篇简书上的教程后，对着教程开始改，花了十几分钟后终于修复完成，下面开始正文。

简书教程链接：https://www.jianshu.com/p/3421d76beae3

简单来说就是steam皮肤里，每一个控制样式都有对应的layout文件或者其他样式表来描述，如果发生错位，那么就有可能是新版本的steam的样式表中对它们的描述更新了，而原来的皮肤中的样式表还停留在以前的版本。所以我们要做的就是将这些Steam皮肤中过时的样式表进行更新，教程中提到了一个工具：VGUI Layout Debugger，该工具上图中也有。为了将该工具调用出来，首先我们可以编写一个文本文档，然后将其保存成.bat结尾的批处理文件：

F:\Steam改成你自己电脑上Steam的安装路径，保证这个路径下面有steam.exe就行，这个批处理只是为了方便我们进开发者模式而已（如果不知道怎么改成bat文件，请自行百度[如何显示文件后缀名]）。运行批处理会自动重启Steam并进入开发者模式，现在我们会发现主菜单里多了一个Console，说明你成功进入了开发者模式，没成功就按照上面的步骤再试试。[重启steam会停留在开发者模式。正确退出开发者模式需要完全关掉steam，再打开。听起来很蠢但确实如此。]

接下来我们打开Steam的设置（这里我们假定你Steam设置里元素错位，如果其他位置有元素错位，就先切换到那个位置），按下F6就可以打开VGUI Layout Debugger这个工具了，想要关闭工具就再按一次F6。工具打开时，点击任何按钮都不会有反应，与之相应的是点击任何一个元素，不论是文本框还是勾选框之类，Debugger内都会显示该元素所对应的样式表文件名，就在第一行的Container右边，此时还会显示一个超链接指向文件实际地址，点击打开后可以直接用记事本编辑。不过我们现在要做的不是编辑样式表，我们只需要知道样式表的名称就行了。

比如上面第一张错位的图，我们看到“远程畅玩”这块菜单对应的样式表是叫settingssubstreaming，那么我们就需要定位到F:\Steam\resource\layout（同上，这里的路径改为你自己电脑上的实际Steam安装路径，后面不再赘述），这里存放着Steam原生最新的样式表layout文件，我们找到settingssubstreaming.layout文件，复制，再打开F:\Steam\skins\ATRI\resource\layout，我们找到一样文件名的文件，将其后面的.layout改为.layout-bak（一个示例，后缀名怎么改其实都行，只要和原来不一样），然后将原生的layout文件粘贴于此处，这样，该菜单的样式表我们就修复完成了。

下面直接放上修复后的图：

虽然不能说完全修好了，但是已经好很多了，就这样吧，我懒得再动手深究原理了

放上ATRI皮肤原作者的帖子：https://tieba.baidu.com/p/7238232868

分割线[Last Edited:2021/10/24 02:10]

现在给出彻底修好UI错位的方法。首先，上图"游戏中"的"界面快捷键"很显然已经与上面的勾选框部分重合，此时我们依然需要用到VGUI Layout Debugger，选中文本框后如下所示。

现在知道该文本框的对应名称是"HotKeySelectorLabel"，在subpaneloptionsingame.layout中很容易找到：

但是第一个HotKeySelectorLabel并不是我们需要改动的，此时它在controls“控件”下，描述的是它的功能，而我们需要的在下面的layout"布局"里：

controls=HotKeySelectorLabel，这个元素对应的正是"界面快捷键"。不过为什么后面还跟着一个HotKeySelector，那是因为下面就是用来修改快捷键的框，这两者是一体的。细心观察可以发现，几乎每个layout下的元素里都会有start=这样的变量，合理猜想start就是描述了元素的具体位置，所以我们要设法将它的位置以上面勾选框为基准来改动。用Debugger看到上面的勾选框名称是EnableVRDesktopGameTheaterCheck，那么我们就将start=后面的值改成EnableVRDesktopGameTheaterCheck，然后重启看看效果如何。

看起来似乎还不错，不过上下距离可能短了些。在元素里再加上一条margin-top=12，增大间距后效果就好很多了。

基本所有元素的错误都可以通过校准start基准，再用margin-top或者margin-bottom的方式调整，具体数值很容易就可以试出来。另外，start基准虽然似乎只支持上下的调整，但是如果一边元素是top-right或者left，则另一边的left或right也可以用start来水平校准。而对于分割线Divider的位置，用start指定基准似乎会出现问题，直接用margin-top调整位置更适合。

另外，如果你用了一段时间后发现又有UI错位了，那说明steam又换样式表了，需要重新复制原生layout。尤其是碰到挤成一堆的按钮情况，务必这样做，因为这说明有控件删改，用上面的微调是无法改正的。

[Last Edited:2022/05/17 03:50]